Rails Ruby JS jQuery DatePicker

jQuery DatePicker: How to Disable Previous Dates

Introduction: The jQuery DatePicker widget is a versatile tool for selecting dates in web applications. One common requirement is to prevent users from selecting dates that are earlier than a certain date. In this tutorial, we’ll explore how to achieve this using jQuery DatePicker by creating a date barrier.

Creating a Date Barrier

To disable the selection of dates earlier than a specific date, you’ll need to create a JavaScript Date object representing that barrier date. Here’s how you can do it:

// Create a Date Object for the Barrier Date
var barrierDate = new Date("2014/02/12");

In this example, we’ve set barrierDate to February 12, 2014. You can customize this date to match your specific requirements.

Implementing Datepicker with Minimum Date

Now that we have our barrierDate defined, we can apply the DatePicker to an input field and set the minimum date allowed for selection. Here’s the code:

// Apply DatePicker to a Field and Set the Minimum Date
$('#idOfDateField').datepicker({
  minDate: barrierDate
});

In the above code: - #idOfDateField should be replaced with the actual ID of the HTML input field where you want to enable date selection. - minDate is set to the barrierDate, which ensures that dates earlier than barrierDate cannot be selected in the DatePicker.

Complete Example

Let’s put it all together in a complete example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery DatePicker: Disable Previous Dates</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      // Create a Date Object for the Barrier Date
      var barrierDate = new Date("2014/02/12");

      // Apply DatePicker to a Field and Set the Minimum Date
      $('#datePicker').datepicker({
        minDate: barrierDate
      });
    });
  </script>
</head>
<body>
  <label for="datePicker">Select a Date:</label>
  <input type="text" id="datePicker">
</body>
</html>

Summary: In this tutorial, we’ve learned how to disable the selection of previous dates in a jQuery DatePicker by setting a minimum date using a barrier date. By creating a Date object representing the barrier date and configuring the DatePicker with minDate, you can ensure that users can only select dates that are later than or equal to the specified date.

jQuery DatePicker

Now you can enhance the user experience of your web application by restricting date selections to a specific range, ensuring data accuracy and relevance.