Skip to content →

Cognos/jQuery UI Datepicker Revisited

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):

[code]

<link type="text/css" href="/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<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
</script>[/code]

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″ /]

Published in Uncategorized

Comments

Leave a Reply

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