input[type=date] format value dynamically generated in 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>

I saw that, but either way works for getting the value, but the code didn't get executed, when I put an alert in it, it didn't pop. Thanks — culebrin
– culebrin, Commented Aug 9, 2015 at 14:18
You can test <input> supports type="date" using 'valueAsDate' in HTMLInputElement.prototype — Paul S.
– Paul S., Commented Aug 9, 2015 at 14:26
yes, it is a typo... the actual input has the right format. thanks — culebrin
– culebrin, Commented Aug 9, 2015 at 16:39

Laky · Accepted Answer · 2015-08-09 14:56:50Z

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 :)

edited Aug 9, 2015 at 14:56

answered Aug 9, 2015 at 14:33

Laky

6323 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

culebrin Over a year ago

Hi Laky, I think you hit the right spot. I was trouble by the fact the input has already values (and some others, not), and the other answers did not count on that. But the problem now is that I have to do it only in browsers that NOT support html5, I think the comment from Paul S. would do the trick, but I have to try it first.

Laky Over a year ago

Hi @culebrin I think you can check this link for html5 support. diveintohtml5.info/detect.html#input-types

Mouser · Accepted Answer · 2015-08-09 14:30:07Z

0

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

edited Aug 9, 2015 at 14:30

answered Aug 9, 2015 at 14:11

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

2 Comments

culebrin Over a year ago

this code gets me an error: "SyntaxError: missing : after property id". I'm guessing the $('input[type="date"]').each line syntax is not right

Mouser Over a year ago

Nope your original function had a bug. function() missing inside the each.

Collectives™ on Stack Overflow

input[type=date] format value dynamically generated in php

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related