How can we ensure that a date is in the future and formatted as dd/mm/yyyy using Javascript

Question

How can we ensure that a date is in the future and formatted as dd/mm/yyyy using Javascript

I'm having trouble verifying the user input field to check if it is in the future and follows the dd/mm/yyyy format. The code I've written doesn't seem to execute the format validation part, and for some reason, nothing is working on Jsfiddle. However, the "check date in the future" function does work when tested locally.

I'm unsure about the correct approach to tackle this issue.

To illustrate, I've set up a demo on FIDDLE

Below is my complete javascript code. I prefer sticking with pure javascript:

function checkdate(){
    //var sendDate = document.getElementById('send_year').value + '/' + document.getElementById('send_month').value + '/' + document.getElementById('send_day').value;
    var sendDate = document.getElementById('returning_date').value;

    sendDate = new Date(Date.parse(sendDate.replace(/-/g,' ')))
    today = new Date();
    today.setHours(0,0,0,0)
    
    if (sendDate < today) {
        //alert('The  date can\'t be in the past. Please pick another date.');
        document.getElementById('error8').innerHTML = 'The  date can\'t be in the past. Please pick another date.';
        return false;
    } else {
       document.getElementById('error8').innerHTML = '';
    }

    if(sendDate.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) {
      alert('works out');
    }
}

Could someone offer guidance on this problem?

Thank you in advance.

javascript date

Answer 1

Answer №1

An issue arises when attempting to execute sendDate.match, as sendDate has been transformed into a Date object and therefore lacks a match method.

It is advisable to perform your regular expression check prior to converting it to a Date. In validation processes, it is common practice to ensure that the input adheres to a specific format before proceeding with additional validations such as range validation.

Answer 2

An issue arises when attempting to execute sendDate.match, as sendDate has been transformed into a Date object and therefore lacks a match method.

It is advisable to perform your regular expression check prior to converting it to a Date. In validation processes, it is common practice to ensure that the input adheres to a specific format before proceeding with additional validations such as range validation.

Answer 3

Answer №2

It is important to manually parse date strings instead of relying on the Date constructor or Date.parse for parsing (as they both function in the same way).

Validating and parsing a date string can be done by simply parsing the string and checking if it results in a valid date:

/* Parsing a string in d/m/y format. The separator can be any non-digit character.
** Ensures dates are not converted to the 20th century when dealing with two digit years
**
** @param {string} s - The date string to parse
** @returns {Date}
*/
function parseDMY(s) {
  var b = s.split(/\D/);
  var d = new Date();
  d.setHours(0,0,0,0);
  d.setFullYear(b[2], --b[1], b[0]);
  return d && d.getMonth() == b[1]? d : new Date(NaN);
}

// Testing a valid date
document.write(parseDMY('23/01/2016'));
// Testing an invalid date
document.write('<br>' + parseDMY('35/12/2016'));

Keep in mind that a date like 1/5/16 will be treated as 1 May, 0016. If you prefer day and month values to have two digits along with a four-digit year, you can add the following validation test at the end:

/^\d\d\D\d\d\D\d{4}$/.test(s)

However, enforcing two digits for day and month may not be practical since most people write dates without leading zeros such as "1/8/2016" instead of "01/08/2016".

Answer 4

It is important to manually parse date strings instead of relying on the Date constructor or Date.parse for parsing (as they both function in the same way).

Validating and parsing a date string can be done by simply parsing the string and checking if it results in a valid date:

/* Parsing a string in d/m/y format. The separator can be any non-digit character.
** Ensures dates are not converted to the 20th century when dealing with two digit years
**
** @param {string} s - The date string to parse
** @returns {Date}
*/
function parseDMY(s) {
  var b = s.split(/\D/);
  var d = new Date();
  d.setHours(0,0,0,0);
  d.setFullYear(b[2], --b[1], b[0]);
  return d && d.getMonth() == b[1]? d : new Date(NaN);
}

// Testing a valid date
document.write(parseDMY('23/01/2016'));
// Testing an invalid date
document.write('<br>' + parseDMY('35/12/2016'));

Keep in mind that a date like 1/5/16 will be treated as 1 May, 0016. If you prefer day and month values to have two digits along with a four-digit year, you can add the following validation test at the end:

/^\d\d\D\d\d\D\d{4}$/.test(s)

However, enforcing two digits for day and month may not be practical since most people write dates without leading zeros such as "1/8/2016" instead of "01/08/2016".

Answer 5

Answer №3

To start, make sure to enclose the function within the <head> tags (click on the gear icon in the js tab) to ensure that the function can be located.

