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: /

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?

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?

• javascript
• jquery
• wordpress
• datepicker
• twitter-bootstrap-3

• Your given demo page has a checkin/checkout example. You have tried it and it doesn't work? It looks reasonable to me. – snrlx Commented Jan 29, 2014 at 18:38
• Yes, I tried to use it, but maybe couldnt get the right syntax for js, as I had to use it with noConflict mode, using jQuery instead of $ – Domeniko Commented Jan 29, 2014 at 19:39
• Could you please edit your post and show how you would have done it. Then I can try to fix your mistakes. – snrlx Commented Jan 29, 2014 at 20:05
• I edited my post, added link from jsfiddle. Thanks @nvrmnd : )) – Domeniko Commented Jan 29, 2014 at 20:11
• Ok so I tried to modify your code to make it work in jsFiddle... did not achieve that but I got it working in my local environment. I did not modify the code from the example too much and it worked. – snrlx Commented Jan 29, 2014 at 21:15

2 Answers 2

So after some trouble I finally got something working for you:

jsFiddle Bootstrap-datepicker

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();

Try this code snippet:

$('#changestartdate').datetimepicker({ minDate:new Date() });