Thursday, January 8, 2015

JQuery UI: Datepicker Tutorial

8:02 AM  Unknown  No comments



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
datepicker.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
   <head>
       <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
       <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
       <link rel="stylesheet" type="text/css"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
       <script type="text/javascript">
               $(document).ready(function(){
                     $("#date").datepicker();
               });
       </script>
   </head>
   <body>
        <form method="post" action="">
               Date of Birth : <input type="text" name="date" id="date"/>
        </form>
   </body>
</html>
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
        });
  });
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? :P
The last option we will learn 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"
  });
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 :D

Referensi : http://phpseason.wordpress.com/2013/02/14/jquery-ui-datepicker-tutorial/

Posted in: ,

0 comments:

Post a Comment