我在我的表单中使用了日期范围选择器，当我单击日期范围选择器的应用按钮时，如何在 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>

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

i used the daterange picker in my form, how can i get the changed dates in jquery when i click on apply button of date range picker

php

jquery

daterangepicker