Jquery 取消单身约会

我正在使用daterangepicker v3.0.3，并使用以下代码将具有

.date

类的所有输入初始化为单日期选择器：

函数checkDateInput（）{
var input=document.createElement（'input'）；
setAttribute（'type'，'date'）；
var notADateValue='非日期'；
input.setAttribute（'value'，notADateValue）；
返回（input.value！==notADateValue）；
}
//检查浏览器是否支持
if（checkDateInput（））{
//更改日期输入的类型
$（'.date'）.prop（'type'，'date'）；
}否则{
//遍历每个
$.each（$（'.date'），函数（键，值）{
$（值）.daterangepicker({
滴下：“起来”，
决战：没错，
singleDatePicker：是的，
});
});
}

日期
书写日期
生效日期
取消日期
提交

如果我了解需求，解决方案应该是更改

自动更新输入：false

并处理

'apply.daterangepicker'

和

'cancel.daterangepicker'

我只报告下面更改的代码片段

    $.each($('.date'), function(key, value) {

    $(value).daterangepicker({
    drops: "up",
    showDropdowns: true,
    singleDatePicker: true,
    autoUpdateInput: false 
  });

  $(value).on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY')); 
  });

  $(value).on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
    });

此外，我认为你应该这样做：

    <!-- daterangepicker -->
<!-- FR: https://github.com/dangrossman/daterangepicker/issues/320 switched js loading order -->
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

---

将回调传递给构造函数是监听所选日期范围更改的最简单方法，但您也可以在每次单击“应用”按钮时执行某些操作，即使所选内容没有更改

函数checkDateInput（）{
var input=document.createElement（'input'）；
setAttribute（'type'，'date'）；
var notADateValue='非日期'；
input.setAttribute（'value'，notADateValue）；
返回false；
返回（input.value！==notADateValue）；
}
//检查浏览器是否支持
if（checkDateInput（））{
//更改日期输入的类型
$（'.date'）.prop（'type'，'date'）；
}否则{
//遍历每个
$.each（$（'.date'），函数（键，值）{
$（值）.daterangepicker({
掉落：“自动”，
决战：没错，
singleDatePicker：是的，
自动更新输入：false，
}).on（'hide.daterangepicker'，函数（ev，picker）{
//做一些事情，比如清除输入
//$（this.val（“”）；如果要清除此注释
}).on（'apply.daterangepicker'，函数（ev，picker）{
$（this.val（picker.startDate.format（'YYYY-MM-DD'））；
});   
});
}

日期
书写日期
生效日期
取消日期
提交

我无法从

chrome

浏览器中重现您的问题，您能解释一下解决问题的步骤吗？@Shidersz-checkDateInput函数将阻止daterangepicker在chrome上初始化。其思想是，如果web浏览器有一个日期输入UI，则使用它，否则，如果它没有，则使用daterangepicker代替它。因此，如果您启动IE，单击日期字段，但单击daterangepicker UI之外的任何位置，以模拟用户未选择值，它将复制该问题。建议的解决方案类似于如果此答案未完全满足您的期望，我希望至少它能激发灵感，或者让我留言，我会尽力更好地了解需要什么