How to limit html5 date input to reasonable years

Question

html5 input type='date' is used in Chrome to enter dates in latest free jqgrid.

It allows to enter 5 digit dates like 20161. How to fix this so that only dates whith years in range 1940 .. current year + 2 years can entered ?

free jqgrid date column template:

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

use `min` and `max` attributes to specify endpoint dates – dandavis Aug 26 '16 at 21:57 — dandavis, Aug 26 '16 at 21:57

score 3 · Answer 1 · answered Aug 26 '16 at 22:00

Use the max and min attribute which is the expected upper bound for the element's value.

HTML Code

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

You need to use jQuery to achieve it

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

You can check this usefull referance :

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

`min='1900-01-01'` still allows to enter years like 0001 from keyboard and move focus out of field. How to disalbe bad year entry from keyboard ? — Andrus, Aug 27 '16 at 12:10

How to limit html5 date input to reasonable years

1 Answers1