How to call "onSelect" function for bootstrap3-datetimepicker? jQuery

Question

I am using Rails 4 and I have the gem bootstrap3-datetimepicker-railsinstalled.

It is working fine, but I want to be able to do an onSelect call like I can with the normal bootstrap-datepicker.

I want to be able to do something like this:

$("#start").datetimepicker({
    minDate: new Date()
}).on("change", function(selectedDate) {
    $("#end").datetimepicker({ minDate: selectedDate });
});

$("#end").datetimepicker();

but the documentation is very vague and doesn't seem to include anything on this concept. I am still pretty surprised that this feature of validating start and end dates is not a native option in any date or time picker.

How would I realize this?

Note: I am using bootstrap3-datetimepicker, not the regular bootstrap-datepicker and not jquery-datetimepicker.

Side Note: I've always felt that the world's most ideal automatic datepicker validation would look something like this:

$("#start").datepicker({
    minDate: new Date(),
    endDate: "#end"  // Would automatically call $("#end").datepicker and set the minDate to whatever #start's selected date is
});

I am considering creating my own branch to try and implement it because I feel that the concept of start and end dates is commonly ignored when datepickers are created but is so frequently needed.

score 3 · Accepted Answer · answered Jul 09 '15 at 22:06

3

Take a look at the documentation section on linked pickers: https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers

In your case you would do:

$("#start").on("dp.change", function (e) {
    $('#end').data("DateTimePicker").minDate(e.date);
});

answered Jul 09 '15 at 22:06

Ryan Neuffer

782
4
8

Either you're a genius or I'm an idiot, but either way, thank you because that worked. I completely overlooked that area of the docs. – Graham S. Jul 09 '15 at 22:10

score 0 · Answer 2 · edited May 23 '17 at 12:21

Try this,

$("#start").datetimepicker({
    minDate: new Date()
}).on("change.dp", function(selectedDate) {
    $("#end").datetimepicker({ minDate: selectedDate });
});

If not, try this,

$("#start").datetimepicker({
        minDate: new Date()
    }).on("dp.change", function(selectedDate) {
        $("#end").datetimepicker({ minDate: selectedDate });
    });

Check bootstrap-3-datetimepicker-events-not-firing-up for more info

How to call "onSelect" function for bootstrap3-datetimepicker? jQuery

2 Answers2