0

Just to give some background on what I am trying to do:

  • I am in the US on a US machine
  • I am using chrome
  • I change my machine settings in control panel -> region and language to "English (United Kingdom)"
  • under Chrome -> settings -> Language and Input settings, I removed "English(US)" and added "English (United Kingdom)"

I have an html page with one input box, and I want to validate that the text in the input box is a valid date based on the user client locale. So in the US user can enter "11/20/2013", and a user in UK can enter "20/11/2013".

<input type="text" id="dt" />
<input type="button" id="validate" value="validate" />

<script>
$(document).ready(function() {
    $('#validate').click( function() {
        if (isNaN(Date.parse($('#dt').val())) == true)
            alert('date is invalid!');
        else
            alert('valid date');
    });
});
</script>

See jsFiddle example

It seems that Date.parse() is always expecting US format (DD/MM/YYYY). Any idea how I can get a validation based on the client locale?

malkassem
  • 1,937
  • 1
  • 20
  • 39
  • I think this answer will help you: http://stackoverflow.com/a/2587398/693275 – Rob M. Nov 22 '13 at 21:15
  • 1
    You should just tell the user what format the date should be in, as there are many variations, and you'll have quite the task trying to validate all the date variations, and it's confusing for users when it doesn't work, and they can't easily find the date format. – adeneo Nov 22 '13 at 21:15
  • adeneo I see what you are saying, but I dont want to force the user to enter a format from a different region. why should UK user enter in US format, and why should US user enter in UK format? – malkassem Nov 22 '13 at 21:19
  • Being a user of quite a few websites myself, I don't really care if the date or the month comes first, as long as I know what format the date should be in. If I had to guess the date format until I got it right, I would probably just leave and find another site, there are billions of them. – adeneo Nov 22 '13 at 21:31

1 Answers1

1

I would not trust that the user will have the correct locale settings on the system or in the browser. Nor would I trust that the browser will properly honor those settings anyway. Sometimes it will work, and sometimes it wont. Date parsing is highly implementation specific.

Instead, consider using a library like moment.js. Somewhere in your application, you can ask the user for their language and locale. You can then use that to know how to properly parse the local dates.

For example:

moment.lang("en-us");
console.log(moment("01/02/2013","L").format("LL"));  // "January 2 2013"

moment.lang("en-gb");
console.log(moment("01/02/2013","L").format("LL"));  // "1 February 2013"

Regardless, you would probably do best to show the user their format somewhere near the field, and/or use a datepicker control.

Matt Johnson-Pint
  • 230,703
  • 74
  • 448
  • 575
  • This is getting me really close to where I want to be. My only question is now that is why is there a function in JavaScript "toLocaleDateString()" and not a function to parse a date. – malkassem Nov 24 '13 at 13:40
  • It *does* have that, in the `new Date([string])` constructor, or the `Date.parse([string])` function which does the same thing. The problem is that the different web browsers all implement it slightly differently. The same applies with `toLocalDateString()`, you'll find lots of variation in output between different browsers, and even between different versions of the same browser. If you don't care about consistency, then you can use these. But most applications require more than that, which which is why libraries like [moment.js](http://momentjs.com) exist. – Matt Johnson-Pint Nov 24 '13 at 18:23
  • I really appreciate your responses and trying to help me with this issue. new Date([string]) always returns "Invalid Date" whenever I try to parse any date that is not in the US format regardless of what settings I have on my chrome browser. I did not try any other browser, so it maybe just a chrome issue. I will give moment.js a try. – malkassem Nov 25 '13 at 16:12