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

e5njpo68  于 2023-06-22  发布在  jQuery
关注(0)|答案(5)|浏览(180)

我有两个日期选择器
我需要根据第一个日期选择器设置添加条件
如果第一个日期选择器选择了当前日期,则应

第二个日期选择器将在日期选择器- 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

g9icjywg

g9icjywg1#

在第二个日期选择器的处理程序更新minDate选项中,为第一个日期选择器设置onSelect处理程序。其中使用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" />
cclgggtu

cclgggtu2#

我也会考虑禁用第二个(依赖的)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" />
zzlelutf

zzlelutf3#

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

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

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

h6my8fg2

h6my8fg24#

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

hc2pp10m5#

你需要调用一个函数,在其中定义你的两个日期选择器,如下所示:

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

相关问题