我正在努力解决我遇到的这个问题。我必须输入标签,一个用于培训开始日期,另一个用于培训结束日期。我想要做的是创建一个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>
答案 0 :(得分:4)
这里有与Jquery UI 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">
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"
});
});
希望有帮助
答案 1 :(得分:3)
只是扩大融合答案。这个扩展方法使用jQuery validate插件。它将验证日期和数字
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" }
}
});
答案 2 :(得分:2)
$(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)
}
});
});
答案 3 :(得分:0)
找到解决方案
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);
});
答案 4 :(得分:0)
日期选择器可以选择验证开始日期和结束日期。
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 );
}
});
});
答案 5 :(得分:0)
JQuery-结束日期小于开始日期100%工作并且还动态 日期。
显示日期与今天的日期
<script type="text/javascript">
$(document).ready(function () {
$('.bet_start').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
todayHighlight: true,
startDate: '0d'
});
})</script>
对于结束日期小于开始日期的
<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>