jQuery UI Datepicker

There is a very useful and easy JavaScript framework called jQuery. I guess many web developers use or know it at least.  It has a lot of plugins, especially UI. One of them is jQuery UI datepicker – a very nice control to pick a date into a text-box. While working with the control you might face questions which I had faced.


#1 How to find out that an element was already initialized as a date-picker?

Fortunately when you initialize an element with datepicker functional it is marked with a css class name. To find out this name dynamically one can use the jQuery.datepicker.markerClassName property. Let’s see by example:

if ($selector.hasClass(jQuery.datepicker.markerClassName)) {

#2 How to bind datepicker’s custom events after it has been initialized?

It was not so trivial for me as it should be at the first glance. Because I called datepicker() method with json settings making it to re-init again. Not so good so far. To do it properly use ‘options’ API. By example here:

 $selector.datepicker('option', 'onSelect',
                        function(dateText, sender) {
                            console.log('Selected date: ' + dateText);
                            console.log('sent from: ' + sender.attr('name'));
This entry was posted in Javascript, jQuery. Bookmark the permalink.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s