Jquery 验证开始和结束日期
我正在验证我的出发和返回日期 目前,您可以选择从今天开始的任何日期 我需要的是返回日期中显示的日期,以禁止在开始日期之前显示或选择任何日期 我的htmlJquery 验证开始和结束日期,jquery,bootstrap-datepicker,Jquery,Bootstrap Datepicker,我正在验证我的出发和返回日期 目前,您可以选择从今天开始的任何日期 我需要的是返回日期中显示的日期,以禁止在开始日期之前显示或选择任何日期 我的html <input class="fromDate" data-date-format="dd/mm/yyyy" data-val="true" data-val-required="[Required_DepartureDate] not found" id="DepartureDate" name="d" type="text" value
<input class="fromDate" data-date-format="dd/mm/yyyy" data-val="true" data-val-required="[Required_DepartureDate] not found" id="DepartureDate" name="d" type="text" value="">
<input class="ToDate" data-date-format="dd/mm/yyyy" id="ReturnDate" name="d" type="text" value="">
我的jquery
/* global google */
define(["jquery",
"modernizr",
"plugin/bootstrap-datepicker",
"plugin/bootstrap-datepicker.ar",
"plugin/bootstrap-datepicker.zh-CN"]
, function ($, Modernizr) {
/**
* D picker - a wrapper around datepicker with a bit of feature detection
*/
$.fn.dPicker = function () {
var htmlLang = $("html").attr("lang"),
langObj = $.fn.datepicker.dates[htmlLang];
if (langObj === undefined || langObj === null) {
if(htmlLang.indexOf("-") > -1)
{
htmlLang = htmlLang.substring(0, htmlLang.indexOf("-"));
langObj = $.fn.datepicker.dates[htmlLang];
}
}
// If the language still isn't found the look for one matching the first part of the lang string
if (langObj === undefined || langObj === null && htmlLang.indexOf("-") === -1) {
for (var key in $.fn.datepicker.dates) {
if (key.indexOf(htmlLang) === 0) {
htmlLang = key;
langObj = $.fn.datepicker.dates[key];
break;
}
}
}
var fromDate = {
format: "dd/mm/yyyy",
startDate: '1',//min date set to today
autoclose: true,
todayHighlight: true,
language: langObj === undefined || langObj === null ? "en" : htmlLang,
orientation: langObj === undefined || langObj === null || !langObj.rtl ? "auto auto" : "auto right",
clearBtn : true
};
var toDate = {
format: "dd/mm/yyyy",
startDate: '1',//Set date x days from today
maxDate: '+1y +1d',//max date x year + 1 day
endDate: '+1y +1d',
autoclose: true,
todayHighlight: true,
language: langObj === undefined || langObj === null ? "en" : htmlLang,
orientation: langObj === undefined || langObj === null || !langObj.rtl ? "auto auto" : "auto right",
clearBtn: true
};
return this.each(function (i, el) {
var $that = $('.fromDate');
var $this = $('.ToDate');
if (!Modernizr.touch || !Modernizr.inputtypes.date) {
//if (Modernizr.inputtypes.date) {
// Only swap the input type to text because IE8 doesn't allow changing types (throws error)
// We do this so that the placeholder shows in browsers that support it
//$that.attr("type", "text");
//}
try {
$that.attr("type", "text");
$this.attr("type", "text");
} catch (e) {
}
// add localised date format from data attribute
if ($that.data("date-format")) {
fromDate.format = $that.data("date-format");
}
if ($this.data("date-format")) {
toDate.format = $this.data("date-format");
}
// copy name attribute from $that.datepicker(dpOpts);
// Insert hidden field & remove name attribute from textbox
$that.after("<input name='" + $that.attr("name") + "' type='hidden'>")
.attr("name", "d")
.datepicker(fromDate)
.on("changeDate", function (e) {
$(this).next().val(e.format(0, "yyyy-mm-dd"));
});
if ($that.val() !== "") {
$that.datepicker("setDate", new Date($that.val()));
}
$this.after("<input name='" + $this.attr("name") + "' type='hidden'>")
.attr("name", "d")
.datepicker(toDate)
.on("changeDate", function (e) {
$(this).next().val(e.format(0, "yyyy-mm-dd"));
});
if ($this.val() !== "") {
$this.datepicker("setDate", new Date($this.val()));
}
// re-run validation after changing name attribute, see http://stackoverflow.com/a/18063874/486434
var $form = $that.closest("form");
var $form2 = $this.closest("form");
$form.unbind();
$form2.unbind();
$form.data("validator", null);
$form2.data("validator", null);
$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
$form2.validate($form2.data("unobtrusiveValidation").options);
}
});
};
return $.fn.dPicker;
});
编辑:刚刚注意到您使用的不是jQueryUIDatePicker
每当“开始日期”输入更改时,从日期选择器获取值并更新“结束日期”minDate/startDate属性
引导数据采集器的应答
jQueryUIDatePicker的答案
我找不到minDate选项作为bootstrap datepicker的一部分,我应该在哪里将其添加到代码中,是否必须在if语句中创建它?我更新了答案以包含bootstrap datepicker设置。值得在你最初的问题中澄清这一点。你最终解决了吗?在示例中,您几乎就完成了,请查找onchangeDate函数,然后使用我的示例完成它:是的,我最终得到了它,感谢您的帮助,您的回答是:
$('.fromDate input').on("changeDate", function(){
var minDate = $(this).datepicker( "getDate" );
$('.toDate input').datepicker("setStartDate", minDate);
});
$('.fromDate input').on("change", function(){
var minDate = $(this).datepicker( "getDate" );
$('.toDate input').datepicker("option", "minDate", minDate);
});