rakesh kumar

Posted on Jan 15 • Updated on Jan 19

List out the checklist of different kind of date valiadtion for form handling

Check if the date is not empty:
Check if the date is in a valid format
Check if the date is a valid date
Check for future or past dates
Check for leap years
Check for specific day of the week
Different kind of date function used for validation

Check if the date is not empty:
get text content of input type by id
if it is empty then show msg Please enter a date

<input type="text" id="datepicker" />
<button onclick="validateDate()">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  function validateDate() {
    var dateValue = $("#datepicker").val();

    if (dateValue === "") {
      alert("Please enter a date.");
    } else {
      // Continue with other validations
    }
  }
</script>

Expected Output: If the date is empty, an alert saying "Please enter a date." will be displayed.

Check if the date is in a valid format:
get text content of input type by id
using regx and test function check valid date format

<input type="text" id="datepicker" />
<button onclick="validateDate()">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  function validateDate() {
    var dateValue = $("#datepicker").val();

    if (!/^\d{2}\/\d{2}\/\d{4}$/.test(dateValue)) {
      alert("Please enter a valid date format (MM/DD/YYYY).");
    } else {
      // Continue with other validations
    }
  }
</script>

Expected Output: If the date format is invalid, an alert saying "Please enter a valid date format (MM/DD/YYYY)." will be displayed.

Check if the date is a valid date:

<input type="text" id="datepicker" />
<button onclick="validateDate()">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  function validateDate() {
    var dateValue = $("#datepicker").val();
    var isValidDate = !isNaN(Date.parse(dateValue));

    if (!isValidDate) {
      alert("Please enter a valid date.");
    } else {
      // Continue with other validations
    }
  }
</script>

Expected Output: If the date is not a valid date, an alert saying "Please enter a valid date." will be displayed.

Check if the date falls within a specified range:

get text content of input type by id put in selected date
define mindate,maxdate by hardcode
then apply condition of less than ,greater than and or operator to check date range

<input type="text" id="datepicker" />
<button onclick="validateDate()">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  function validateDate() {
    var dateValue = $("#datepicker").val();
    var selectedDate = new Date(dateValue);
    var minDate = new Date("2022-01-01");
    var maxDate = new Date("2024-12-31");

    if (selectedDate < minDate || selectedDate > maxDate) {
      alert("Please enter a date within the range (01/01/2022 - 12/31/2024).");
    } else {
      alert("Date is valid!");
      // Continue with other actions
    }
  }
</script>

Expected Output: If the date is outside the specified range, an alert saying "Please enter a date within the range (01/01/2022 - 12/31/2024)." will be displayed.

Check for future or past dates:

get text content of input type by id put in selected date
define current date by hardcode
then apply condition of less than ,greater than betweenselected date and current date

<input type="text" id="datepicker" />
<button onclick="validateDate()">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  function validateDate() {
    var dateValue = $("#datepicker").val();
    var selectedDate = new Date(dateValue);
    var currentDate = new Date();

    if (selectedDate > currentDate) {
      alert("Please enter a date in the past.");
    } else if (selectedDate < currentDate) {
      // Date is in the past, continue with other validations
    } else {
      alert("Please enter a date other than today.");
    }
  }
</script>

Expected Output: If the date is in the future, an alert saying "Please enter a date in the past." will be displayed. If the date is today, an alert saying "Please enter a date other than today." will be displayed.

Check for leap years:

<input type="text" id="datepicker" />
<button onclick="validateDate()">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  function validateDate() {
    var dateValue = $("#datepicker").val();
    var selectedDate = new Date(dateValue);
    var year = selectedDate.getFullYear();

    if ((year % 4 !== 0) || (year % 100 === 0 && year % 400 !== 0)) {
      alert("Please enter a date in a leap year.");
    } else {
      // Continue with other validations
    }
  }
</script>

Expected Output: If the year is not a leap year, an alert saying "Please enter a date in a leap year." will be displayed.

Check for specific day of the week:

get text content of input type by id put in selected date
calculate dayof week of selecteddate
apply condition dayofweek is equal to zero,one based on decide date

<input type="text" id="datepicker" />
<button onclick="validateDate()">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  function validateDate() {
    var dateValue = $("#datepicker").val();
    var selectedDate = new Date(dateValue);
    var dayOfWeek = selectedDate.getDay();

    if (dayOfWeek === 0 || dayOfWeek === 6) {
      alert("Please enter a date that is not a weekend.");
    } else {
      // Continue with other validations
    }
  }
