html5 input type ='date'用于Chrome中以输入最新免费jqgrid中的日期。如何将html5日期输入限制在合理的年份

它允许输入5位数字的日期，如20161。 如何解决此问题，以便只能输入范围为 1940 .. current year + 2 years的日期？

免费jqGrid的日期栏模板：

// search template from http://stackoverflow.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://stackoverflow.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://stackoverflow.com/questions/29194381/how-to-use-native-datapicker-in-both-form-and-row-editing-in-free-jqgrid

// http://stackoverflow.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" });

}

};

2016-08-26

Andrus

+0

使用'min'和'max'属性来指定终止日期 –