如何根据jquery中的第一个日期选择器更改日期选择器日期

Question

我有两个日期选择器

我需要设置添加条件基于 第一个日期选择器

如果第一个日期选择器选择了当前日期，那么应该是

第二个日期选择器将在日期选择器中选择的下一个日期之后选择 - 1

<input type="text" id="datepicker"/>

<input type="text" id="datepicker2"/>
$(function() {
    $( "#datepicker1" ).datepicker({
    minDate:0,
    dateFormat: "yy-mm-dd" });

});

$(function() {
    $( "#datepicker2" ).datepicker({
    dateFormat: "yy-mm-dd" });

});

我可以在 jquery 中怎么做？？

Datepicker - 1

Answer 1

将onSelect 处理程序设置为第一个日期选择器，在第二个日期选择器的处理程序更新minDate option 内。其中使用getDate方法获取选中的Date对象。

$(function() {
  let $dt1 = $("#datepicker1").datepicker({
    minDate: 0,
    dateFormat: "yy-mm-dd",
    // attach handler
    onSelect: function(dateString, instance) {
      // update minDate option of second datepicker
      // create a Date instance using datepicker instance
      // where increment the day value
      // $dt2.datepicker('option', 'minDate', new Date(instance.selectedYear, instance.selectedMonth, ++instance.selectedDay));

      // or you can get Date from jQuery object
      // or get jquery instance from instance
      // like : instance.input or $("#datepicker1")

      let date = $dt1.datepicker('getDate');
      // or let date = instance.input.datepicker('getDate');

      // increment day
      date.setDate(date.getDate() + 1)

      $dt2.datepicker('option', 'minDate', date);
      // to set min date as datepickers 1 value simply use
      // $dt2.datepicker('option', 'minDate', dateString );

      // incrementing day from a customized data string is hard that's the reason for using datepicker instance
    }
  });

  // cache the reference of input element
  var $dt2 = $("#datepicker2").datepicker({
    dateFormat: "yy-mm-dd"
  });
});

<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="datepicker1" />

<input type="text" id="datepicker2" />

Answer 2

我还会考虑保持第二个（依赖）datepicker 处于禁用状态，直到第一个具有更好地强制关系的值。我添加了data-dependent 以避免硬编码，但这只是选择。

这里我使用了onSelect，但如果需要，它可以是另一个事件。

我还修复了您在选择器中为第一个元素设置的 ID。

$(function() {
  $("#datepicker").datepicker({
    minDate: 0,
    dateFormat: "yy-mm-dd",
    onSelect: function(date, datepicker) {
      let dependent= $(this).data('dependent');
      let thisDate = $(this).val();
      $(dependent).datepicker("option", "minDate", thisDate);
      $(dependent).datepicker('refresh');
    }
  });
  $("#datepicker2").datepicker({
    dateFormat: "yy-mm-dd"
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input type="text" id="datepicker" data-dependent="#datepicker2" />
<input type="text" id="datepicker2" />

Answer 3

选择你刚刚设定的第一个日期 -

$( "#datepicker2" ).datepicker({ minDate: <selected date from 1>});

例如

$( "#datepicker2" ).datepicker({ minDate: new Date('05/05/2019')});这将仅显示 2019 年 5 月 5 日之后的日期

Answer 4

let dateMin = new Date(<?= date('Y,n,d', mktime(0,0,0,date('n')-1, date('d'), date('y'))); ?>);
let dateFinish = new Date(<?= date('Y,n,d', mktime(0,0,0,date('n')-1, date('d')+7, date('y'))); ?>);

$('#date-start').datetimepicker({
    format: 'DD-MM-YYYY',
    minDate: dateMin,
    maxDate: dateFinish
});
$('#date-finish').datetimepicker({
    format: 'DD-MM-YYYY',
    minDate: dateMin
});

Answer 5

您需要调用一个函数，在其中定义两个日期选择器，如下所示：

function reinitialize()
{
  $("#datepicker1").datepicker('destroy');
  $('#datepicker1').datepicker({
    onSelect: reinitialize,
    defaultDate: new Date($("#datepicker1").val())
  });
  $("#datepicker2").datepicker('destroy');
  $('#datepicker2').datepicker({
    minDate: new Date($("#datepicker1").val()), // use min date
    defaultDate: new Date($("#datepicker2").val())
  });
}