Jquery datepicker根据第一个日期字段中的选定日期限制第二个日期字段中的日期 [英] Jquery datepicker restrict dates in second date field based on selected date in first date field

问题描述

我正在使用Jquery日期选择器，并且我有以下代码，当用户选择日期时，下面的字段填充日期+1

  $（'＃dt2'）。datepicker（{
 dateFormat：dd-M-yy
}）; 
 
 $（＃dt1）。datepicker（
 {dateFormat：dd-M-yy，
 minDate：0，
 onSelect：function ）{
 var date2 = $（'＃dt1'）。datepicker（'getDate'）; 
 date2.setDate（date2.getDate（）+ 1）; 
 $（'＃dt2 '）.datepicker（'setDate'，date2）; 
  

我想限制 dt2 字段，不应低于 dt1 字段中的日期，例如如果在 dt1 是 2013年5月1日，则用户可以在 2013年5月1日之后选择日期，不少于 2013年5月02日

如何限制日期字段2中的日期选择？

解决方案

我为你创建了一个jsfiddle
我不是100％肯定如果它是傻瓜，但为了防止用户手动输入日期，您可以将输入设置为 readonly ，例如

 < input type =textid =dt1readonly =readonly > 
  

此刻，我检查了dt2 onClose，如果它的日期低于dt1s日期，我更正它。
如果在dt1中选择了一个日期，那么设置dt2的 minDate 到dt1日期+1。

  $（document）.ready（function（）{
 
 $ （＃dt1）。datepicker（{
 dateFormat：dd-M-yy，
 minDate：0，
 onSelect：function（date）{
 var date2 = $（'＃dt1'）。datepicker（'getDate'）; 
 date2.setDate（date2.getDate（）+ 1）; 
 $（'＃dt2'）。datepicker（'setDate' date2）; 
 //将minDate设置为dt1 date + 1 
 $（'＃dt2'）。datepicker（'option'，'minDate'，date2）; 
} 
 }}; 
 $（'＃dt2'）。datepicker（{
 dateFormat：dd-M-yy，
 onClose：function（）{
 var dt1 = $ （'＃dt1'）。datepicker（'getDate'）; 
 var dt2 = $（'＃dt2'）。datepicker（'getDate'）; 
 //检查以防止用户如果（dt2 <= dt1）{
 var minDate = $（'＃dt2'）。datepicker（'option'，'minDate'）; 
 $（'＃dt2'）。datepicker（'setDate'，minDate）; 
} 
} 
}）; 
}）; 
  

请参阅 jsfiddle

I am using Jquery date picker and I have the following code where when user selects a date, the field below is populated with date +1

$('#dt2').datepicker({
        dateFormat: "dd-M-yy" 
    });

$("#dt1").datepicker(
    {dateFormat: "dd-M-yy", 
    minDate:  0,
onSelect: function(date){
var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate()+1);
            $('#dt2').datepicker('setDate', date2);

I would like to restrict dates in dt2 field which should not be below the date in dt1 field. E.g. If date selected in dt1 is 01-May-2013, then user is allowed to pick date after 01-May-2013, not less than 02-May-2013

How can I restrict date picking in date field 2?

解决方案

I created a jsfiddle for you. I'm not a 100% sure if it's "foolproof" but to prevent users from manually typing a date you could set the inputs to readonlye.g.

<input type="text" id="dt1" readonly="readonly">

At the moment I check the dt2 onClose and if its date is below dt1s date I correct it. Also if a date is selected in dt1 the minDate of dt2 is set to dt1 date +1.

$(document).ready(function () {

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate() + 1);
            $('#dt2').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#dt2').datepicker('option', 'minDate', date2);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {
            var dt1 = $('#dt1').datepicker('getDate');
            var dt2 = $('#dt2').datepicker('getDate');
            //check to prevent a user from entering a date below date of dt1
            if (dt2 <= dt1) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#dt2').datepicker('setDate', minDate);
            }
        }
    });
});

See the jsfiddle

这篇关于Jquery datepicker根据第一个日期字段中的选定日期限制第二个日期字段中的日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！