The datepickk plugin – A JavaScript date picker
If you need to work with dates in your web projects and need a JavaScript based solution, there are plenty of plug-ins available.
In this tutorial, I am going to show you a cool datepicker plug-in, which is also based on JavaScript with plenty of options. The plug-in name is datepickk and is available to download on GitHub website.
Similarly, if you are working with the Bootstrap framework and need to work with dates, it has no built-in component for that. However, you may use third-party date plug-in; a guide is written here.
Let me start by showing the live demos with code and in the later part, you can see the setup guide to use this plug-in.
An example of datepickk with a button
In this example, the calendar or date picker is visible as you click on the button. The calendar will show the current month/date. See the demo and code by clicking the links below:
See online demo and code
In the code section, you can see how simple it is after including the libraries of the datepickk plug-in.
Clicking on the button will open the modal view of the calendar with the current date highlighted.
The code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="dist/datepickk.min.css"> <script src="dist/datepickk.min.js"></script> </head> <body> <script> var datepicker = new Datepickk(); </script> <button class="orange" style="margin:0 auto;" onclick="datepicker.show();">Click here for date picker</button> </body> </html>
Closing date picker on select
In the above example, the date picker remains open after selecting a date from the calendar. In this example, the calendar will be closed after selecting a date in the calendar.
First, click the button to open the datepicker and then select a date:
Steps for creating datepicker that closes on select:
First of all, create a new Datepickk object:
<script> var datepicker = new Datepickk(); </script>
After that, call the function closeOnSelectDemo at the click event of button:
<button class="btncls" onclick="closeOnSelectDemo()">Click to open date picker</button>
And this is the JS function:
<script> function closeOnSelectDemo(){ datepicker.unselectAll(); datepicker.closeOnSelect = true; console.log(datepicker.closeOnSelect); datepicker.onClose = function(){ datepicker.closeOnSelect = false; datepicker.onClose = null; } datepicker.show(); } </script>
Complete code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="dist/datepickk.min.css"> <script src="dist/datepickk.min.js"></script> <style> .btncls{ background-color:#B80C4D; border: #2e6da4; font-family: Arial, Geneva, Arial, Helvetica, sans-serif; font-size: 15px; color: #fff; letter-spacing: 1px; padding: 8px 12px; font-size: 14px; font-weight: normal; border-radius: 4px; line-height: 1.5; text-decoration:none; } </style> </head> <body> <script> var datepicker = new Datepickk(); </script> <div id="closeOnSelect"> <button class="btncls" onclick="closeOnSelectDemo()">Click to open date picker</button> <script> function closeOnSelectDemo(){ datepicker.unselectAll(); datepicker.closeOnSelect = true; console.log(datepicker.closeOnSelect); datepicker.onClose = function(){ datepicker.closeOnSelect = false; datepicker.onClose = null; } datepicker.show(); } </script> </div> </body> </html>
Closing date picker on click
Rather than closing the date picker after just selecting a date, you may enable the users to first select a date and then click on the “Close” button in the calendar to close the calendar. See the following demonstration with the code:
The code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="dist/datepickk.min.css"> <script src="dist/datepickk.min.js"></script> <style> .btncls{ background-color:#B80C4D; border: #2e6da4; font-family: Arial, Geneva, Arial, Helvetica, sans-serif; font-size: 15px; color: #fff; letter-spacing: 1px; padding: 8px 12px; font-size: 14px; font-weight: normal; border-radius: 4px; line-height: 1.5; text-decoration:none; } </style> </head> <body> <script> var datepicker = new Datepickk(); </script> <div id="closeOnClick"> <button class="btncls" onclick="closeOnClickDemo()">Click to open date picker</button> <script> function closeOnClickDemo(){ datepicker.unselectAll(); datepicker.closeOnClick = false; datepicker.button = 'Close me'; console.log(datepicker.closeOnClick); datepicker.onClose = function(){ datepicker.closeOnClick = true; datepicker.button = null; datepicker.onClose = null; } datepicker.show(); } </script> </div> </body> </html>
You can change the text “Close me” to your choice by changing in the <script> part. e.g.
An example of showing selected value in a textbox field
In above examples, the calendar is shown and the date is selected in different ways like closing the calendar upon date selection or clicking it.
Apparently, the demos are incomplete without showing the selected value in an element like textbox or <p>, <div>, or span element, etc.
In this example, I have used a text box ahead of a button to show the selected date. As you select a date, the selected date will be visible in the textbox:
Following is the JS function used to display the calendar and selected date in the textbox.
<script> function closeOnClickDemo(){ datepicker.unselectAll(); datepicker.closeOnClick = false; datepicker.button = 'Close'; datepicker.onSelect = function(checked){ document.getElementById("datedemo").value = this.toLocaleDateString(); }; datepicker.onClose = function(){ datepicker.closeOnClick = true; datepicker.button = null; datepicker.onClose = null; } datepicker.show(); } </script>
A demo of using this calendar with Bootstrap classes
- In this example, a textbox is created with a date icon ahead.
- As you click the icon, the calendar will open, and the selected date will be shown in the textbox.
- The icon is placed inside the <span> tag. So, at the click event of span, the JS function is called:
Demo online
This is how the function is written to open the datepickk plug-in:
<div class='col-lg-9'> <div class="form-group"> <label for="dtpickerdemo" class="col-sm-2 control-label">Select date</label> <div class='col-sm-4 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" id="seldate"/ > <span class="input-group-addon" > <span class="glyphicon glyphicon-calendar" onclick="closeOnSelectDemo()"></span> </span> </div> </div> </div>
The JS function is the same as in close on select example, except the selected date is shown in the textbox field.
Complete code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="dist/datepickk.min.css"> <script src="dist/datepickk.min.js"></script> </head> <body> <script> var datepicker = new Datepickk(); </script> <div class="container"> <div class="row"> <div class='col-lg-9'> <div class="form-group"> <label for="dtpickerdemo" class="col-sm-2 control-label">Select date</label> <div class='col-sm-4 input-group date' id='dtpickerdemo'> <input type='text' class="form-control" id="seldate"/ > <span class="input-group-addon" > <span class="glyphicon glyphicon-calendar" onclick="closeOnSelectDemo()"></span> </span> </div> </div> </div> </div> </div> <script> function closeOnSelectDemo(){ datepicker.unselectAll(); datepicker.closeOnSelect = true; console.log(datepicker.closeOnSelect); datepicker.onSelect = function(checked){ document.getElementById("seldate").value = this.toLocaleDateString(); }; datepicker.onClose = function(){ datepicker.closeOnSelect = false; datepicker.onClose = null; } datepicker.show(); } </script> </body> </html>
A demo of using in the Bootstrap form
In this demo, I am using a full demo form (sign-up) to demonstrate the JavaScript date plug-in.
The date of birth field uses the icon just like in the above example.
The form fields are assigned custom CSS classes as well.
As you click the icon, the calendar will open in a modal view:
Complete code:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="dist/datepickk.min.css"> <script src="dist/datepickk.min.js"></script> <style> .inputstl { padding: 9px; border: solid 1px #B3FFB3; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #A4FFA4), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #A4FFA4 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } </style> </head> <body> <div class="container"> <h1>Bootstrap date/time demo</h1> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="name1" class="col-sm-2 control-label">Name:</label> <div class="col-sm-5 input-group"> <input type="email" class="form-control inputstl" id="name1" placeholder="Enter Your Full Name"> </div> </div> <div class="form-group"> <label for="gender1" class="col-sm-2 control-label">Gender:</label> <div class="col-sm-2 input-group"> <select class="form-control inputstl" id="gender1"> <option>Male</option> <option>Female</option> </select> </div> </div> <div class="form-group"> <label for="email1" class="col-sm-2 control-label">Email:</label> <div class="col-sm-5 input-group"> <input type="email" class="form-control inputstl" id="email1" placeholder="Enter Email"> </div> </div> <script> var datepicker = new Datepickk(); </script> <div class="form-group"> <label for="dtpickerdemo" class="col-sm-2 control-label">Date of birth:</label> <div class='col-sm-4 input-group date ' id='dtpickerdemo'> <input type='text' class="form-control inputstl" id="dob" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar" onclick="closeOnSelectDemo()"></span> </span> </div> </div> <div class="form-group"> <label for="password1" class="col-sm-2 control-label">Password:</label> <div class="col-sm-3 input-group"> <input type="password" class="form-control inputstl" id="password1" placeholder="Password here"> </div> </div> <div class="form-group"> <label for="address1" class="col-sm-2 control-label">Address:</label> <div class="col-sm-5 input-group"> <input type="email" class="form-control inputstl" id="address1" placeholder="Full Address"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox" class="inputstl"> Remember me </label> </div> </div> </div> <div class="form-group "> <div class="col-sm-offset-2 col-sm-4"> <button type="submit" class="btn btn-lg btn-block btn-success">Create Account</button> </div> </div> </form> </div> <script> function closeOnSelectDemo(){ datepicker.unselectAll(); datepicker.closeOnSelect = true; console.log(datepicker.closeOnSelect); datepicker.onSelect = function(checked){ document.getElementById("dob").value = this.toLocaleDateString(); }; datepicker.onClose = function(){ datepicker.closeOnSelect = false; datepicker.onClose = null; } datepicker.show(); } </script> </body> </html>
Other options in datepickk plug-in
This date JavaScript plug-in has many other options, for instance, showing the specific start date, max date, and minimum date.
It also has an option to display the calendar inline or in a specified container like a <div> element.
To see the complete list, visit the plug-in page here and click on the demo and docs link.
Setting up datepicker plug-in
To use this plug-in at your website, simply include the datepickk.min.css and datepickk.min.js files. You can find these files in the downloaded package’s dist folder.
<link rel=”stylesheet” href=”dist/datepickk.min.css”>
<script src=”dist/datepickk.min.js”></script>
Place these files at the desired location and refer these files in <body> section.