Skip to content →

Smarter DatePicker in COGNOS Using jQuery UI

Question from COGNOISe:

I have some reports with DatePicker prompts.
How can I create something like custom calendar in Report Studio (using javascript or some cognos techniques)?

Let’s take a look and find out, shall we?

The COGNOS prompt for datepicker is really difficult to work with – so, by getting a little creative, we can bring in a jQuery UI element and use Javascript to make it work gorgeously.

Here’s the general concept. First, we need to create a text input prompt. Second, we need to instantiate an instance of the jQuery UI datepicker, and when the user selects a date, have it fill in the text input prompt. Then, we need to restrict weekends and certain dates.

Simple enough. Here’s my Prompt page after I added everything:

So the HTML items around the text input prompt are pretty self explanatory. The left one is an opening div with an id of “date-input”:

[code]

<!– The HTML Item to the LEFT of the text box –>

<div id="date-input">

[/code]

The right side closes the previous tag and adds the div where the datepicker widget will go:

[code]
<pre>
<!– The HTML Item to the RIGHT of the text box –></pre>
</div><div id="datepicker"></div>

[/code]

Pretty self explanatory. Again, the reason why I wrap the text input box with HTML items is so I can manipulate that value prompt easily with jQuery. Now we’re ready to start with the jQuery magic. I’m going to post the script first then explain the steps.

[code]
<!– This HTML item is next to the header on the prompt page. –>
<link type="text/css" href="/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
<style type="text/css">
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
// Establish Holidays per month
natDays = [
[1, 17, ‘au’], [2, 6, ‘nz’], [3, 17, ‘ie’],
[4, 27, ‘za’], [5, 25, ‘ar’], [6, 6, ‘se’],
[7, 4, ‘us’], [8, 17, ‘id’], [9, 7, ‘br’],
[10, 1, ‘cn’], [11, 22, ‘lb’], [12, 12, ‘ke’]
];

// Iterate through object to find all of the holidays and make sure they’re disabled

function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] – 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + ‘_day’];
}
}
return [true, ”];
}

jQuery.noConflict(); // Necessary!
jQuery(document).ready(function() {

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!
},
beforeShowDay: nationalDays // This calls our function that disables all of the holidays.
});
jQuery("#date-input").hide(); // Bye bye prompt, hello pretty widget.

}); // End Ready
</script>

[/code]

Note this code:

[code]
<pre><style type="text/css">
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
</style>
[/code]

This is how you remove weekends from the datepicker widget. Here’s how mine turned out!


Pretty AND functional! Yay. Don’t forget to add your ?date? filter!

Published in Uncategorized

4 Comments

  1. Anthony Jaraza Anthony Jaraza

    Thanks for the tip. Tried to mimic but unable to get the date-input textbox to show up. I’ve also removed the holiday and weekend check. Here’s my code. Any idea ?

    jQuery.noConflict(); // Necessary!
    jQuery(document).ready(function() {

    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!
    }//,
    //beforeShowDay: nationalDays // This calls our function that disables all of the holidays.
    });
    jQuery(“#date-input”).hide(); // Bye bye prompt, hello pretty widget.

    }); // End Ready

    Cognos Texbox here

    Thanks again for your help.

    • Bertinneau Bertinneau

      Anthony –

      It’s tough to debug these things across installs, but this worked for me:


      jQuery.noConflict(); // Necessary!
      jQuery(document).ready(function() {

      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("#date-input").hide(); // Bye bye prompt, hello pretty widget.

      }); // End Ready

      My suggestion would be to use Firebug to check for errors and to make sure that you are including jQuery UI, jQuery, and the jQuery UI CSS file that you should have locally.

      I reread your comment as well – if you’d like the text box to show up, just remove the jQuery("#date-input").hide(); line 🙂

  2. Anthony Jaraza Anthony Jaraza

    Thanks for the response.

    Yes, I did include the jQueryUI/jQuery/jQuery CSS file but it didn’t seem to appear in the comment.

    I removed the jQuery(“#date-input”).hide(); line and it worked.

    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.

  3. Ani Ani

    Hi Bertinneau,

    Thanks for the information.
    When i ran the report ..i got a blank page..
    I guess this code is not working for me..:(
    below mentioned are my doubts..

    1) “make sure that you are including jQuery UI, jQuery, and the jQuery UI CSS file that you should have locally”
    –where can I get this file and at which path I need to save it.

    2)If I create a textbox prompt Do I need define specific name for prompt and parameter so that this code will work.
    If possible can you share the report ..

    Thanks in advance…

Leave a Reply

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