Non-Standard way of collecting dates with jQuery


This past week, I had to implement some functionality for my current project and part of it involved collecting a date from the user. At first glance my mind was set: “Easy! Put a Date Picker in that page and you’re sorted!”. But… Nope… We couldn’t… Why? No idea. Looks like the “standard way of collecting dates” for this particular costumer is having two dropdown boxes and one text box. One dropdown for day, the second one for month and the third one for the Year part of the date. Can’t say that I agree with this approach but what matters at the end of the day is that the work is done and the customer is happy, so how did I solve this? Easy…

Let’s say we have the following input html:

Here, we could do two things: 1) Submit the data as it is and then put the date together in the server-side; 2) Put the date together in the client side so you only submit the date as it should be received by your server-side components. Since I am a strong adept of putting as much effort on the Client side as possible to make it easier for the server to do his job, I chose the latter approach.

So, first thing to do is find a way to merge the dates. For that, I created a simple JavaScript method like this:

//// Handles a datetime by putting together separate parts of the date (dd, mm, yyyy)
function UpdateDateTimeMergedField(dayValue, monthValue, yearValue, mergedDatetimeInputId) {
$("#" + mergedDatetimeInputId).val(yearValue + "-" + monthValue + "-" + dayValue + "T00:00:00");
}

This will make sure that our date is merged. But we should do it as soon as it is changed, so, for that, we need to wire the onchange method of each control to that function. How? Simple. Like this:

function SetDateTimeHandlers(dayInputId, monthInputId, yearInputId, mergedDatetimeInputId) {
var dayInput = $("#" + dayInputId);
var monthInput = $("#" + monthInputId);
var yearInput = $("#" + yearInputId);
var handlerFunction = function () {
UpdateDateTimeMergedField(dayInput.val(), monthInput.val(), yearInput.val(), mergedDatetimeInputId);
};
dayInput.change(handlerFunction);
monthInput.change(handlerFunction);
yearInput.change(handlerFunction);
}

The above function does all the wiring for us. So now we just have to call this function at page load so the handlers are properly set. Use this:

SetDateTimeHandlers("selectDay", "selectMonth", "txtYear", "resultDisplay");

The element resultDisplay is just a simple div I created so we can see the output of the function that does the merging. Note that these functions are reusable, so if you have more than one date to collect on your form, you would just call the above function for each group of date input fields and that’s it!

Yes, that simple! Don’t forget to validate those fields on the client side (using jQuery for instance) and of course you should validate it again on the server side.

Hope this helps some people out there that might have came accross a similar problem. Feel free to use part or all of the code I provided.

The below link contains a zip file with a sample HTML page that contains all the code above working so you could test it.

PlayWithDates

Leave a comment

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