Jquery/javascript Verify "Month Day, Year" Date Format

JavaScript
1

For my table, I can only accept two type of data formats:

Year Only: 2016
Month Day, Year: January 10, 2016

With the comma. Anything else does not work. Is there an easy way to make sure these formats (and spelling) are followed?

All feedback appreciated.
Ryan

2

How do you want users to input the date (datepicker, text field etc…)?

1 Like
3

It’s a text field in a form my mods use.

Basically, if four digits only (length) I check to make sure a number. If that passes, then all good. If more than 4 characters and not strictly a number, I run the spelling of month against an array of the 12 months, if that passes, I make sure the day number is there, and then confirm the year is behind the comma with a space.

I ended up with a lot of if/else, but ended up working. Was hoping there was more of a few-line option.

Cheers!
Ryan

4

Could you not just attempt to parse whatever is input and work out if it’s a valid date like that?

This is a very quick example to demonstrate the concept:

<p>Enter a valid date:</p>
<input placeholder="yyyy-mm-dd" />
<button>Submit</button>

And:

$("button").on("click", function(){
  var userInput = $("input").val();
  console.log("Entered: " + userInput);
  
  var timestamp = Date.parse(userInput);
  if (isNaN(timestamp)===false){
    console.log(new Date(timestamp));
  } else {
    console.log("Invalid!"); 
  }
});

Demo.

If this is going in the right direction, obviously you could tailor it to suit your exact needs.

1 Like
5

This would do this check with regular expressions, so no ifs (apart from the conditional return):

var isValidDate = function(str) {
    var monthArray = [
            'January',
            'February',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ],
        yearOnly = /^\d{4}$/.test(str),
        dateString = str.match(/^(\w+) \d{1,2}\, \d{4}$/) || false;

    return yearOnly || dateString && monthArray.indexOf(dateString[1]) > -1;
}

The numbers in the curly braces denote how many digits are allowed; also note the capturing parentheses to check the first word against that month array. However, @James_Hibbard’s route is certainly more user-friendly as it is far less restrictive.

2 Likes
6

Might a select dropdown (if not a datepicker) be a better choice for the form element ?

They lose their “ease of use” when they get lengthy, but for a limited number of options they may be easier to use than having a text input and banging around the possible values it might have.

7

Thanks guys.

Yeah, one reason I want to leave it “July 4, 2016” format is that the API was use on the same page will auto-fill the part of the form with that format as well, so they’d have to manually break it down to yyyy-mm-dd.

Cheers
Ryan

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.