How to create HTML DOM Input type date ‘min’ and ‘max’ restriction using JavaScript? – Progrramers pro example

Hello Programmers! This post will elaborate how to create ‘min’ and ‘max’ date restriction to HTML DOM Input type date. Today every small and large company requires web applications to maintain their Customers, Products and Accounts etc. These types of application generally include date restriction.

Suppose you have a product warranty management system and the product comes with 15 months warranty from date of product manufacture and 12 months from date of product sale. To maintain the warranty on that product you have to specify min and max warranty date criteria on the product management application.

This post will show you step by step that ‘How to create HTML DOM Input type date ‘min’ and ‘max’ restriction using JavaScript?’

Look at the below given example :

Simple example of date restriction in HTML Input type date :

<input type="date" id="date" value="2019-08-21" min="2019-08-21" max="2019-08-28" />

Try Yourself

Above example is a simple html code which describe how min and max attribute is use to create the date restriction. This code specified here to understand that how the date restrictions work.
Now you go through another example given below this example explains How to set min attribute value to restrict past date using JavaScript in the beginner mode.

Dynemic minimum date restriction using JavaScript :

var n = new Date(); //date constructor
var y = n.getFullYear(); //current full year
var m = n.getMonth()+1;  //current month
var d = n.getDate();     //current day
//padStart fix length of sting as per requirement, for e.g. when month = 8 then month become 08
var today = y.toString().padStart(4, 0)+"-"+m.toString().padStart(2, 0)+"-"+d.toString().padStart(2, 0); //current date
var elem = document.getElementById("date"); //HTML DOM input type date
function restric(e){
    e.value = today;
    e.setAttribute("min",today);
}
restric(elem); //function called

Try Yourself

Above example sets only min attribute while another example given below sets both min and max attribute using JavaScript function. This example creates two variable ‘today’ and ‘maxday’ that provides the value for min and max attribute respectively.

Dynemic minimum date restriction using JavaScript :

//get today
var n = new Date();
var y = n.getFullYear();
var m = n.getMonth()+1;
var d = n.getDate();
var today = y.toString().padStart(4, 0)+"-"+m.toString().padStart(2, 0)+"-"+d.toString().padStart(2, 0);
//get max day
var days = 7; //change the number of day that how many maximum days you want to restrict
var m = new Date(n.getTime() + (days * 24 * 60 * 60 * 1000));
var ymax = m.getFullYear();
var mmax = m.getMonth()+1;;
var dmax = m.getDate();
var maxday =  ymax.toString().padStart(4, 0)+"-"+mmax.toString().padStart(2, 0)+"-"+dmax.toString().padStart(2, 0);
var elem = document.getElementById("date"); 

function restric(e){
    e.value = today;
    e.setAttribute("min",today);
    e.setAttribute("max",maxday);
}restric(elem);

Try Yourself

Also check the below example where min, max and current date is returned through a function called mydate(e) where ‘e’ is parameter referred as number of days. For e.g. if you want min date 7 days before and max date 7 days after from current then you simply set setAttribute(‘min’, mydate(-7)) and setAttribute(‘max’, mydate(7)) while calling JavaScript function restrict().

Dynemic minimum date restriction using JavaScript :

//don't confuse it is not jQuery:
var $ = function(_){return document.querySelectorAll(_)};
function myDate(e){
    var n = new Date();
    var t = new Date(n.getTime() + (e * 24 * 60 * 60 * 1000)); //get time in milisecond
    var y = t.getFullYear();
    var m = t.getMonth()+1;;
    var d = t.getDate();
    var date =  y.toString().padStart(4, 0)+"-"+m.toString().padStart(2, 0)+"-"+d.toString().padStart(2, 0);
    return date;
}
function restric(){
    $("#date")[0].setAttribute("min",myDate(-7));
    $("#date")[0].setAttribute("value",myDate(0));
    $("#date")[0].setAttribute("max",myDate(7));
}restric();

Try Yourself

Pro example with explanation 

Finally coming on conclusion of this post let’s check one last example where date is returned through a function similarly above example, ‘r’ is an object which can suppose to be a server response which contains min, max and current date values. restric() function loops though ‘r’ object and set the min, max and current values to HTML DOM input.

Dynemic minimum and maximum date restriction using JavaScript - pro version coding

//don't confuse it is not jQuery:
var $$ = function(_){return document.querySelectorAll(_)};
/* 'r' object can be parse as server response, for e.g. : e-commerce site maintain warranty one year from date of products sale.
minium and maximun can be set as product warranty period from date of sale*/
var r = [{name:"min", value:myDate(-3)},{name:"value",value:myDate(0)},{name:"max",value:myDate(3)}];
function myDate(e){
    var n = new Date();
    var t = new Date(n.getTime() + (e * 24 * 60 * 60 * 1000));  //get time in milisecond
    var y = t.getFullYear();
    var m = t.getMonth()+1;;
    var d = t.getDate();
    var date =  y.toString().padStart(4, 0)+"-"+m.toString().padStart(2, 0)+"-"+d.toString().padStart(2, 0);
    return date;
} 
//creating a function to set Attribute to HTML DOM input   
function restric(){
    //forEach loop for sertting attribute min, value and max value on HTML DOM input
    r.forEach(function(key) {
        //target the DOM with QuerySeletorAll using DOM 'id'.
        $$('#date')[0].setAttribute(key.name, key.value);
    });
}restric(); //calling restric function on load
//when HTML DOM get changed then function will be fire it conditions hmatched.
$$('#date')[0].onchange = function(){
    if(this.value < r[0].value || this.value > r[2].value){
        this.value=r[1].value;
        alert("This is invalid date selection. Please select the date between "+ r[0].value + " to "+ r[2].value);
    }else{
        if(this.getAttribute("min")==undefined ||this.getAttribute("min")==undefined){
            alert("Correct Date Selected");
        }
    }
}

Try Yourself

onchange  EventListener function expression declared for security purpose if someone delete the min and max attributes from element inspect module then this function expression will restrict the users to make invalid log in.

Hoping this post will clear the whole concept of date restriction. If there is any problem then please write down in the comments and share your problem with us, It’ll will a pleasure to help you.

Related Topics

How To Create Cascading Dropdown Using Plain JS
MongoDB Tutorial : How To Get Lowercase Hexadecimal String From MongoDB ObjectId() – Mongodb Objectid Operations
How To Create Horizontal Tab Window In Html Using JavaScript And CSS
How To Create HTML DOM Input Type Date ‘Min’ And ‘Max’ Restriction Using JavaScript?
JavaScript How To : How To Get Javascript Date In Html Input Type=Date Value
How To Create Animated User Registration From With Validation Using HTML, CSS And JavaScript
How To Create Animated Registration Form Using HTML, CSS & JavaScriptvHow To Submit The Multiple Rows Form Data With A Single Submit In PHP - Part 1
How To Check HTML Elements Are Properly Nested

New Tutorial Topic on Progrramers

Laravel Tutorial : What Is Laravel?