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!