Jquery datepicker restrict dates in second date field based on selected date in first date field

No votes yet.
Please wait...

hey guys,
There are various situations where we use jquery Datepicker to input date in our Html Form.Sometimes it can be a scenario where we need to input date for the fields start and end date (let say we are submitting data for a event which have start and end date).
Now how to validate the second date field according to the input of first ????…. as because the end date is always going to be bigger than the start date .

So here we are with a simple JQurery Script to solve this kind of problem in our tutorial
Jquery datepicker restrict dates in second date field based on selected date in first date field

So here the code is
We have to create a simple index.php file with some Jquery and css files included in it

1
2
3
4
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

index.php

In this file we will use two input fields for start and end date with specific ids
and a javascript with will restrict second input field to have more date than start date field

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jquery datepicker restrict dates in second date field based on selected date in first date field</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
$(document).ready(function () {

    $("#start_date").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#start_date').datepicker('getDate');
            date2.setDate(date2.getDate()+ 1);
            $('#end_date').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#end_date').datepicker('option', 'minDate', date2);
        }
    });
    $('#end_date').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {
            var dt1 = $('#start_date').datepicker('getDate');
            var dt2 = $('#end_date').datepicker('getDate');
            //check to prevent a user from entering a date below date of dt1
            if (dt2 <= dt1) {
                var minDate = $('#end_date').datepicker('option', 'minDate');
                $('#end_date').datepicker('setDate', minDate);
            }
        }
    });
});
</script>
</head>
<body><div align="center"><h4>Jquery datepicker restrict dates in second date field based on selected date in first date field</h4></div>
 <div align="center">
<p>Start Date: <input type="text" id="start_date" value="YYYY-MM-DD" readonly="readonly"></p>
<p>End Date: <input type="text" id="end_date" value"YYYY-MM-DD" readonly="readonly"></p>
 </div>
 <div align="center"><h4>Demo By: PHP Hurdles</h4></div>
</body>
</html>

So this is how you can simply restrict the second date field based on the input of first date field.
Important note: to prevent users from manually typing a date you could set the inputs to readonly.

Hope this tutorial will help you guys
For Source CodeĀ Download Here
stay connected for more tutorials
Cheers
Because Hurdles aren’t hurdles

2 Comments

  1. haemtza said:

    Just need to disable completely previous date after select a date in datepicker If you have time.

    No votes yet.
    Please wait...
    May 31, 2017
    Reply
    • Saurabh Dubey said:

      Yes, We will be glad to help you Please send us your code at saurabh@netjunglemedia.com.

      No votes yet.
      Please wait...
      May 31, 2017
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *