Setting minDate to prevent from choosing enddate before start date

Question

I have a start date and end date for me to choose the date. I am using jQuery datepicker library.

This is how my function looks like for now:

$(function() {

        $(".txtEndDate").datepicker({
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: '../../../images/calendar.png',
            buttonImageOnly: true,
            title:'Click to open calendar',
            alt:'Click to open calendar'
        });


    });




    $(function() {

        $(".txtStartDate").datepicker({
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: '../../../images/calendar.png',
            buttonImageOnly: true,

            title:'Click to open calendar',
            alt:'Click to open calendar',

            onSelect: function() {
                var start = $(this).datepicker("getDate");
                start.setDate(start.getDate() + 7);
                $(".txtEndDate").datepicker("setDate", start);
            }

        });



    });

It works but I want to make it when users are not allowed to choose a date before today because it doesn't make sense anyway.For example,choosing 2018-01-01 is not supposed to be valid. You get the idea.

Found a documentation that suggests using minDate to solve this.It says:

//initialize the datepicker
$( ".selector" ).datepicker({
  minDate: new Date(2007, 1 - 1, 1)
});

//get or set mindate option
// Getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );

// Setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

Seeing as I am confused on what the fields represent, is there a way I could prevent people from selecting any dates before today?

I tried this solution: jQuery Date Picker - disable past dates

But it doesn't disable it and still allows me to choose.

score 1 · Accepted Answer · edited Apr 23 '19 at 07:51

1

You can disable past dates using minDate property of datepicker plugin, as below.

$(".txtEndDate").datepicker({
            minDate: new Date(),  // Add this to diсable past date
            changeMonth: true,
            changeYear: true,
            showOn: 'button',
            buttonImage: '../../../images/calendar.png',
            buttonImageOnly: true,
            title:'Click to open calendar',
            alt:'Click to open calendar'
        });

edited Apr 23 '19 at 07:51

Daut

2,537
1
19
32

answered Apr 23 '19 at 04:32

Abhishek

972
3
12
24

new Date(), will take default format of local system – Abhishek Apr 23 '19 at 04:33
so add this to both txtenddate and txtstartdate? – Daredevil Apr 23 '19 at 04:34
Yes, you can add this to both txtendate and txtstartdate datepickers – Abhishek Apr 23 '19 at 04:35
what will happen if i try to select previous dates before today? – Daredevil Apr 23 '19 at 04:35
adding this will disable the previous date before today, it'll not allow you to select past dates – Abhishek Apr 23 '19 at 04:36
is there a way to prevent people from choosing end date< start date? it doesn't make sense – Daredevil Apr 23 '19 at 04:38
You can write code on change event of both the datepicker and validate your date end date – Abhishek Apr 23 '19 at 04:42
How does it look like? – Daredevil Apr 23 '19 at 04:43
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192246/discussion-between-abhishek-and-daredevil). – Abhishek Apr 23 '19 at 04:50

Bathri Nathan · Answer 2 · 2019-04-23T04:47:08.703

1

use the below code it will help you to prevent selecting old date from today.

minDate : 0 // for current date

minDate: new Date(2007, 1 - 1, 1) // for particular minDate

$("input.DateFrom").datepicker({
    minDate: 0  
});

<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>
<input class="DateFrom">

code to end date less that start date please refer the code :-

  $("#StartDate").datepicker({
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#EndDate").datepicker("option","minDate", selected)
        }
    });
    $("#EndDate").datepicker({ 
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#StartDate").datepicker("option","maxDate", selected)
        }
    });

edited Apr 23 '19 at 04:47

answered Apr 23 '19 at 04:33

Bathri Nathan

1,101
2
13
17

1

why it is 0? and not current date – Daredevil Apr 23 '19 at 04:33
@Daredevil 0 refers the current date, you can also change the date to fixed date like this minDate: new Date(2007, 1 - 1, 1) – Bathri Nathan Apr 23 '19 at 04:36
is there a way to prevent people from choosing end date< start date? it doesn't make sense – Daredevil Apr 23 '19 at 04:38
@Daredevil sure you can use maxDate: "+1m +1w" like this. to set end date.but its use less to set end date < start date. – Bathri Nathan Apr 23 '19 at 04:40
I don't follow, how do i make sure i cannot choose end date that is less than start date? – Daredevil Apr 23 '19 at 04:41
@Daredevil check my code i have updated the code which you want. – Bathri Nathan Apr 23 '19 at 04:47
So when I choose start date, the start date cannot be greater than end date. And when i choose end date, the end date cannot be less than start date. Do you get what i mean? – Daredevil Apr 23 '19 at 04:48
@Daredevil yes that is what it mean. – Bathri Nathan Apr 23 '19 at 04:51
Can you post the code in respect to mine? Because your answer changes some variable and i don't understand it – Daredevil Apr 23 '19 at 04:52
@Daredevil okay tell me what u exactly want – Bathri Nathan Apr 23 '19 at 04:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192247/discussion-between-daredevil-and-bathri-nathan). – Daredevil Apr 23 '19 at 04:56

Setting minDate to prevent from choosing enddate before start date

2 Answers2

Linked