designing4u.de

Handeling the dates and the leap year with AJAX and jQuery

Almost all web 2.0 platforms lean toward using an existing e-mail as a form of authorization and authentication. Usually you don’t need to use a user name to login or register at a certain site. What they are mostly doing though is the birth date validation. I just encountered a site, which doesn’t allow a registration to the people younger than 25 years old. If you went through the registration process and you are older than 25, your re-registration process might be blocked. If you really want to register though and have enough knowledge you can delete your cookies, restart your router (or any other method depending on how you are connected to internet) and register anyway, however probably 90 percent of users doesn’t have that knowledge.

There are plenty of tools around internet, which can display calendars with the help of JavaScript, however they are not completely clear enough for all people using internet. Therefore for one of my projects I had to provide three drop down fields, which should be able to handle birth date of new registered users. This task would be easy, if each month had the same amount of days. OK, even if every other month would have the same amount of days this task wouldn’t be that difficult, but you cannot forget that February has 28 days and every four years we have a leap year, when February has 29 days. In this example I will show you, how I accomplished this task using the unobtrusive JavaScript, the beauty of AJAX and jQuery (and a little bit help of PHP:).

How to include jQuery libraries into your document you can read in this post. After you’ve done that in the body section you need to include this three fields (year, month, day), which will handle user input.

<label for="year">Year</label> <select name="year" id="year"> <option value=""></option> <option value="1959">1959</option> ... <option value="1986">1986</option> </select> <label for="month">Month</label> <select name="month" id="month" disabled="disabled"> <option value=""></option> <option value="1">January</option> ... <option value="12">December</option> </select> <label for="day">Day</label> <select name="day" id="day" disabled="disabled"> <option value=""></option> </select>

If you don’t feel like copying the drop down for each year you can user “for” loop, which will do the work for you. In our case for year drop down we will have to paste this code:

for($i=1959;$i<=1986;$i++) { echo "<option value=\"$i\">$i</option>"; }

We can actually do the same thing for months drop down, but in this case we will have to save all the months in an array and use “foreach” loop.

$month = array('January','February','March','April','May','June','July','August','September','October','November','December'); $i=1; foreach($month as $months) { echo "<option value=\"$i\">$months</option>"; $i++; }

Easy, isn’t it?:) Let’s start to use some magic to make our example work. As you can notice I disabled month and day fields and will enable them first after we will get any input from user. Let’s take a look at the code, which will enable those fields for us. Don’t forget to put it in the head section of your document.

$(document).ready(function(){ $('#year').change(function(){ $('#month').removeAttr('disabled'); }); });

This simple code will be executed after the DOM is loaded and will trigger the removeAttr function on our drop down with id ‘month’ on onchange event of id element ‘year’. Let’s move further and see what happens, if our user chooses a month.

$(document).ready(function(){ $('#year').change(function(){ $('#month').removeAttr('disabled'); }); $('#month').change(function(){ var leap_year = $('#year').val(); var leap_days = (leap_year%4 == 0) ? 29 : 28; $.ajax({ data:'month='+$(this).val()+'&leap='+leap_days, url:'leap_helper.php', type:'POST', error:function(){ alert('something went wrong'); }, success:function(r){ $('#day').removeAttr('disabled').html(r); } }); }); });

As you can see we trigger a function on onchange event for id element ‘month’. We read the value of the year drop down and save it in as leap variable. We then use modulo operator to check, if the division by four is equal zero. If it is, we assign 29 days to variable leap_days, in other case 28. We then call AJAX function of jQuery and prepare our data string, which we will use to pass the information about the month and the amount of days in leap year to our PHP script. To send the data we will use the POST method. If our script encounters error, we will alert a message, that something went wrong. (In this place you can do, whatever you feel like. For example it would be nice, if you would display a nice error message above the date input fields.) If we will get a success response from our script we will firs remove the disable attribute from the element with id ‘day’ and paste a drop down with the amount of days.

Let’s take a closer look at our PHP file. You need to save it in the same directory and give it a name ‘leap_helper.php’. If you want to use other names or directory structure, you need to change its’ name in jQuery function.

