JQuery UI: Datepicker Tutorial


Datepicker Tutorial. Datepicker is a mind blowing widget in web 2.0. It is widely used in any modern web that needs a date as the input value. This Datepicker will make sure that the user inputs the correct format date (it can be 20/01/1990,20 January 1990, January 20 1900 and so on) to avoid any error.

JQuery UI provides us this widget for free (thank you for the founder 🙂 ). In this tutorial we will learn how to use Datepicker to be implemented in our web app. As it has many Options, we will only review some Options that i think is mostly used.

First we will do the basic form of datepicker. Here’s the code


Just like usual, we bind the id “date” to the jquery function $(“#date”).datepicker() and whoop the magic happens :D. You should see something like this

Datepicker Tutorial

quite awesome right?

Don’t be easily satisfied. If we look more detail into the datepicker we have created, it will be difficult for everyone to change the year and the month to their birth day as they have to scroll right or left continuously. So what is the solution?, easy enough. Just add 2 Options of the datepicker that are changeMonth and changeYear so now the function is looks like this

Here is the screenshot | datepicker tutorial
datepicker tutorial

Hmm satisfied now? not yet!. Look at the year options of datepicker now. It only has 10 years back and 10 years next from now (2013). This is truly a big mistake hahaa.. 90’s people can’t use this app :D. Just calm down my friends, all we need to do is adding yearRange option.
Say we want to have 100 years back and no year next, we use this piece of code

You can change the range to better suit your application’s requirements. So now our jquery function has 3 Options

datepicker tutorial

Wow 1913, are you gonna use this year? 😛

The last option we will learn in this datepicker tutorial is dateFormat. As you already know, not all countries use the same date format. So we as the developers have to fit it. For date format here’s one of the example

before using dateFormat
datepciker tutorial

after using dateFormat
datepciker tutorial

Okay, after we learnt about datepicker now we can develop web app using this help to better date input.

see you on next cool tutorial 😀

Facebook Comments

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

Halo, perkenalkan saya Agung Setiawan.
Seorang Software Engineer di BukaLapak, penulis buku, blogger, gunpla builder, tech educator.
Simak pemikiran saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *