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())
  });
}

如何在jQuery中基于第一个日期选择器更改日期选择器日期

5 个答案: