Format date on page load

Navigation
1

Hello I wanted to format the date of my form in the page load, because the date is coming from the database in international format (yyyy-mm-dd).

I made this function to format my date, however I have 2 forms on the same page and both have inputs of the same name. My input is in text format. 

function formataData(ele){
    var value = $(ele).val();
    var d = undefined;
    if(value.search('-') > -1){
        d = $(ele).val().split('-');
        console.log(d);
    } else if($(ele).val().search('/') > -1) {
        d = $(ele).val().split('/');
        console.log(d);
    }

    if(d !== undefined){
        if(d[0].length > 3){
            $(ele).val(d[2]+'/'+d[1]+'/'+d[0]);
        }else {
            $(ele).val(d[2]+'-'+d[1]+'-'+d[0]);         
        }
    }
}

Summarizing what I wanted

-The page loads like this: 

<input type="text" name="vencimento" value="yyyy-mm-dd" class="form-control">

- I wanted to call my javascript / JQuery function on page load to look like this: 

<input type="text" name="vencimento" value="dd-mm-yyyy" class="form-control">

I used $ (document) .ready (function () {}); but it was too changed: / wanted to reuse this function in other codes! Thank you for your attention.

Note: I had forgotten, I want to call this function for all date fields in the page loading too

    
asked by anonymous 04.02.2017 / 14:36

3 answers

1

If you can not change how the data comes from the base, use the following: 

$(document).ready(function() {

   ajeita();

});

It will set the format in all fields with class form-control

  

Test the snippet below: 

function ajeita() {

  
    $('input.form-control').each(function () {

        var data = $(this).val().split('-');

        $(this).val(data[2] + '-' + data[1] + '-' + data[0])

    });
  

};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" value="1990-10-25" class="form-control" /><br />
<input type="text" value="1991-11-16" class="form-control" /><br />
<input type="text" value="1980-08-25" class="form-control" /><br />
<input type="text" value="2010-05-04" class="form-control" /><br />


<input type="button" value="testar" onclick="ajeita();" />
  

Remembering that only works if the 'original' fields have the three values (year, month and day), otherwise it will give an error when searching the array.

    
04.02.2017 / 16:01
1
$dataBanco1="2016-01-21"; // pra servir de exemplo
$dataBanco2="2016-01-23"; // pra servir de exemplo
$data1 = date('d/m/Y', strtotime($dataBanco1));
$data2 = date('d/m/Y', strtotime($dataBanco2));
<input type="text" name="vencimento" value="<?php echo $data1 ?> " class="form-control">
<input type="text" name="vencimento" value="<?php echo $data2 ?> " class="form-control">
    
04.02.2017 / 16:27
1

I come late perhaps with my answer ..., but:

If you want to do this in the browser and all dates are in yyyy-mm-dd format you can do this: 

$('input.form-control').each(function(){
    this.value = this.value.split('-').reverse().join('-');
});

If you can change this in the server, in SQL, you can do: 

DATE_FORMAT(coluna_data, "%d-%m-%Y") AS coluna_data

If you can change this on the server, in PHP, you can do: 

$data = date("d-m-Y", strtotime($dataOriginal));
echo '<input type="text" name="vencimento" value="'.$data.'" class="form-control">';
    
04.02.2017 / 18:50
colspan with css Select with subquery transforming into column