$day_30 = array(4,6,9,11); $day_31 = array(1,3,5,7,8,10,12); $day_28 = array(2); $day = ''; if(in_array($_POST['month'],$day_30)) { for($i=1;$i<31;$i++) { $day .= "<option value=\"$i\">$i</option>\n"; } } elseif(in_array($_POST['month'],$day_31)) { for($i=1;$i<32;$i++) { $day .= "<option value=\"$i\">$i</option>\n"; } } elseif(in_array($_POST['month'],$day_28)) { for($i=1;$i<=$_POST['leap'];$i++) { $day .= "<option value=\"$i\">$i</option>\n"; } } echo $day;

In our PHP file we save three arrays for months, with 30, 31 and 28 or 29 days and initialize our $day variable. After that we perform a simple check, if the month our user choose is in the array of months with different amount of days. If it is, then we create a string with exact amount of days for chosen month. In our last case we use additionally the leap variable to display amount of days in February according to the year chosen by the user.

I hope this short explanation will help you in developing your own application. Obviously to check, if 1644 was a leap year, it wont be enough to divide it by four. For this kind of case you need a little bit more complicated formula. For our case it’s just enough, if you divide by four and pass this value to our PHP script, which will create a string for you. Have fun with this script, and as usually I’m waiting for your responses. Cheers!

This entry was posted on Tuesday, May 13th, 2008 at 10:33 pm and is filed under jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Handeling the dates and the leap year with AJAX and jQuery”

1. Coral Says:
   November 13th, 2008 at 12:53 pm
   
   

   Hi:

   Yeah, this works well if the user selects year->month->day but if for example, they select year(2012)->month(February)->day(29), but then go back and decide to change the year to 2010 it will still have the values February and 29 which will submit wrong values for the year 2010. I have tried from scratch ajax also with or without JQuery and still having trouble with that issue. I suppose you could disable the year option once it is selected or reset everything and set month and day back to default every time a new year is selected…. I’m almost to the point of just using a graphical widget to solve this…

2. admin Says:
   November 13th, 2008 at 1:17 pm
   
   

   Hi Coral,

   yes, you are right, reentering the year does not change the day and it should be take into consideration. You can do it by adding the condition in onchange event:

   if ($(’#day’).attr(’disabled’) != ‘disabled’) {
   $(’#day’).attr(’disabled’, ‘disabled’).html(”);
   }

   This will disable and remove all days from the day drop down again.

3. Coral Says:
   November 20th, 2008 at 2:56 pm
   
   

   Hi, thanks for the reply. But if you add

   $(document).ready(function(){
   $(’#year’).change(function(){
   $(’#month’).removeAttr(’disabled’);
   if ($(’#day’).attr(’disabled’) != ‘disabled’) { // new code
   $(’#day’).attr(’disabled’, ‘disabled’).html(”); //new code
   } //new code

   });
   …
   It submits the correct number of days only if the client reselects the number of days. For, example, if they select year->month->day and then reselect year->month it will not contain the correct value of the day they had previously selected before changing the year again, just an unpopulated dropdown select [.html('')]. I am new to Jquery; so I tried saving the $(#day.selectedIndex) in a var then setting it to that back to the default drop down value and redisplaying back in the day dropdown box, but it’s not working…. Or if I get that day box value back to the default value (which in my case in value=”default”, then the form can validate that and warn the client they must select a day (value= 1 or value = 2 etc).

4. Coral Says:
   November 20th, 2008 at 3:00 pm
   
   

   Correction: I mean it doesn’t set proper day values if client selects year->month->day and then reselects just year and leaves month alone.

5. admin Says:
   November 20th, 2008 at 4:28 pm
   
   

   Yes, you are right, changing the year drop down doesn’t repopulate the month drop down. In the case you just described though:

   “if they select year->month->day and then reselect year->month it will not contain the correct value of the day they had previously selected before changing the year again”

   you did not consider a user selecting a leap year and February 29th and re-selecting a non leap year. In this case you cannot re-populate 29th.

   You can obviously do that by repopulating both of the fields (months and days - every time user changes a year drop down and the day drop down is not disabled) using AJAX and some calculations in PHP. As arguments in your AJAX request you would pass the existing values chosen by a user and check if they validate with a new year. If not repopulate the new fields with changed values. If a user changes the month drop down, you will need to add a check if day drop down is disabled, if not pass the value of the day drop down and check if it validates with the new month. The rest is the same. If you need the code for that, let me know, I will write it.

   I think though, that the best solution for this would be repopulating months and days again. Basically every time a user changes the year, he or she needs to choose the complete date again. To do that you could also add an AJAX request to retrieve the months. I hope this will help you. Let me know.