如何將html5日期輸入限制在合理的年份

Question

html5 input type ='date'用於Chrome中以輸入最新免費jqgrid中的日期。

它允許輸入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" }); 
    } 
}; 

Answer 1

使用最大和最小的屬性，它是預期的上限爲元素的值。

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); 
}); 

您可以檢查此有用的全球化志願服務青年：

https://www.w3.org/TR/html-markup/input.date.html