Insights on Software Development and Architecture

ErionPC's weblog on software development

Tag Archives: javascript

JQuery calendar

I like using the Ajax Control Toolkit in the ASP.NET websites I maintain and I had been using a CalendarExtender for a while to pop up a calendar from watermarked textboxes.
I found out that with the new relase of Mozilla Firefox (4.0.1) my ajax calendar stopped working. I didn’t particularly like the fact that it sent postbacks to the server on date-change anyway, so I thought it was time to look for something different, completely client-side and javascript-based.
This is how I discovered Any+Time™. It’s a Date/time picker based on JQuery which I found was easy to integrate in my projects and flexible enough to be customized and extended. The source code is available so it can be adapted to many different contexts.

This is how it looks in its basic form

date picker

It can be adapted to show just the date picker or just the time picker, or both. It also supports localization. The only prerequiste required is the jquery framework, even in its minimal version.

The Date Picker is composed by the following files:

  • anytime.js (main js file)
  • anytimetz.js (optional: to support localization)
  • anytime.css (presentation)

After including the above files and the jquery file in the HTML you can use the following code to bind Date pickers to your textboxes:

function resetDatePickers() {
    $(document.getElementById("<%= this.myTextBox.ClientID %>")).AnyTime_noPicker();
    $(document.getElementById("<%= this.myTextBox.ClientID %>")).AnyTime_picker({ format: "%d/%m/%Y", labelTitle: "Seleziona la data", labelDayOfMonth: "Giorno", labelMonth: "Mese", labelYear: "Anno", dayAbbreviations: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"], monthAbbreviations: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"], firstDOW: 1 }).removeAttr("disabled");
}

It would be a good idea to call this function after every page postback (ex. inside the Page_Load method in ASP.NET). After this, a click on this.myTextBox will popup a date picker which will change the Text property on any click, obviously without posting back to the server. In the above example I use the Italian localization.

I have also called the function removeAttr("disabled"), because I want to be able to edit the text of my textbox manually and this isn’t possible unless you call this function. I extended anytime.js so that the date/time entered in the textbox is cleared after a keyboard-del or backspace. This is useful because otherwise there is no other way to clear the textbox if you don’t want to enter anything and you’ve just clicked on it.

Another thing to notice is that I called the function AnyTime_noPicker() before calling AnyTime_picker(). I had to do this because if the page posts back and you try using the datepicker inside an ajax update panel without reloading the page, it doesn’t work anymore because the datepicker object doesn’t get destroyed on a postback which partially updates the page.  AnyTime_noPicker() destroys any existing instances of the date picker and makes it possible to re-bind it to the textbox after a postback. The author was kind enough to help me get to this solution very quickly.

This is what I’ve added to anytime.js to clear the text on Delete.

key: function(event) {
   if ( key == /* ... */ ) { /* ... */ }
   // ....
   // My code
   else if ((key == 8) || (key == 27) || (key == 46)) // backspace, escape or delete
   {
      this.inp[0].value = "";
      this.dismiss(null);
   }
   else
      this.showPkr(null);
   // ....
}

For any further details, refer to the original documentation on http://www.ama3.com/anytime/.

This is my extended version of anytime.js https://erionpc.files.wordpress.com/2011/05/anytime.odt. You need to rename anytime.odt to anytime.js after download (wordpress work around).