我在表单中使用了日期范围选择器，当我单击日期范围选择器的应用按钮时，如何在 jquery 中获取更改的日期

Question

这是 html 格式的日期范围选择器

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

我在输入类型中使用了点击功能，但我没有在 jquery 中获得日期 我也使用 apply.daterangepicker 方法

  function myCallback(start, end) {
    $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    alert('hello world'); //etc, your code here
}
// attach daterangepicker plugin
$('#dateRange').daterangepicker(options, myCallback);

上面的功能我也用过，但是没用

Answer 1

我认为您正在寻找的代码是：

$('#dateRange').daterangepicker(options, myCallback)
.on("input change", function (e) {
    console.log("Date changed: ", e.target.value);
});

e.target.value为日期范围，点击应用按钮触发函数

下面是我之前的回答

---

要获得您正在使用的代码，只需在创建日期选择器之前添加此行 let options = {}，如下所示。您关于如何获取更改日期的问题：这些位于名为dates 的表单字段中 - 当您提交表单时，更改日期的字段称为dates，因为该元素具有name="dates"。因为同一个元素的 ID 为 dateRange，所以在表单提交之前获取它的值的方式是 $('#dateRange').val()`

function showValues() {
  alert($('#dateRange').val());
  return false;
}


function myCallback(start, end) {
  $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

}
// attach daterangepicker plugin
/* Make sure you have the options object at least instantiated */
let options = {} // you can add more options to this, but need at least this
$('#dateRange').daterangepicker(options, myCallback)
  .on("input change", function(e) {
    console.log("Date changed: ", e.target.value);
  });

<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" />
<form onsubmit="return showValues()">
  <div class="form-group " id="input-dates">
    <input class="form-control date-range-picker" id="dateRange" type="text" name="dates" placeholder="<?php echo get_phrase('when'); ?>.." autocomplete="off" required>
    <i class="icon_calendar"></i>
  </div>

  <button class='btn btn-primary' type='submit'>Submit</button>