Skip to main content

How to Check if a Date Input is Empty in JavaScript

Validating user input is a fundamental part of web development. For a date input (<input type="date">), you often need to verify that the user has actually selected a date before proceeding with a form submission or another action. The most reliable way to do this is to check the input element's value property.

This guide will teach you how to correctly check the value of a date input to determine if it's empty, explain the importance of a "falsy" check, and provide a practical example of how to use this validation within an event listener.

The Core Method: Checking the value Property​

An HTML input element of type="date" has a value property that directly reflects its state:

  • If a date has been selected, the value property will be a string in the format YYYY-MM-DD (e.g., "2023-10-27").
  • If no date has been selected, the value property will be an empty string ("").

Because an empty string is a "falsy" value in JavaScript, we can use a simple logical NOT (!) operator to check for emptiness.

Basic Example: A Simple Emptiness Check​

This example checks the initial state of a date input right after the page loads.

<input type="date" id="start-date">

Problem: We need to determine if the start-date input has a value immediately upon script execution.

// Problem: How to check if this input is empty?
const dateInput = document.getElementById('start-date');

Solution: by checking !dateInput.value, we can reliably see that the input is empty.

const dateInput = document.getElementById('start-date');

console.log('Initial value:', dateInput.value); // Output: Initial value: ""

if (!dateInput.value) {
  console.log('✅ The date input is empty.');
} else {
  console.log('⛔️ The date input is NOT empty.');
}

Output:

Initial value: ""
✅ The date input is empty.

Understanding the Falsy Check (!element.value)​

The check if (!dateInput.value) is the most robust way to determine if the input is empty. The logical NOT (!) operator coerces the value to a boolean and then negates it.

In JavaScript, several values are considered "falsy":

  • '' (an empty string)
  • null
  • undefined
  • 0
  • NaN
  • false

Since an empty date input has a value of '', the expression !'' evaluates to true. This check is robust because it would also correctly handle null or undefined if the property were to ever return those values.

Checking if the input is NOT empty is the natural inverse. A non-empty date value (e.g., "2023-10-27") is a "truthy" string.

const dateInput = document.getElementById('start-date');
dateInput.value = '2023-10-27'; // Manually set a value for demonstration

if (dateInput.value) {
  console.log('✅ The date input is NOT empty. Value:', dateInput.value);
} else {
  console.log('⛔️ The date input is empty.');
}

Output:

✅ The date input is NOT empty. Value: 2023-10-27

Practical Example: Validating on a Button Click​

This is a more realistic scenario where the check is performed in response to a user action, like clicking a "Submit" or "Check" button.

<label for="trip-start">Start date:</label>
<input type="date" id="date-picker">
<button id="check-btn">Check</button>

The JavaScript sets up an event listener on the button to check the date input's value whenever the button is clicked.

const btn = document.getElementById('check-btn');
const dateInput = document.getElementById('date-picker');

btn.addEventListener('click', function handleClick() {
  if (!dateInput.value) {
    console.log('⛔️ The date input is empty. Please select a date.');
  } else {
    console.log('✅ A date is selected. Value:', dateInput.value);
  }
});
note

This provides instant feedback to the user based on their interaction with the date picker.

Conclusion​

Checking if a date input is empty is a straightforward process in JavaScript.

  • The element.value property is the key to getting the input's state.
  • Use a falsy check (if (!element.value)) to reliably determine if the input is empty.
  • Use a truthy check (if (element.value)) to determine if the input has a value.

This simple and robust validation pattern is essential for creating interactive and user-friendly forms.

Table of Contents