Create Things and Build Stuff

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.

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

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

1

2

3

4

5

6

$(document).ready(function(){

$("#date").datepicker({

changeMonth:true,

changeYear:true

});

});//Datepicker Tutorial

Here is the screenshot | 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

1

yearRange:"-100:+0"

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

1

2

3

4

5

$("#date").datepicker({

changeMonth:true,

changeYear:true,

yearRange:"-100:+0"

});// 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

1

2

3

4

5

6

$("#date").datepicker({

changeMonth:true,

changeYear:true,

yearRange:"-100:+0",

dateFormat:"dd MM yy"

});//Datepicker Tutorial

before using dateFormat

after using dateFormat

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