Display specific dates as selected and allow user to edit in bootstrap-datepicker

Question

I am using bootstrap-datepicker and need to show specific dates as selected AND then allow user to interact with the calendar as usual (including to deselect the originally set dates).

The code below works fine except it displays two calendars on the page. My code is lifted from this question and I have seen several other questions with the same issue (calendar displaying twice) and understand that it is probably because I am initialising the calendar twice. But I do not know how to fix this.

Here is my code:

    var selectedDates = ["Fri Sep 03 2021 22:14:25 +0100","Sat Sep 04 2021 22:14:25 +0100"];

    $.each(selectedDates, function(k, v){
      var nd = new Date(v);
      var ndd = nd.getDate()-1;
      var ndm = nd.getMonth()+1;
      var ndy = nd.getFullYear();
      var ndg = [parseInt(ndy), parseInt(ndm), parseInt(ndd)];
      myDate.push(new Date(ndg));
    });

      $('.datepicker').datepicker({ 
        format: 'DD/MM/YYYY',
        multidate: true,
        clearBtn: true,
        weekStart: 1,
        todayHighlight: true
      });

      $('.datepicker').on('changeDate', function(evt) {
        var the_dates = $('.datepicker:first').datepicker('getDates', {
        format: 'mm-dd-yy'
    });
    //console.dir(the_dates)
            $("#t_dates").html("");
            $("#t_dates_").html("");
    var arrayLength = the_dates.length;
    for (var i = 0; i < arrayLength; i++) {
        console.log(moment(the_dates[i]).format('YYYY-MM-DD'));
        document.getElementById("t_dates").innerHTML+= '<div class="date-container">' +  moment(the_dates[i]).format('MMMM Do YYYY') + '</div>';
        document.getElementById("t_dates_").innerHTML+= '<input type="text" class="d-none" name="t_date__[]" value="' +  moment(the_dates[i]).format('YYYY-MM-DD') + '">';
    }
      });

    $('.datepicker').datepicker('setDates', myDate);

    $('.btn').on('click', function() {
        var the_date = $('.datepicker:first').datepicker('getDates');
        var formatDates = $.datepicker.formatDate("yyyy-mm-dd", the_date);
        // console.log(formatDates);
      });

I think the second initialization occurs with the line $('.datepicker').datepicker('setDates', myDate); where I set the previously selected dates.

Not sure what you mean. I tried both `$('.datepicker').datepicker('setDates', myDate, { format: 'DD/MM/YYYY',...` (displays correctly but is not editable) and `$('.datepicker').datepicker({ format: 'DD/MM/YYYY', setDates: myDate,...` (does nothing). — Mads Stenbjerre, Aug 19 '21 at 19:18

score 0 · Accepted Answer · answered Aug 19 '21 at 19:59

Got it to work. Added .datepicker('setDates', myDate); to the end of the first initialisation and moved that section below the changeDate section.

Here is the whole code:

var myDate = [];
var selectedDates = ["Fri Sep 03 2021 22:14:25 +0100","Sat Sep 04 2021 22:14:25 +0100"];

$.each(selectedDates, function(k, v){
  var nd = new Date(v);
  var ndd = nd.getDate()-1;
  var ndm = nd.getMonth()+1;
  var ndy = nd.getFullYear();
  var ndg = [parseInt(ndy), parseInt(ndm), parseInt(ndd)];
  myDate.push(new Date(ndg));
});

  $('.datepicker').on('changeDate', function(evt) {
    var the_dates = $('.datepicker:first').datepicker('getDates', {
    format: 'mm-dd-yy'
});
//console.dir(the_dates)
        $("#t_dates").html("");
        $("#t_dates_").html("");
var arrayLength = the_dates.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(moment(the_dates[i]).format('YYYY-MM-DD'));
    document.getElementById("t_dates").innerHTML+= '<div class="date-container">' +  moment(the_dates[i]).format('MMMM Do YYYY') + '</div>';
    document.getElementById("t_dates_").innerHTML+= '<input type="text" class="d-none" name="t_date__[]" value="' +  moment(the_dates[i]).format('YYYY-MM-DD') + '">';
}
  });

  $('.datepicker').datepicker({
    format: 'DD/MM/YYYY',
    multidate: true,
    clearBtn: true,
    weekStart: 1,
    todayHighlight: true
  }).datepicker('setDates',myDate);

$('.btn').on('click', function() {
    var the_date = $('.datepicker:first').datepicker('getDates');
    var formatDates = $.datepicker.formatDate("yyyy-mm-dd", the_date);
    // console.log(formatDates);
  });

Display specific dates as selected and allow user to edit in bootstrap-datepicker

1 Answers1