There many ways the web developers use datepickers to make the users choose their dates easily so datepickers are important and this is where web developers have to select the proper datepicker types there are many types such as simply typing the date in the text box; providing dropdown to select date by each month, year and day; widely used is showing the calendar with wide date range; scrolling datepickers on mobile devices to select the dates, etc. There are a wide variety of datepickers available such as react date pickers, react-datepickers, react-day-pickers, react-widget, vue.js Date pickers, etc. So web developers keep these points in the mind when designing the datepickers so that the user does not get any error while selecting the dates such as developers provide a list of an applicable and limited number of date range and formats, there will be no option for illogical date formats, and also it will not allow any user to enter any other special characters other than the format of the date range is provided.
Another way is using via npm as the first one is done manually so run the below command as:
npm install js-datepicker
So the datepicker() method can also be imported from js-datepicker library and it can be done as follows:
import datepicker from ‘js-datepicker’
Now let us see the syntax of datepicker() method:
(selector, context).datepicker(options) or const p = datepicker (selector, options)
In the above, the syntax datepicker() method takes parameters such as selector and options. The parameter “selector” which can either take string type such as css selector such as “.my-id” or “div” or DOM node such as document.querySelector(‘.my-id’). Another parameter of this method is “options” which is also an optional parameter that holds wide varieties of options such as closeText, currentText, dateFormat, dayNames, and many more.
Now let us consider an example for the creation of datepicker using the above datepicker() method.
<title>Educba Training Institute with JS DatePicker</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
$( "#datepicker" ).datepicker();
<body style = "background-color: cyan;">
<p style ="color:blue;","font-family:courier">Enter Date: <input type = "text" id = "datepicker"></p>
In the above program, we can see in the script tag where we declare datepicker() method under the function section in the above HTML script. So we have to write the above script in notepad and save the file with .html extension and then open this file in “Google chrome” or “Internet Explorer” or any browser and we will get the output as shown in the first screenshot and then when we start entering the date in the input box as shown in the second screenshot, where we can see we have selected today’s date. So in this, we have linked <input> tag directly where the calendar opens automatically and it focuses on the date selected and then clicks on it so it will display on the input field.
As in the above program, we saw a simple datpicker creation that shows a simple calendar on clicking on the input field. But there are many different ways of datepickers used in various web pages such as web pages display even time along with the date, some display multiple-day picker which allows selecting dates that are not in range, highlighting the weekends in the datepicker, display of week numbers, etc.