What is the easiest way to create a Datepicker for a website? Solution: See this jQuery Datepicker Using JqueryUI, Simple program for Pick Date With JavaScript Library.
I am sure that, You have seen date picker in multiple fields on multiple websites. In sign up form, we have to select our DOB. We click on DOB choose section then a calendar appears, and we select date month and year. This is an example of datepicker, also many fields we have to provide the date they are also in this section.
One of my visitors asks me to create a date picker & post. Today I am posting the easiest way to make a date picker. Previously I shared calendar using HTML CSS & JavaScript, that time I did not use any library. But this time I am using jQuery & jQueryUI because this we can create the whole program in a few lines of codes.
If we create this program using the only jquery, then it will be very complicated and hard. I have also created a datepicker without jqueryUI If you want I can post that. This is true, libraries make our work simple. I don’t have a separate category for jQuery that’s why I am putting this in JavaScript section. Also, a reason jQuery is a JS library.
If you are thinking now how this program actually is, then see the preview given below.
Preview Of JqueryUI Pick Date
See this video preview to getting an idea of how this date picker looks like.
Now you can see this visually. If you like this, then get the source code of its.
You May Also Like:
- JavaScript Scroll To Top
- Split Image Using JavaScript HTML CSS
- Text Animate On Scroll
- Animated Search Box
jQuery Datepicker Source Code
Before sharing source code, let’s talk about this. As you know I used Jquery UI to creating this datepicker. As you can see on the preview the whole stying is by default, because I linked a jqueryUI theme not used CSS. I used CSS only for background color and text style. If you want a different kind of datepicker you can use another jquery UI theme.
The whole program is very simple just link jquery, jquery UI, & jqueryUI theme on the <head> section. Then create an input field with an ID, that will look like this: <input type = "text" id = "datepicker-wdt">. You can choose your own ID name. After that, just put a single JS code.
|
1 2 3 |
$(function() { $( "#datepicker-wdt" ).datepicker(); }); |
That is the whole process. As you can see in the preview with the opening index file we can see the calendar also. But by default we have to click on input then calendar will appear. For this just put another line of code: $( "#datepicker-wdt" ).datepicker("show"); – Very simple.
For creating this program you have to create only 2 files. One for HTML and one for CSS, you can also skip CSS because this is for styling only text and background. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset = "utf-8"> <title>jQuery UI Datepicker | Webdevtrick.com</title> <link href="style.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet"> <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> <script> $(function() { $( "#datepicker-wdt" ).datepicker(); $( "#datepicker-wdt" ).datepicker("show"); }); </script> </head> <body> <h1>jQuery UI Datepicker</h1> <p>Enter Date: <input type = "text" id = "datepicker-wdt"></p> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body { background-color: #EFEFEF; margin-top: 15%; margin-left: 40%; font-family: 'Squada One', cursive; } input { height:30px; border-radius:5px; background:#333; color: white; padding: 5px; } p { font-size: 20pt; } |
That’s It. You have successfully created a jQuery datepicker with JqueryUI. In other words, date picker using JavaScript library. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
suggest me for dd/mm/yyyy format
use this
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();Will this code could pick multiple dates (select a date range) ?
$(function() {
var date = $(‘#datepicker’).datepicker({ dateFormat: ‘dd-mm-yy’ }).val();
$( “#datepicker-wdt” ).datepicker();
Should var date … placed properly Not getting results
$( “#datepicker-wdt” ).datepicker({ dateFormat: ‘dd-mm-yy’ });
Working properly
Yes, you have to change ID name also then it will work
Who uses jQuery UI anymore nowadays? Wait, who uses jQuery nowadays? There are capable vanilla JS alternatives that weigh a lot less and have better performance. For example flatpickr.js.org
Why did Google suggest this article to me? LOL
Hey Bro, many peoples even don’t know jquery properly. & This blog is for beginners, If you are a pro then congrats.
Wasn’t trying to be arrogant or anything. Just sharing what I know, so everybody gets better.
Thank you for your suggestion.
Above code imports jqueryUI. That is mandatory?
Yes, because this is fully based on JqueryUI
is it possible to that orange color on the header? if yes then how ?
put background-color in the .ui-datepicker class
which class i will be calling because on your html your input has only the id not the class ?
.ui-datepicker
So how do i change the yellowish color on the calendar head and calendar pick to blue?
nvm, found it already