Multiple Dates Picker for jQuery UI

IMPORTANT NOTE: I'm not having much time in these days to finish documenting, but I've released a demo for you: http://multidatespickr.sourceforge.net/
All the documentation will be moved, little by little, to the sourceforge page.

Please consider that I've already done important bug fixes but had no chance to upload anything to sourceforge as my job's IP is banned :s
I'll upload the new version this weekend, so check it out :)

I love jQuery UI because it allows me to quickly create administration interfaces without the hassle of writing code for animations and common widgets.
By the way there are times when I find myself in need for a feature that jQuery UI's widgets don't cover, like -for example- the ability to pick multiple dates using the jQuery UI DatePicker calendar widget.

This time I really needed this functionality and thought that it would be easier to learn how to write a jQuery plug-in to extend DatePicker, instead of adopting another javascript tool.

The result is this multiDatesPicker I made. I spent one day to do it, trying to understand how to develop the plugin using best practices and trying to make it work.

It seems stable now, makes just what I needed it to, and mantains all the datepicker events, methods and options, exception made for the "beforeShowDay" event that had to be sacrified in the name of multiple selections (I still hope I can find a way to make it available, but I have to investigate more).

To download it just click here: jquery.ui.multidatespicker.js

How to use it?
Being an extension to jQuery UI DatePicker you need to include both jQuery and jQuery UI (with datepicker module included!) javascript files to your HTML page, and right after that, include MultiDatesPicker.

To apply it to an element, do it the same way as you would do with jQuery UI datepicker, but write multiDatesPicker instead of datepicker:

$(element-or-selector).multiDatesPicker(options-to-initialize-datepicker-and-multidatepicker);

MultiDatesPicker specific options:

• addDates
  Adds an array of dates specified in a string or javascript date object format.
  NOTE: the string format you should pass to multiDatePicker depends on the localization of datepicker, see this page for more infos on how to configure it.

Available methods:

• compareDates( date1, date2 )
  Compares two dates returning 1, 0 or -1 if date2 is greater, equal or smaller than date1 respectively.


• gotDate( date )
  Returns the index of the date in the dates array, or false in case that date is not found.
  


• addDates( dates )
  Adds one or more dates to the calendar.
  The parameter dates can be a string or an array (of strings or javascript date objects).
  


• removeDates( indexes )
  Removes one or more dates from the dates array using their indexes.
  The parameter indexes can be an integer or an array of integers.
  


• toggleDate( date )
  Adds/removes a single date from the calendar.
  
  
• getDates( format )
  Retrives the array of dates associated with the multiDatesPicker in the specified format: "string" (default) for localized string format, or "object" for javascript date object format.

Please comment if you think this plugin is useful for you, or if you have ideas on how to make it better.

Tweetmeme iframe with transparent background

I had to add Tweetmeme button to Aviso Oportuno so that any ad could be promoted thru twitter.


As always, I had problems with IE to display that button correctly using W3C standards. In this particular case I needed the iFrame of the button to be transparent.


Unfortunately Tweetmeme itself is not helping making things easier, but after searching on Google, I found out that IE requires an extra attribute to allow an iFrame to display transparent content: allowTransparency.


The Tweetmeme button is generated by a JavaScript code, so I can't actually hard-code that attribute in the iFrame generated, so the solution is to have another JavaScript piece of code that adds the needed attribute after page loading.


To avoid too many explanations, you could simply grab this piece of code and past within the <head></head> tags in your html page:

<!--[if IE]>
<script type="text/javascript">
   var previousOnload = window.onload;
   window.onload = function() {
      var theframes = document.getElementsByTagName('iframe');
      for(var i = 0; i < theframes.length; i++) {
          theframes[i].setAttribute("allowTransparency","true");
      }
      setTimeout("if(previousOnload) previousOnload();", 1000);
   }
</script>
<![endif]-->

The "previousOnload" stuff it is there to avoid overwriting any other onload function previously declared. In fact, if there is one, it is executed one second (1k miliseconds) after this "iFrame hack".


One last tip: allowTransparency literally allows the iFrame to display transparent content, but doesn't make the content transparent if it is declared to be opaque. This means that the background color of the html and body tags in the iframed page, must be declared as transparent (or at least you should not declare any backgrounds for those elements, so it will be defaulted as transparent).


Hope it helps.

Comincio con la tesina...

...e cerco di finire con l'università!

Ho creato un blog proprio per accompagnare l'elaborazione della monografia.

Il tema è Accessibilità del Web e per vederlo basta andare all'indirizzo: http://web-accessibile.blogspot.com/