value of input type="date" getting displayed in reverse direction

Question

$(".dateTest").click(function(e){
    e.preventDefault();
    alert("The value of this field is currently set to: " + $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
    <div>
        <label>HTML-5: </label>
        <input  value="2012-10-01" type="date" id="dateFieldHtml5" class='dateTest'/>
    </div>
    <div>
        <label>HTML-4: </label>
        <input  value="10/01/2012" id="dateFieldHtml4"  class='dateTest'/>
    </div>
</form>

I'm trying to write regular expression for input type="date" in form. The format which is getting displayed in frontend is DD-MM-YYYY but when I'm trying to print the selected date value before running my regular expression on it, its displaying in format YYYY-MM-DD. Because of this my regular expression is failing. See snippet

Image of the displayed and selected date value.

How can I make sure that the selected date gets displayed in same format.

The full content of your question must be **in** your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a [mcve] **in** the question, ideally using Stack Snippets (the `<>` toolbar button) to make it runnable. More: [*How do I ask a good question?*](/help/how-to-ask) — T.J. Crowder, Oct 07 '16 at 16:25
@T.J.Crowder kk. I'll do that. Many a times I see people posting fiddle link so I just did that. But I got your point. — Cyclotron3x3, Oct 07 '16 at 16:27
Fiddles are only *adjuncts* to questions, not substitutes for having all necessary code on site. And nowadays, for 98% of questions, they're obsolete -- use Stack Snippets instead. :-) — T.J. Crowder, Oct 07 '16 at 16:30
Is this a duplicate of http://stackoverflow.com/questions/6978631/how-to-set-date-format-in-html-date-input-tag? — evolutionxbox, Oct 07 '16 at 16:38
Looks like it follows ISO 8601 standard for the return value of the value attribute. Couldn't you just add `|\d{4}\-\d{2}-\d{2}` to your regex check? — Joseph Marikle, Oct 07 '16 at 16:40
No, the point is this is misleading as anyone who sees the frontend will think that the required regular exp should be dd-mm-yyyy. I'm writing a framework and this is clearly ambiguous for end users who will be later on using the framework — Cyclotron3x3, Oct 07 '16 at 16:42
You've got an input field that will only return valid date strings. What's your regex for? If you've got a date, treat it like a date and use `Date()`. That's probably what the guys deciding on HTML5 were thinking... — LinuxDisciple, Oct 07 '16 at 16:47
I agree. But it still didn't justify why inverted result. Why not display what is getting displayed in frontend — Cyclotron3x3, Oct 07 '16 at 16:50
@Cyclotron3x3 "Why not display what is getting displayed in frontend". Because that's kind of the intent of these newer inputs. It allows the browser client to display it however they want (to conform to the OS GUI and regional differences) while standardizing the ultimate value. Desired technical value and a value formatted for display are not always the same. The Chrome devs feel that `MM/DD/YYYY` for USA browsers is more user friendly than displaying the standard `YYYY-MM-DD`. — Joseph Marikle, Oct 07 '16 at 17:04
As per my understanding, I cannot modify the frontend of date type in html5. That was my first choice to update the frontend — Cyclotron3x3, Oct 07 '16 at 17:07

Vilas Kumkar · Accepted Answer · 2016-10-07T17:21:29.057

1

convert your value to date format using "new Date()"

fiddle

var dateString = new Date($(this).val());

edited Oct 07 '16 at 17:21

answered Oct 07 '16 at 16:38

Vilas Kumkar

1,390
9
18

Not correct. Displaying datetime and that too in different format than expected. – Cyclotron3x3 Oct 07 '16 at 16:53
1

@Cyclotron3x3 Please take a look at updated one. http://jsfiddle.net/HudMe/788/ I have updated answer too – Vilas Kumkar Oct 07 '16 at 16:55
thanks for the workaround. But I was more interested in getting to know why is this behavior. – Cyclotron3x3 Oct 07 '16 at 18:48
Not a good idea. The value of a Date input is based on the local time zone, but `new Date('yyyy-mm-dd')` will be treated as UTC, so one day earlier for users west of Greenwich. – RobG Oct 08 '16 at 03:47

value of input type="date" getting displayed in reverse direction

1 Answers1