对于表单中的日期范围选择器如何在已经应用回调函数时设置无效日期以获取单击应用按钮时的日期

Question

列表项

html形式

<div class="form-group " id="input-dates">
<input class="form-control date-range-picker" id="dateRange_n" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
<i class="icon_calendar"></i>

我用过回调函数

    function myCallback(start, end) {
                $('#dateRange_n').html(start.format('MM DD, YYYY') + ' - ' + end.format('MM DD, YYYY'));

        }
    let options = {} // you can add more options to this, but need at least this
$('#dateRange_n').daterangepicker(options, myCallback)
  .on("input change", function(e) {
      var days = e.target.value;
    console.log("Date changed: ",days); });

现在我想使用 isinvalid date 函数来禁用特定日期。我在 document.ready()

上使用了以下函数

 $('#dateRange_n').daterangepicker({
// you can use this optionally -> maxSpan: 50
 
"startDate": today,
 "endDate": today2,
 "minDate": today,
 isInvalidDate: function(ele) {
    var currDate = moment(ele._d).format('MM-DD-YYYY');
    return ["06-15-2021"].indexOf(currDate) != -1;
}

});

它可以工作，但是当我在准备好的文档上添加上述函数时回调函数不工作

Answer 1

可以在option后传入回调函数

示例如下

function myCallback(start, end) {
  console.log("callback");
  $("#dateRange_n").html(
    start.format("MM DD, YYYY") + " - " + end.format("MM D, YYYY")
  );
}

let options = {
  startDate: "12-01-2018",
  endDate: "12-01-2023",
  minDate: "10-06-2021",
  isInvalidDate: function (ele) {
    var compareDate = moment(ele);
    var startDate = moment("12/01/2019", "DD/MM/YYYY");
    var endDate = moment("5/06/2021", "DD/MM/YYYY");
    return compareDate.isBetween(startDate, endDate);
  },
};

$("#dateRange_n").daterangepicker(options, myCallback);

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<div class="form-group" id="input-dates">
  <input
    class="form-control date-range-picker"
    id="dateRange_n"
    type="text"
    name="dates"
    placeholder="test...."
    autocomplete="off"
    required
  />
  <i class="icon_calendar"></i>
</div>

对于表单中的日期范围选择器如何在已经应用回调函数时设置无效日期以获取单击应用按钮时的日期

for daterange picker in the form how to set isinvalid date when already applied the callback function for getting the dates on click of apply button

javascript

jquery

daterangepicker