Javascript date validator for multiple date patterns

Question

With help from stackoverflow I made a .js file with two methods that check if the date entered is valid. It is working fine, but only if the date is entered with dashes - 12/12/2019. What approach can I take in my isValidDate method to make it work with multiple date patterns like - 12.12.2020 12-12-2020 etc. The only idea I have is to check somehow first what is the pattern and then create a separate case to split the date string by different characters, but it will look pretty ugly.

function isValidDate(dateString) {
var validDate = true;

// First check for the pattern
if (!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString)) {
    return false;
}

// Parse the date parts to integers
var parts = dateString.split("/");
var day = parseInt(parts[0], 10);
var month = parseInt(parts[1], 10);
var year = parseInt(parts[2], 10);

if(isNaN(day)  || isNaN(month) || isNaN(year)){
    return false;
}

// Check the ranges of month and year
if (year < 1000 || year > 3000 || month < 1 || month > 12) {
    return false;
}

var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// Adjust for leap years
if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
    monthLength[1] = 29;
}

// Check the range of the day
if (!(day > 0 && day <= monthLength[month - 1])) {
    return false;
}

    return true;

};


 /**
 * Function which executes each time the input loses focus (onblur)
 */
    function validateDate() {
    // Get a reference to the container
    var container = document.querySelector('.date');

    // Clear stale error/success messages
    container.className = container.className.replace('success', '');
    container.className = container.className.replace('error', '');

    // Get current value of input
    var dateString = document.getElementById("Start-date").value;

    // Test if the string is a valid date
    var isValid = isValidDate(dateString);

    // Update classess of container to show success/error
    if (!isValid) {
    container.className += ' error';
    } else {
    container.className += ' success';
    }
    }

I am calling the validateDate() function first

A single regular expression can allow for multiple patterns to be used. — Scott Marcus, Apr 30 '18 at 13:54
Maybe this https://stackoverflow.com/questions/7445328/check-if-a-string-is-a-date-value could help — apomene, Apr 30 '18 at 13:54
@ScottMarcus thanks - alright I will do my work and try figure out how to do the regular expression, because I don't have any idea about regex, but how about the split by "/" part ? — Georgi Michev, Apr 30 '18 at 13:56
@GeorgeBailey I am taking the date input as a string in a text field. I know there is a input type=date which is maybe more convenient, but it is my first javascript code and I want to practice it — Georgi Michev, Apr 30 '18 at 13:58
I wouldn't do any string parsing. This is a job for regular expressions. — Scott Marcus, Apr 30 '18 at 14:10

score 1 · Accepted Answer · answered Apr 30 '18 at 13:56

1

Please note I have not tested the regular expressions this is just an example of how to attack the probelm

// First check for the pattern var = dateChar

if (!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString)) {
    dateChar = '/'; 
}

if (!/^\d{1,2}\-\d{1,2}\-\d{4}$/.test(dateString)) {
    dateChar = '-'; 
}


if (!dateChar) {
  return false; 
}


var parts = dateString.split(dateChar);

....

answered Apr 30 '18 at 13:56

Jacques Ramsden

801
5
20

Does this help at least? – Jacques Ramsden Apr 30 '18 at 13:58
looks awesome I will give it a try ! – Georgi Michev Apr 30 '18 at 14:00

Javascript date validator for multiple date patterns

1 Answers1