Bootstrap datepicker trigger change

Question

I have from and to input fields with bootstrap date picker. When query params not empty I would like to change the value of these input fields and trigger the change date event on datepicker because I have a function that calculates total price between dates. When user selects dates from datepicker works fine but if I change the value by jquery it does not calculate.

$('#from').val('<%= @from_date %>').trigger( 'change' );
$('#to').val('<%= @to_date %>').trigger( 'change' );
//function
var dates_avail = new DatesAvailability({
                start: '#from',
                end: '#to'
});

..
W.DatesAvailability = function (opts) {
var options = $.extend({}, defaultOpts, opts);
        var start = options.start + ',' + options.rel_start;
        var end = options.end + ',' + options.rel_end;
        $(start + ',' + end).datepicker({
            autoclose: true,
            format: "yyyy-mm-dd",
            startDate: '+1d',
            endDate: '+3y',
..
}).
on('changeDate', function (e) {
// I would like to trigger this.
..

I also have these lines in bootstrap-datepicker.js

..
if (fromArgs){
                // setting date by clicking
                this.setValue();
                this.element.change();
            }
            else if (this.dates.length){
                // setting date by typing
                if (String(oldDates) !== String(this.dates) && fromArgs) {
                    this._trigger('changeDate');
                    this.element.change();
                }
            }
..

how are you changing the value by jQuery? Did you try any of `setDate`, and `setUTCDate`? — Oluwafemi Sule, Jul 18 '17 at 19:13
I am changing the value of the input field, with the bootstrap datepicker's date format — Shalafister's, Jul 18 '17 at 19:15

score 6 · Accepted Answer · answered Jul 18 '17 at 19:56

6

Try using the update mention in the documentation. Something like `$(start + ',' + end).datepicker('update', qParamStart);

If you're trying to figure out how to get the query params this is a good reference.

answered Jul 18 '17 at 19:56

SimplyComplexable

1,116
11
19

Thank you update function updates the field. But does not fire on(changeDate) function of bootstrap datepicker. – Shalafister's Jul 19 '17 at 08:31

score 4 · Answer 2 · edited Oct 18 '22 at 10:20

4

You can do this by manually calling the event changeDate.

E.g.

$('.datepicker').datepicker().trigger('changeDate');

edited Oct 18 '22 at 10:20

Deepak Mahakale

22,834
10
68
88

answered Aug 26 '17 at 05:32

Musaddiq Khan

1,837
18
16

score 1 · Answer 3 · answered Oct 20 '22 at 20:14

1

I would do something like this.

$('.datepicker').datepicker('_trigger', 'changeDate');

This uses an undocumented private method, but will fire with event and the extra data you would expect.

answered Oct 20 '22 at 20:14

barneyp

41
3

estinamir · Answer 4 · 2019-08-06T20:15:57.690

0

Inspect the link from the calendar then call it conventionally. For me it was:

$('.ui-state-active').click();

or

$('.ui-datepicker-current-day').click();

edited Aug 06 '19 at 20:15

answered Aug 06 '19 at 20:03

estinamir

435
5
11

Bootstrap datepicker trigger change

4 Answers4

Linked