Set Min And Max Date In jQuery Datepicker
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Amruta
In this article we will show you the solution of set min and max date in jQuery datepicker, here we are going to show you example to achieving result with the help of external jqueryui file support.
The external open source jqueryui css and js file supports datepicker function to set minimum and maximum date as per user wish as well we can do it some other feature of datepicker function.
Step By Step Guide On Set Min And Max Date In jQuery Datepicker :-
Here we defined html block with heading h2 tag, note content defined using p tag, input element to set datepicker.
In script block we defined ready() method which is automatically loads program when open browser within that datepicker() defined there we set some priority property such as date format, minimum and maximum date range.
There available to some other property uses also if you want then define that with need value.
<!DOCTYPE html>
<html>
<head>
<title>DATEPICKER MIN AND MAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="Stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script>
$(document).ready(function(){
$("#dt").datepicker({
dateFormat: 'dd/mm/yy',
maxDate:'+4',
minDate:-3
});
});
</script>
</head>
<body>
<h2>DATEPICKER</h2>
<p style="font-size: 1rem;"><i>Min: Current Date + before 3 days</i></p>
<p style="font-size: 1rem;"><i>Max: Current Date + after 4 days</i></p>
<input type="text" id="dt" name="seldt" readonly="readonly">
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Then jqueryui css and js file imported for provide access when define inside script block there related code.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() function, within that we appending datepicker with input elements by specifying id ‘dt’.
- There we defined properties ‘dateFormat, maxDate, minDate’ with respective values ‘dd/mm/yy, +4, -3’.
- It means current date considering as intermediate then we sets starting as before four days respect to current date and last date sets after three dates respect to current date.
- In body block we specified h2 tag with heading ‘DATEPICKER’, using paragraph tag we displayed two notes related datepicker for users verification and input element defined for add datepicker.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to set minimum and maximum dates as per users wish in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we executes this program on browser we can see heading, two instruction, then lastly datepicker element added input box. Users can check specified initial and end date working well and also you can modify it accordingly.
I hope this article on set min and max date in jQuery datepicker helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
