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

datepicker.php

<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

             $(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

yearRange: "-100:+0"

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

                   $("#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 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

                   $("#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 😀

Advertisements

33 thoughts on “JQuery UI: Datepicker Tutorial

  1. Hey there! This post could not be written any better!
    Reading through this post reminds me of my old room mate!
    He always kept talking about this. I will forward this
    post to him. Fairly certain he will have a good read.
    Thank you for sharing!

  2. Howdy! I realize this is sort off off-topic but I had to ask.

    Does running a well-established blog like yours take a large amount of work?
    I am brand nnew tto running a blog however I do write in my journal daily.
    I’d like to start a blog so I can easily share my own experience and thoughts online.
    Please let me know iff you have any kind of ideas or tips for new aspiring blog
    owners. Thankyou!

  3. I’m really enjoying the design and layout of your blog.

    It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit
    more often. Did you hire out a developer to create your theme?
    Fantastic work!

  4. Hmm it appears like your blog ate my first comment (it was super long) so I guess I’ll just sum it up what I submitted and say,
    I’m thoroughly enjoying your blog. I as well am an aspiring blog
    blogger but I’m still new to the whole thing.
    Do you have any suggestions for novice blog writers?
    I’d really appreciate it.

  5. Great post. I used to be checking constantly this weblog and I’m
    inspired! Extremely useful info particularly the ultimate section 🙂 I maintain such info much.
    I was looking for this certain info for a long time.
    Thank you and good luck.

  6. Thank you very much, It works with me but i have problem with the code when i put it in my Controller and view folders coz am using Codeigniter framework…
    Thanks

  7. $(function() {
    $( “#datepicker” ).datepicker();
    format: ‘dd-mm-yy’
    });

    input->post[‘birthdate’]));

    echo $birthdate;

  8. I’ll right away grab your rss feed as I can not find your e-mail subscription link
    or newsletter service. Do you have any? Please permit
    me recognize so that I may just subscribe. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s