使用 jQuery 多日期选择器将日历跳转到当前月份答案

【问题标题】：Calendar jumps to current month with jQuery multi date picker使用 jQuery 多日期选择器将日历跳转到当前月份
【发布时间】：2016-10-25 08:01:03
【问题描述】：

我在我的 html 中使用 jQuery 多日期选择器。当我在日期选择器中选择第一个日期时，它可以正常工作，但是当我选择第二个日期时，它会跳转到当前月份，但日期选择器值会附加到输入框。

我不知道我在这段代码中做错了什么：

$('#datePick').multiDatesPicker({
  beforeShowDay: my_array,
  // For disabling all "Sundays"
  dateFormat: "d/m/yy",
  maxDate: "+3m",
  minDate: "-1m",
  multidate: true,
  addDisabledDates: My_array,
  onSelect: function load() {
  }
});

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript jquery ruby-on-rails date

【解决方案1】：

很好的问题。

我在 documentation 中没有找到任何东西来解决您注意到的奇怪行为。
在我看来，它真的看起来像一个错误。

我使用onSlect 回调对其进行了研究并找到了一个解决方法。
但这意味着禁用任何显示/隐藏内置动画。
我觉得没什么大不了的……

请参阅this CodePen demo 重新创建问题并与此解决方案进行比较。

并且，下面是易于剪切和粘贴的代码（没有演示的所有 console.logs）。

$('#datePickTweaked').multiDatesPicker({

    // OPTIONS
    showAnim:"",                            // Disables the show/hide animation.
    beforeShowDay: $.datepicker.noWeekends, // No week-ends.
    dateFormat: "d/m/yy",
    maxDate: "+3m",
    minDate: "-1m",
    multidate: true,
    defaultDate:"0d",                       // Default date selection as of "today".
                                            // Needed to show the right month on focus.


    // The "walk-around" is HERE, in the "onSlect" callback.

    onSelect: function(){

        // Get the "datepicker" object.
        var datepickerObj = $(this).data("datepicker");

        // Get the "settings" object within "datepicker".
        var datepickerSettings = datepickerObj.settings;

        // Get the last date picked.
        var tempDay = datepickerObj.selectedDay;
        var tempMonth = datepickerObj.selectedMonth+1;
        var tempYear = datepickerObj.selectedYear;
        var pickedDate = tempDay+"/"+tempMonth+"/"+tempYear;

        // Remove previous "defaultDate" property.
        delete datepickerSettings["defaultDate"];

        // Add a new defaultDate property : value.
        datepickerSettings.defaultDate=pickedDate;

        // "Hacky trick" to avoid having to click twice on prev/next month.
        $("#datePickTweaked").blur();
        setTimeout(function(){
            $("#datePickTweaked").focus();
        },1);                               // 1 millisecond delay seems to be enought!!!
    }
});

【讨论】：

【解决方案2】：

这个答案对我不起作用。

我不是专家，但似乎defaultDate 的格式可能从给出这个答案时发生了变化。

无论如何，这就是我为像我一样通过 Google 来到这里的任何人所做的。我也能够保持showAnim 效果，但在选择多个日期时它看起来并不好。我想给用户额外确认他们接受的选择是件好事。

上述许多答案显然仍然有效。我主要只是改变了defaultDate 的处理方式，给它一个不同的值，我通过计算当前日期、月份和年份与选定的日期、月份和年份之间的差异来获得该值。

$("#inputID").multiDatesPicker({
  dateFormat: "dd-M-yy",
  minDate: 1,
  multidate: true,
  defaultDate: "0d",
  onSelect: function() {
    // Get the "datepicker" object.
    var datepickerObj = $(this).data("datepicker");

    // Get the "settings" object within "datepicker".
    var datepickerSettings = datepickerObj.settings;

    // Get the last date picked.
    var d = new Date();
    var dayDiff = datepickerObj.selectedDay - d.getDate();
    var monthDiff = datepickerObj.selectedMonth - d.getMonth();
    var yearDiff = datepickerObj.selectedYear - d.getFullYear();
    var pickedDate =
      "+" + dayDiff + "d +" + monthDiff + "m +" + yearDiff + "y";

    // Remove previous "defaultDate" property.
    delete datepickerSettings["defaultDate"];

    // Add a new defaultDate property : value.
    datepickerSettings.defaultDate = pickedDate;

    // Avoid having to click twice on prev/next month.
    $("#inputID").blur();
    setTimeout(function() {
      $("#inputID").focus();
    }, 1); // 1 millisecond delay seems to be enought!!!
  }
});

完全感谢 Louys 的回答，如果不查看他上面的代码，我就不会让它为我的项目工作。

【讨论】：