This post will elaborate how to create ‘min’ and ‘max’ date restriction to HTML DOM Input type date. How to create HTML DOM Input type date ‘min’ and ‘max’ restriction using JavaScript?’ Pro example with explanation
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

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

2 comments:

  1. Hi to everybody, here everyone is sharing such knowledge, so it’s fastidious to see this site, and I used to visit this blog daily
    data science course
    360DigiTMG

    ReplyDelete
  2. Typography, or the art of selecting and also utilizing fonts and also typefaces, is additionally essential. Web developers denver format, or the ability to incorporate images, messages, web links, and also computer animated photos on an Internet site to produce a pleasing total style, is likewise extremely essential.

    ReplyDelete