JQuery – 结束日期小于开始日期

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

任何帮助将不胜感激。

 Training beggining date:  
 
 Training completion date:   

Answer 1

在这里你有与Jquery UI Datepicker相同的问题jQuery UI根据开始日期选择范围内的开始和结束日期和一个工作示例：

HTML

JS

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

希望有所帮助

Answer 2

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

 jQuery.validator.addMethod("greaterThan", 

function（value，element，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" } } }); 

Answer 3

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

Answer 4

找到了解决方案

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

Answer 5

日期选择器可以选择validation开始日期和结束日期。

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