如何将html5日期输入限制在合理的年份
问题描述:
html5 input type ='date'用于Chrome中以输入最新免费jqgrid中的日期。如何将html5日期输入限制在合理的年份
它允许输入5位数字的日期,如20161
。 如何解决此问题,以便只能输入范围为 1940 .. current year + 2 years
的日期?
免费jqGrid的日期栏模板:
// search template from http://*.com/questions/8710162/jqgrid-calendar-icon-not-showing-up-in-inline-editing-mode
var DateTemplate = {
sorttype: 'date',
formatter: 'date',
formatoptions: {
srcformat: "Y-m-d",
//added according to http://www.trirand.com/blog/?page_id=393/bugs/date-problem
reformatAfterEdit: true
},
editoptions: {
maxlength: 10,
size: 10,
dataInit: initDateEdit
},
editable: true,
searchoptions: {
clearSearch: false,/
// for the searching toolbar:
// http://*.com/questions/34475094/how-to-make-html5-date-field-in-search-toolbar-to-respect-column-width
attr: { size: 10, type: "date", style: "width:11em;" },
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateHtmlSearch,
size: 11 // for the advanced searching dialog
}
};
// http://*.com/questions/29194381/how-to-use-native-datapicker-in-both-form-and-row-editing-in-free-jqgrid
// http://*.com/questions/26040738/how-to-use-input-type-date-for-date-column-in-jqgrid
var initDateEdit = function (elem, options) {
// we need get the value before changing the type
var orgValue = $(elem).val(), newformat,
cm = $(this).jqGrid("getColProp", options.name);
$(elem).attr("type", "date");
if ((typeof Modernizr !== "undefined" && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
$(elem).attr("type", "text"); // !!! important to make saving works correctly
$(elem).css({ width: "8em" }).datepicker({
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
} else {
// convert date to ISO
if (orgValue !== "") {
newformat = cm.formatoptions !== null && cm.formatoptions.newformat ?
cm.formatoptions.newformat :
$(this).jqGrid("getGridRes", "formatter.date.newformat");
$(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "Y-m-d"));
}
$(elem).css({ width: "10em" });
}
};
答
使用最大和最小的属性,它是预期的上限为元素的值。
HTML代码
<input type="date" name="bday" min="2014-05-11" max="2014-05-20"
>
您需要使用jQuery来实现它
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
$('#txtDate').attr('max', maxDate);
});
您可以检查此有用的全球化志愿服务青年:
+0
'min ='1900-01-01''仍然允许从键盘输入像0001一样的年份并将焦点移出现场。如何从键盘不好的年份进入? – Andrus
使用'min'和'max'属性来指定终止日期 – dandavis