JQuery - 结束日期小于开始日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19317678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery - end date less than start date
提问by Marko Kosanovic
I'm trying to fix this problem I'm having. I have to input tags, one is for Training beginning date and other is for training ending date. What i am trying to do is create a jQuery function that will prevent user from selecting an end date to be less than the start date and vice versa.
我正在尝试解决我遇到的这个问题。我必须输入标签，一个是培训开始日期，另一个是培训结束日期。我想要做的是创建一个 jQuery 函数，该函数将阻止用户选择小于开始日期的结束日期，反之亦然。
Any help would be greatly appreciated.
任何帮助将不胜感激。
<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>
采纳答案by Marko Kosanovic
Found the solution
找到解决方案
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);
});
回答by chethu
$(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)
}
});
});
回答by dcarreroc
Here you have the same question with Jquery UI Datepicker jQuery UI Picking a start and end date within range based on start dateAnd a working example:
在这里，您对 Jquery UI Datepicker jQuery UI Picking a start and end date within range based on start date和一个工作示例有相同的问题：
html
html
<input type="text" id="dt1">
<input type="text" id="dt2">
js
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"
});
});
Hope that help
希望有所帮助
回答by Satyam Saxena
Just expanding off fusions answer. this extension method works using the jQuery validate plugin. It will validate dates and numbers
只是扩展融合答案。此扩展方法使用 jQuery 验证插件工作。它将验证日期和数字
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}.');
To use it:
要使用它：
$("#EndDate").rules('add', { greaterThan: "#StartDate" });
Or
或者
$("form").validate({
rules: {
EndDate: { greaterThan: "#StartDate" }
}
});
回答by chandoo
Date picker has an option to validate start date and end date.
日期选择器可以选择验证开始日期和结束日期。
HTML
HTML
jQuery
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 );
}
});
});
回答by Paresh Shiyal
JQuery - end date less than start date 100% Work And Also Dynamically Date.
JQuery - 结束日期小于开始日期 100% 工作并且动态日期。
For Show Date With Today Date
对于显示日期与今天日期
<script type="text/javascript">
$(document).ready(function () {
$('.bet_start').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
todayHighlight: true,
startDate: '0d'
});
})</script>
For end date less than start date
对于小于开始日期的结束日期
<script type="text/javascript">
$(document).ready(function () {
$('.bet_start').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
todayHighlight: true,
startDate: '0d'
});
var startDate = new Date('18/09/2019');
var FromEndDate = new Date();
var ToEndDate = new Date();
ToEndDate.setDate(ToEndDate.getDate() + 365);
$('.bet_start').datepicker({
weekStart: 1,
startDate: '18/09/2019',
endDate: FromEndDate,
autoclose: true
})
.on('changeDate', function (selected) {
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
$('.bet_end').datepicker('setStartDate', startDate);
});
$('.bet_end')
.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())));
$('.bet_start').datepicker('setEndDate', FromEndDate);
});
});</script>
