Question

我在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() {
  }
});

有人可以帮我解决这个问题吗？

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

Answer 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的回答，如果不查看上面的代码，我将无法在我的项目中使用它。

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

2 个答案: