3

I'm trying to set up the datetimepicker on https://tempusdominus.github.io/bootstrap-3/ and configure it to be used inline. It is initialized with:

$('#datetimepicker5').datetimepicker({
    inline: true,
    allowMultidate: true,
    multidateSeparator: ';',
    locale: 'nb',
    format: 'L',
    useCurrent: false,
});

It works, but I cannot find out how to initialize several dates. As you can see I use it with allowMultidate.

So, how can I initialize the datetimepicker with several dates pre-set?

beaver
  • 17,333
  • 2
  • 40
  • 66

3 Answers3

1

I met the same problem and I can't find any answers here. So I tried to resolve it with a little revise to "tempusdominus-bootstrap-4.js". I hope this will help you and make some reference for anyone who met the same problem.

At first adding a method multiDate for Object DateTimePicker.

var DateTimePicker = function () {
    …
    DateTimePicker.prototype.multiDate = function multiDate(params) {
        var date = params[0];
        var index = params[1];
        this.date(date, index);
    };
    …
}

The next, invoke your method at your page.
Suppose your initial data is like this:

var values = ['2019-02-06','2019-03-06','2019-05-08','2019-07-02'];

So you can initialize these in your multidatepicker.

var initializeMultidate = function(){
    for(var i=0; i<values.length; i++){
        var date = moment(values[i], 'YYYY-MM-DD');
        $("#datetimepicker1").datetimepicker("multiDate", [date, i]);
    }
};

=================================================

That's all.

PrakashG
  • 1,642
  • 5
  • 20
  • 30
java20cn
  • 11
  • 2
1

The only solution I found was to do a search for the dates and using JQuery to click them, it is not elegant but it worked for me.

var fechas = ['01/10/2020', '02/10/2020', '03/10/2020'];
for (let index = 0; index < fechas.length; index++) {
    $("[data-day='"+fechas[index]+"']").click();
}
0

Unfortunately, what you are asking cannot be done using tempusdominus. I struggled with the same issue and in the end switched over to jQueryUI MultiDatesPicker, which allows for much more control.

http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/

brassmookie
  • 104
  • 6