How to create HTML DOM Input type date ‘min’ and ‘max’ restriction using JavaScript ?- Example-3 Type Your Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Dynemic minimum and maximum date restriction using JavaScript</title> </head> <body> <p>Example of restricting minimum and maximum date using JavaScript 'Min' attributes value</p> <label for="date">Select Date : </label><input type="date" id="date" > <script> //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); </script> </body> </html> Result
0 comments: