Reading an HTML5 date in JavaScript

Question

I have an input field in my project that uses the HTML5 date input type. This is saved to my database in the format YYYY-MM-DD. In another page, I access this date from a Twig and print it in a table. This prints in the format YYYY-MM-DD. So far so good. However, when I try to use an alert box to print the same date, JavaScript parses the date incorrectly to just show the year (and the wrong year at that).

Input field (as part of a bigger "make plan" input form):

<input type="date" id="start" name="startdate" class="form-control" required="required"/>

Output:

<td>{{plan.startdate}}</td> <!-- This prints correctly YYYY-MM-DD -->

<td>
    <script>
        alert({{plan.startdate}});   <!-- This alerts incorrectly YYYY -->                    
    </script>
</td>

I can't really see the correlation between the dates either. 2014-03-27 gives '1984' in the alert box 2014-03-20 gives '1991' in the alert box 2014-04-01 gives '2009' in the alert box

I've tried to parse the date using the JavaScript, but I'm not really sure how to parse an incorrect year.

It's mathetmatics: 2014 minus 3 minus 27 = 1984. JS just calculates the equation. — Bram Vanroy, Mar 25 '14 at 14:17
Well, don't I feel silly now. Thanks - is there any way to force JavaScript to accept it as a date? — CameronD17, Mar 25 '14 at 14:19
Sorry, what I mean is to accept it as a Date object? What I actually want to do is find the number of days between two dates. I've found this question to be helpful (http://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript), but I'm not sure how to get my date into a format that is accepted. — CameronD17, Mar 25 '14 at 14:23
My mistake - I wasn't using quotes in the Date object - sorted now. Thanks guys! — CameronD17, Mar 25 '14 at 14:28

score 1 · Accepted Answer · answered Mar 25 '14 at 14:37

It is being evaluated as an expression instead of a date string. If you put the date in quotation marks then it should be fine. See the following

<td>{{plan.startdate}}</td> <!-- This prints correctly YYYY-MM-DD -->

<td>
    <script>
        alert("{{plan.startdate}}");   <!-- This alerts incorrectly YYYY -->                    
    </script>
</td>

Reading an HTML5 date in JavaScript

1 Answers1