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'屬性來指定終止日期 –

總結

以上是生活随笔為你收集整理的html自动年份版权,如何将html5日期输入限制在合理的年份的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。