JQuery-结束日期少于开始日期

我正试图解决我遇到的这个问题。我必须输入标签，一个是培训开始日期，另一个是培训结束日期。我想要做的是创建一个jQuery函数，以防止用户选择结束日期小于开始日期，反之亦然。JQuery-结束日期少于开始日期

任何帮助将不胜感激。

<div class="control-group"> 
    <label class="control-label">Training beggining date:</label> 
    <input id="StartDate" style="margin-left: 10px;" size="16" type="text"/> 
</div> 
<div class="control-group"> 
    <label class="control-label">Training completion date:</label> 
    <input id="EndDate" style="margin-left: 10px;" size="16" type="text"/> 
</div>

来源

2013-10-11 Marko Kosanovic

我已经试过这http://stackoverflow.com/questions/4419804/restrict-date-in-jquery-datepicker-基于另一个日期选择器或文本框和我在网上找到的很多其他类似的解决方案，但没有任何工作。它甚至没有注册我的更改。它总是相同的结果。 –

找到了解决办法

var startDate = new Date('01/01/2012'); 
var FromEndDate = new Date(); 
var ToEndDate = new Date(); 
ToEndDate.setDate(ToEndDate.getDate() + 365); 

$('.from_date').datepicker({ 
weekStart: 1, 
startDate: '01/01/2012', 
endDate: FromEndDate, 
autoclose: true 
}) 
.on('changeDate', function (selected) { 
     startDate = new Date(selected.date.valueOf()); 
     startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))); 
     $('.to_date').datepicker('setStartDate', startDate); 
    }); 
$('.to_date') 
    .datepicker({ 
     weekStart: 1, 
     startDate: startDate, 
     endDate: ToEndDate, 
     autoclose: true 
    }) 
    .on('changeDate', function (selected) { 
     FromEndDate = new Date(selected.date.valueOf()); 
     FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf()))); 
     $('.from_date').datepicker('setEndDate', FromEndDate); 
    });

来源

2013-10-15 09:06:37

只是扩大融合的答案。这个扩展方法使用jQuery validate插件。这将验证日期和数字

jQuery.validator.addMethod("greaterThan",

功能（价值元素，则params）{

if (!/Invalid|NaN/.test(new Date(value))) { 
    return new Date(value) > new Date($(params).val()); 
} 

return isNaN(value) && isNaN($(params).val()) 
    || (Number(value) > Number($(params).val())); 
},'Must be greater than {0}.');

要使用它：

$("#EndDate").rules('add', { greaterThan: "#StartDate" });

或者

$("form").validate({ 
rules: { 
    EndDate: { greaterThan: "#StartDate" } 
} 
});

来源

2013-10-11 12:07:32

您能否更具体地说明如何使用第一个函数来实现它？ –

在这里你与Jquery U有同样的问题我的DatePicker jQuery UI Picking a start and end date within range based on start date和工作例如：

HTML

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

$(document).ready(function() { 

    $("#dt1").datepicker({ 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function (date) { 
      var dt2 = $('#dt2'); 
      var startDate = $(this).datepicker('getDate'); 
      var minDate = $(this).datepicker('getDate'); 
      dt2.datepicker('setDate', minDate); 
      startDate.setDate(startDate.getDate() + 30); 
      //sets dt2 maxDate to the last day of 30 days window 
      dt2.datepicker('option', 'maxDate', startDate); 
      dt2.datepicker('option', 'minDate', minDate); 
      $(this).datepicker('option', 'minDate', minDate); 
     } 
    }); 
    $('#dt2').datepicker({ 
     dateFormat: "dd-M-yy" 
    }); 
});

http://jsfiddle.net/PPSh3/7/

希望能够帮助

来源

2013-10-11 12:10:18 dcarreroc

它仍然给我同样的结果。不管怎么说，还是要谢谢你 –

日期选择器有一个选项来验证开始日期和结束日期。

HTML

jQuery的

$(document).ready(function() { 
    jQuery("#from").datepicker({ 
     dateFormat: 'dd/mm/yy', 
     changeMonth: true, 
     changeYear: true, 
     maxDate: '0', 
     onClose: function(selectedDate) { 
     jQuery("#to").datepicker("option", "minDate", selectedDate); 
     } 
    }); 
    jQuery("#to").datepicker({ 
     dateFormat: 'dd/mm/yy', 
     changeMonth: true, 
     changeYear: true, 
     maxDate: '0', 
     onClose: function(selectedDate) { 
     jQuery("#from").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
});

来源

2016-09-01 11:22:30 chandoo

$(document).ready(function(){ 
    $("#StartDate").datepicker({ 
     numberOfMonths: 2, 
     onSelect: function(selected) { 
      $("#EndDate").datepicker("option","minDate", selected) 
     } 
    }); 
    $("#EndDate").datepicker({ 
     numberOfMonths: 2, 
     onSelect: function(selected) { 
      $("#StartDate").datepicker("option","maxDate", selected) 
     } 
    }); 
});

来源

2018-01-24 12:06:35 chethu1003

JQuery-结束日期少于开始日期

回答

相关问题