Bootstrap Datepicker Disable Past Dates After First Date Field is Set
Solution 1
So after some trouble I finally got something working for you:
What did I do:
I used forked Bootstrap-datepicker. It is in my opinion way better documented and easier to use. I got it working so that should count for something.
For example I got the date of the respective datepicker by invoking getDate()
on a datepicker:
checkout.datepicker("getDate").valueOf()
If you have any questions about my code, let me know!
EDIT:
I updated the former jsFiddle (see the link above). It automatically sets the value of #dp2 to the selected date of #dp1 + one day. Therefore you should always be in the correct month.
If you don't want the code to put the focus on #dp2 after a date is selected just remove the following line in the jsFiddle:
$('#dp2')[0].focus();
Solution 2
Try this code snippet:
$('#changestartdate').datetimepicker({
minDate:new Date()
});
Domeniko
Updated on December 02, 2020Comments
-
Domeniko over 3 years
I'm working on a Wordpress website with the theme based on Bootstrap 3.
In a form I need to include calendar date pickers. I added a js library from eyecon (Demo Website for Datepicker Library). I made it work with date selectors, but I'm having trouble disabling choosing the past times for arrival field, when the departure time is set.
For example, if the Departure time is set to be 1 March, when the user clicks on the Arrival field in the calendar that pops up, all the dates before 2nd March should be disabled.
I tried multiple versions of code given on demo website, but they didn't work. I think the problem might be that I have jQuery in noConflict mode.
My current script is located in footer.php of my theme. The calendar pop up works, and it disables past dates, but it doesn't disable dates before the Arrival field once the Departure date is set.
This was the most successful attempt, as at least the calendar popups were working on this attempt: http://jsfiddle.net/j5ZKc/
And this is my current script:
<script type="text/javascript"> jQuery(function() { jQuery('#dp1, #dp2' ).datepicker({startDate: '-0m'}).on('changeDate', function(){ jQuery( '#dp1, #dp2' ).datepicker('hide'); }) }); </script>
Any suggestions please?
-
Domeniko over 10 yearsHi @nvrmnd Thanks a lot! This actually solved my problem... It works, but I have a little new problem now. Thing is, not when I choose a departure date lets say on March 1, it automatically jumps to Arrival field and it doesnt let me choose any date before March 1 (This is correct), but I need to manually scroll couple months from current date to get to March 1 and then select an arrival date. Is there a way, to make arrival field initially show the month / date which was selected in Departure field? I hope I make sense, sorry for my English : ))
-
Domeniko over 10 yearsAnother question I have is, how would I be able to disable automatically jumping on arrival date, as soon as Departure date (#dp1) is set? And would this script work for multi fields? If lets say I have 3 departure dates and then 1 arrival? Thanks so much @nvrmnd I really appreciate your help a lot! : ))
-
snrlx over 10 yearsI edited the jsFiddle to satisfy your needs. If you want to use 4 different date pickers, then of course you have to do some small modifications but it should be pretty easy to do so.
-
Domeniko over 10 yearsThank you @nvrmnd Has anyone ever told you that you are his hero? : )) Well, Sir... You are my hero :D Now, all I have to figure out is, how to duplicate this script for my another page, where I have multiple fields for calendar, for multi destinations. I assume simply copying and changing the ID names in the script should do the job right ? Thanks a lot again! : ))
-
snrlx over 10 yearsExactly, adjust the IDs and it should be fine. If you like my answer, you should upvote it/mark it as the accepted answer so that others know that the problem is solved.
-
Domeniko over 10 yearsI accepted the answer but cant upvote it yet. Will get back to this answer once I have enough reputation to upvote it... Thanks a lot again... Cheers! : ))
-
Con Antonakos almost 10 yearsThis was an awesome solution. Working with the plugin caused some friction, but this solution (and your jsFiddle) really, really helped! I was able to update my end date based on the start date selection, which is exactly what I needed.
-
SJMan over 9 years@snrlx Updated the earlier fiddle to handle a case : 1.Select a date from dp1 (Say, 14th Jan, dp2 gets set to 15th jan, previous values disabled) 2.Select a Date from dp1 previous to 14th jan (Say, 7th Jan then 7-14 are still disabled) Find the link
-
Ross Edman about 9 years
minDate
has been updated tostartDate
for anyone looking at this recently. -
Nubtacular almost 9 yearsI had to use minDate over startDate: startDate gives a js console error of
Uncaught TypeError: option startDate is not recognized!