I had an interesting question in the comments regarding the Datepicker widget I incorporated before.

Here’s the problem:

The problem that I face now is that the Calendar UI always display before and after a selection is made.

This wasn’t the case in the jQuery example.

Anyway, thanks again for your help.

I did notice that when testing the widget out, and a good point is made – why don’t we fade the calendar in and out? This is a pretty simple change to the code. Here it is (explanation inline):

<link type="text/css" href="/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript"
<script type="text/javascript"
<script type="text/javascript">
jQuery.noConflict(); // Necessary!
jQuery(document).ready(function() {
jQuery("#datepicker").hide(); // Hide the datepicker widget

jQuery("#date-input input").focus(function() { // When the input field takes focus, call this function
jQuery("#datepicker").fadeIn('fast'); // Bring it in quick

jQuery("#datepicker").datepicker({ // Establish the datepicker
onSelect: function(dateText, inst) { // 1. When you select something, what should happen?
jQuery("#date-input input").val(dateText); // 2. Take the selection and put it into the prompt!
jQuery("#datepicker").fadeOut('fast'); // 3. After the selection, hide the prompt again.

}); // End Ready

This, in its ugliest form, achieves the fade in and out on the prompt. Stay tuned for an optimization to the post using caching to speed up the process a little bit, and make it a little more maintainable.

[kml_flashembed movie=”http://nicbertino.com/wp-content/uploads/2011/04/2011-04-05_13513.swf” height=”300″ width=”500″ /]