Your primary issue lies in the use of European date formatting, which will result in an "Invalid Date" error when attempting to create a date. Check out this helpful question for guidance on converting to USA-style and adapting it for compatibility with the Date object (see the reference page for more information on various applications).

Answer 6

To start, make sure to enclose the function within the <head> tags (click on the gear icon in the js tab) to ensure that the function can be located.

Your primary issue lies in the use of European date formatting, which will result in an "Invalid Date" error when attempting to create a date. Check out this helpful question for guidance on converting to USA-style and adapting it for compatibility with the Date object (see the reference page for more information on various applications).

Answer 7

Answer №4

Here is what I suggest:

Date.prototype.fromString = function(str) {
  var match = str.match(/([0-9]{2})(-|\/)([0-9]{2})(-|\/)([0-9]{4})/);
  if (match == null) {
    return null;
  }
  for (var index = 0; index < match.length; index++) {
    if (typeof(match[index]) === 'undefined') {
      return null;
    };
  };
  var year = parseInt(match[5]);
  var month = parseInt(match[1]) - 1;
  var day = parseInt(match[3]);
  if (month == 0 || day == 0) {
    return null;
  }
  return new Date(year, month, day);
}

function ensureValidDate(event, object, errorSelector){
  var inputDate = object.value;

  inputDate = (new Date()).fromString(inputDate);
  if (inputDate == null) {
    if (event.type == 'blur') {
      object.value = '';
    }
    return;
  }
  today = new Date();
  today.setHours(0,0,0,0)
  if (inputDate < today) {
    document.getElementById(errorSelector).innerHTML = 'The date cannot be in the past. Please choose another date.';
    return false;
  }
  else
  {
    document.getElementById(errorSelector).innerHTML = '';
  }
}        
$(function () {
});

<input onblur="ensureValideDate(event, this, 'error8');" onKeyUp="ensureValideDate(event, this, 'error8');" type='text' name="text1" placeholder='dd/mm/yyyy' id='returning_date'>
<span id='error8' style='color:red;'>format</span> <br><Br>

Answer 8

Here is what I suggest:

Date.prototype.fromString = function(str) {
  var match = str.match(/([0-9]{2})(-|\/)([0-9]{2})(-|\/)([0-9]{4})/);
  if (match == null) {
    return null;
  }
  for (var index = 0; index < match.length; index++) {
    if (typeof(match[index]) === 'undefined') {
      return null;
    };
  };
  var year = parseInt(match[5]);
  var month = parseInt(match[1]) - 1;
  var day = parseInt(match[3]);
  if (month == 0 || day == 0) {
    return null;
  }
  return new Date(year, month, day);
}

function ensureValidDate(event, object, errorSelector){
  var inputDate = object.value;

  inputDate = (new Date()).fromString(inputDate);
  if (inputDate == null) {
    if (event.type == 'blur') {
      object.value = '';
    }
    return;
  }
  today = new Date();
  today.setHours(0,0,0,0)
  if (inputDate < today) {
    document.getElementById(errorSelector).innerHTML = 'The date cannot be in the past. Please choose another date.';
    return false;
  }
  else
  {
    document.getElementById(errorSelector).innerHTML = '';
  }
}        
$(function () {
});

<input onblur="ensureValideDate(event, this, 'error8');" onKeyUp="ensureValideDate(event, this, 'error8');" type='text' name="text1" placeholder='dd/mm/yyyy' id='returning_date'>
<span id='error8' style='color:red;'>format</span> <br><Br>

How can we ensure that a date is in the future and formatted as dd/mm/yyyy using Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using Node.js for a game loop provides a more accurate alternative to setInterval

Determining the depth difference of nodes between two elements using JQuery

Troubleshooting AngularJS ng-route and Three.js crashes and glitches: A comprehensive guide

Using Vue 3 to have the ability to include multiple composable instances in a single script tag

What is the correct way to transform an Error object to a string in Node.js?

Utilize Next.js to send an image to an email by leveraging the renderToString function on the API routes

onclick doesn't run the function

Function on NextJS site failing to adhere to the two-second timeout limit

Is it possible to have a variable either inside quotation marks or NULL when checking for case within a string in JavaScript

Sliding in images with JQuery

The button will be disabled if any cells in the schedule are left unchecked

EJS files do not show variables passed from Node

Searching for date disparities in SQL - Oracle

Using Angular to automatically update the user interface by reflecting changes made in the child component back to the parent component

Passing JavaScript attribute events to alternative handler or type

Preventing duplicate submissions ensures that submissions are sent only once

Mastering the use of node cluster mode in conjunction with agenda cronjobs

What are the common reasons for jQuery Image Slider malfunctioning?

Exploring the intricacies of extracting nested JSON data in TypeScript

issue with angular and typescript