显示选定的特定日期并允许用户在 bootstrap-datepicker 中进行编辑

Question

我正在使用 bootstrap-datepicker，需要显示选定的特定日期，然后允许用户像往常一样与日历交互（包括取消选择最初设置的日期）。

除了在页面上显示两个日历外，下面的代码工作正常。我的代码是从这个 question 中提取出来的，我已经看到了其他几个具有相同问题的问题（日历显示两次）并且我明白这可能是因为我正在初始化日历两次。但我不知道如何解决这个问题。

这是我的代码：

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

我认为第二次初始化发生在 $('.datepicker').datepicker('setDates', myDate); 行，我在其中设置了之前选择的日期。

Answer 1

开始使用了。将 .datepicker('setDates', myDate); 添加到第一次初始化的末尾，并将该部分移动到 changeDate 部分下方。

完整代码如下：

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

显示选定的特定日期并允许用户在 bootstrap-datepicker 中进行编辑

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

javascript

jquery

bootstrap-datepicker