Format date on page load

Question

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

I did 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]);         
        }
    }
}

---

Summing up 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 when loading the page to look like this:

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

I used $(Document). ready(Function(){}); but it changed too much :/ wanted to reuse this function in other codes! Thanks for your attention.

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

Answer 1

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

$(document).ready(function() {

   ajeita();

});

Will set the format in all fields with the class form-control

Test in the snippet below:

function ajeita() {  
    $('input.form-control').each(function () {
        var data = $(this).val().split('-').reverse();
        $(this).val(data.join('-'))
    });  
};

//opção sem jQuery
const ajeita2 = () => {
  document
  .querySelectorAll('.form-control')
  .forEach(el => el.value = el.value.split('-').reverse().join('-'))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="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();" />
<input type="button" value="testar (sem jQuery)" onclick="ajeita2();" />

Answer 2

$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">

Answer 3

I may be late with my answer...:

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

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

If you can change that on the server, in SQL, you can do:

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

If you can change that 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">';