输入[type = date]格式值在php中动态生成

Question

I have an input with a value dynamically generated

<input name="etd" type"date" value="<?php echo $row[0]; ?>">

In order to support html5 date input, a date format yyyy-mm-dd is assigned to that value, and mm/dd/yyyy format is shown in html5 browsers correctly.

The problem arises on non html5 browsers where the value assigned is shown as text directly (format yyyy-mm-dd ). My attempt to transform this value to format mm/dd/yyyy with jQuery is the following:

<script>
    $('input[type="date"]').each({  

        var now = new Date($(this).attr('value'));
        var day = ("0" + now.getDate()).slice(-2);
        var month = ("0" + (now.getMonth() + 1)).slice(-2);     
        var today = now.getFullYear()+"-"+(month)+"-"+(day);        
        $(this).val(today);

    }); 
</script>

but is not working, I'm new to jQuery , so I think, it's something with it.

UPDATE:

I'm using this code to put a date picker on non html5 capable browsers, this not solves my problem with the dates retrieved from database, but the if clause somehow can difference html5 browsers. I thinking maybe I can use that condition to filter the jQuery code (that code which i'm looking for)

<script>
    $(function() {
        if (!Modernizr.inputtypes['date']) {
            $('input[type=date]').datepicker({
                dateFormat: 'mm/dd/yy'
            });
        }
    });
</script>

Answer 1

Try it like; Here's the Fiddle link .

Html:

<input name="etd" type="date" value="1919-03-12">

Js:

$( document ).ready(function() {

    $('input[type=date]').each(function (this){  

       var datestring = $(this).val(); 
       var dateobj    = new Date(datestring);

       var formattedstring = dateobj.getUTCDate()+"/"+dateobj.getUTCMonth()+"/"+dateobj.getUTCFullYear();

       $(this).val(formattedstring);

    });

});

Also please note that when you set the date and month values, for single values there should be a zero in front of it. For example month 7 should be 07.

Btw, in your code you are missing the = sign in type"date" please correct that too :)

Answer 2

In JavaScript you can actually use split on the string. Much easier than passing it through the Date object.

$('input[type="date"]').each(function(){  

    var now = $(this).attr('value').split("-");
    var today = now[1]+"/"+now[2]+"/"+now[0]; //mm/dd/yyyy        
    $(this).val(today);

}); 

split will hack a string into array pieces using the delimiter. A dash in this case. The following array is created:

['yyyy', 'mm', 'dd'];

Now you can rearrange those array pieces into the desired string.

A demo:

 $('input[type="date"]').each(function(){ var now = $(this).attr('value').split("-"); var today = now[1]+"/"+now[2]+"/"+now[0]; //mm/dd/yyyy $(this).val(today); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="date" value="2015-08-09" />