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

Question

我有两个日期选择器

我需要根据以下条件设置添加条件第一日期选择器

if first date picker selected current date then should be

second date picker will select after next date of selected in date picker - 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 handler to the first datepicker, within the handler update minDate option of the second datepicker. Where use getDate方法来获取选定的日期对象。

$(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

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

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

Answer 3

在选择您的第一个日期时，只需设置 -

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

例如

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

Answer 4

我还会考虑禁用第二个（依赖）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 5

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

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

how to change the datepicker date based on first date picker in jquery

javascript

jquery

onchange

datepicker