</script>

Expected Output: If the date is a Saturday or Sunday (day 0 or 6), an alert saying "Please enter a date that is not a weekend." will be displayed.

Different kind of date function used for validation

isBefore
isAfter
isBetween
add
subtract
startOf
endOf
diff
format:
isValid
isSame:
same year,same month,same day,same hour,same week,same minute,same quarter

Below is a checklist of some commonly used functions in date libraries like Moment.js, which are similar to isSame and can be used for various date-related comparisons and operations:

isBefore:
Checks if a date is before another date.

var date1 = moment('2022-01-15');
var date2 = moment('2022-12-20');

var result = date1.isBefore(date2);
console.log(result); // Output: true

isAfter:
Checks if a date is after another date.

var date1 = moment('2022-01-15');
var date2 = moment('2022-01-10');

var result = date1.isAfter(date2);
console.log(result); // Output: true

isBetween:
Checks if a date is between two other dates.

var date = moment('2022-03-15');
var startDate = moment('2022-01-01');
var endDate = moment('2022-06-30');

var result = date.isBetween(startDate, endDate);
console.log(result); // Output: true

add:
Adds a specified amount of time to a date.

var date = moment('2022-01-15');
date.add(7, 'days');

console.log(date.format('YYYY-MM-DD')); // Output: 2022-01-22

subtract:
Subtracts a specified amount of time from a date.

var date = moment('2022-01-15');
date.subtract(2, 'months');

console.log(date.format('YYYY-MM-DD')); // Output: 2021-11-15

startOf:
Gets the start of a specified unit of time.

var date = moment('2022-01-15');
var startOfMonth = date.startOf('month');

console.log(startOfMonth.format('YYYY-MM-DD')); // Output: 2022-01-01

endOf:
Gets the end of a specified unit of time.

var date = moment('2022-01-15');
var endOfMonth = date.endOf('month');

console.log(endOfMonth.format('YYYY-MM-DD')); // Output: 2022-01-31

diff:
Calculates the difference between two dates.

var date1 = moment('2022-01-15');
var date2 = moment('2022-01-10');

var diffInDays = date1.diff(date2, 'days');
console.log(diffInDays); // Output: 5

format:
Formats a date according to a specified format.


var date = moment('2022-01-15');
var formattedDate = date.format('YYYY-MM-DD');

console.log(formattedDate); // Output: 2022-01-15

isValid:

Checks if a date is valid.


var validDate = moment('2022-01-15');
var invalidDate = moment('invalid-date-string');

console.log(validDate.isValid()); // Output: true
console.log(invalidDate.isValid()); // Output: false

These functions provide various capabilities for working with dates, including comparisons, arithmetic operations, and formatting. Always refer to the documentation of the specific date library you are using for detailed information on each function.

isSame:

Check if two dates are the same year:

var date1 = moment('2022-01-15');
var date2 = moment('2022-12-20');

var result = date1.isSame(date2, 'year');
console.log(result); // Output: true

Check if two dates are the same month:

var date1 = moment('2022-01-15');
var date2 = moment('2022-01-20');

var result = date1.isSame(date2, 'month');
console.log(result); // Output: true

Check if two dates are the same day:

var date1 = moment('2022-01-15');
var date2 = moment('2022-01-15');

var result = date1.isSame(date2, 'day');
console.log(result); // Output: true

Check if two dates are the same hour:

var date1 = moment('2022-01-15T12:30:00');
var date2 = moment('2022-01-15T12:45:00');

var result = date1.isSame(date2, 'hour');
console.log(result); // Output: true

Check if two dates are the same minute:

var date1 = moment('2022-01-15T12:30:00');
var date2 = moment('2022-01-15T12:30:59');

var result = date1.isSame(date2, 'minute');
console.log(result); // Output: true

Check if two dates are the same second:

var date1 = moment('2022-01-15T12:30:45');
var date2 = moment('2022-01-15T12:30:45');

var result = date1.isSame(date2, 'second');
console.log(result); // Output: true

Check if two dates are the same week:

var date1 = moment('2022-01-15');
var date2 = moment('2022-01-19');

var result = date1.isSame(date2, 'week');
console.log(result); // Output: true

Check if two dates are the same quarter:

var date1 = moment('2022-03-15');
var date2 = moment('2022-06-25');

var result = date1.isSame(date2, 'quarter');
console.log(result); // Output: true