当我单击日期两次时，引导日期选择器无效日期问题？

Posted 2023-05-07

【中文标题】当我单击日期两次时，引导日期选择器无效日期问题？

【英文标题】：bootstrap datepicker invalid date issue when i click date twice?

【发布时间】：2015-07-14 17:32:07

【问题描述】：

我正在使用引导日期选择器，但在特定情况下我遇到了无效日期问题。如果我单击今天的日期，它可以正常工作，但是当我再次单击相同的日期时，它会给出无效的日期问题。

所有日期的情况都是如此，因为我看到其他插件找不到这个问题。

html: <input id="dp1" type="text" class="form-control input-sm" placeholder="Data CheckIn">

javascript：

$("#dp1").datepicker(
    format: "mm-dd-yyyy",
    viewMode: 'days',
    todayHighlight: true 
).on('changeDate', function (ev) 
    var a = $('#dp1').datepicker('getDate');
    $(this).datepicker('hide');
    alert(a);
);

jsfiddle example

【问题讨论】：

jsfiddle.net/FTpYk/321

这是因为您正在取消选择所选日期。查看图标颜色黄色（取消选择）和蓝色（选择）。当您单击当前选定的日期时，它显然会返回无效，因为它正在取消选择/切换。

它看起来确实像插件中的一个错误——比如 toggleActive 选项（无论如何都应该默认为 false）不起作用。我确实尝试手动设置它，但行为仍然没有改变

【参考方案1】：

var currentDate;
$('#dp1').datepicker(
    format: "mm-dd-yyyy",
    viewMode: 'days',
    todayHighlight: true

    // currently picked date
  ).on('show', function() 
    currentDate = $(this).val();
  )
  // if no date picked replace with previous date
  .on('changeDate', function(ev) 


    if ($(this).val() === '' || $(this).val() === null) 
      $(this).val(currentDate).datepicker('update');
    
    var a = $('#dp1').datepicker('getDate');
    $(this).datepicker('hide');
    alert(a);

  );

【参考方案2】：

经过一天的努力，我自己通过对插件进行了一些更改来解决问题。

在 bootstrap-datepicker.js 方法中的 _toggle_multidate 第 1024 行已被注释。

else if (ix !== -1)

    //this.dates.remove(ix);

它会像魅力一样发挥作用。我希望这会有所帮助。

如果这个案例解决了您的问题，请尝试并告诉我 谢谢

【参考方案3】：

您可以使用委托，它确实可以正常工作

$("body").delegate('.date' ,'focusin', function() 
     $(this).datepicker(
         autoclose: true,
         viewMode: 'days',
         todayHighlight: true
     );
);

【参考方案4】：

这不是问题。当您第一次单击时，当您再次单击同一日期时，它将在输入中设置所选日期，因此它将取消选择该日期。

【讨论】：

现在这是插件中的一个错误，如果您看到所有其他 datepicker 插件行为，您会发现一个问题，另一方面，从用户角度来看，它不合适。

那么这怎么可能是一个有效的问题，为了满足我们的需求，我们需要编辑/修改或做一些事情来达到要求。这就是我添加答案的原因。