HOWTO: Datepicker in Prompt & Secure Filter

**pmalves** · 02-12-2008 01:50 PM

I think Prompt & Secure Filter Component is one of the most important ones. It lacks, however, some support for other data types. One I missed particularly was a date picker.

This tutorial shows how to change pentaho in order to use this calendar: http://www.dynarch.com/projects/calendar/ as
the datepicker for a text box. The end result can be parametrized but is something like this:

This are the assumptions I used:

It works over a string
The Prompt Style is "Text Box"
It displays a datepicker popup button for every parameter that starts with "date", eg: dateStart, dateValue
Generates a fixed format string (that can be configured). On my case, it's yyyy-mm-dd

I'm currently using the 1.6.2 svn version , so you may find some differences in the .xsl files. I supply the .diff files to see exactly the changes done (very few).

I supply a zip file with the relevant files; I use the method described here: http://wiki.pentaho.org/display/COM/HOWTO+-+My+(very+big)+pentaho+install+and+setup+tutorial but it should be straightforward to find out what goes where.

If you install this "as is" you will find it is in one of the most beautiful languages in the world, Portuguese

. Don't distress, just edit solution/system/custom/xsl/ParameterFormUtil.xsl and change the line to the language you want:

Code:

<script type="text/javascript" src="/pentaho/js/lang/calendar-pt.js"></script>

.

Also check calendar-setup.js for further customizations. The datepicker is excellent and configurable in many ways (one can even get a date and a time, but that's outside the scope of this tutorial)

Thanks

**BrettThompson** · 02-16-2008 11:39 PM

pmalves,

This is a great contribution. I had posted earlier in this forum for the exact feature you implemented. I believe I asked for a date picker that would "key" on a string parameter that contained "Calendar" in the string name similar to how you key on the "date" prefix.

I had hoped Pentaho would add this feature soon, and if not, I planned on writing the same solution myself when time allowed. I hope Pentaho adds this support formally and in the meantime I will be using yours.

If you are still actively working in it, here are some suggestions I have to make it even better:

Pentaho already has a datepicker control in the WAR's and it is used within the AdHoc query report tool. If you build an ad-hoc report and use the "Orders" data and put a date field in the "filters" area and then try the "add criteria" button, you get the pentaho date picker. It would be nice to have that date picker used to reduce the redunancy of date picker code in the system.
I have added code to the calendar-setup.js so that the text box is set to read only. This way pentaho doesn't stack dump if a user types a non-valid date in the text box. It basically forces the calendar picker to be used and protects the text box. This reduces the need for input validation on the date.

I just added this to the calendar-setup.js in the main setup function.

params.inputField.setAttribute("readOnly","true");

A refinement could be to see if the input field END WITH "ReadOnly" and if so it would set it read only, thus in the xaction file we could just say "dateStart" or "dateStartReadOnly" if we want this on or off.

Thanks,
Brett

**pmalves** · 02-17-2008 07:41 AM

Thanks, nice to see it's useful

I started with that "Calendar" type approach, but the xml didn't get that type info, so I had to use another way.

I didn't notice there was another date picker there, but this one doesn't add relevant size/complexity so I'll keep this one. Since I'm also aware that this is a temporary solution, I'll leave it this way till we have a proper pentaho implementation.

And thanks for the suggestion about the read-only, makes perfect sense

**monagandhi** · 05-14-2008 06:58 PM

I added the datepicker js and css files in my working directory but for some reason, it does not have access to those functions and thus does not render the calendar on the screen. CAn someone please add a step by step description on how to get the datepicker working. It is an extremely important utiliy and would be great to know how to set it up. Greatly appreciate all your help here.

**pmalves** · 05-14-2008 07:28 PM

Are you sure you put it on the right places? Any javascript errors mentioned by the browser would be useful to debug it.

Today I made a few changes in this component so that we don't need the extra calendar anymore: Following Brett's suggestion I'm now using adhoc's calendar (It's even the same version, so why bundle 2?

)

**BrettThompson** · 05-14-2008 09:36 PM

pmalves,

Please do share the modifications you made to use the adhoc calendar!

Thanks,
Brett

**imarti** · 06-30-2008 12:34 PM

Great contribution pmalves!!

It's posible that jscalendar doesn't work propertly on IE 6.0 ?

I'm using spanish languaje on calendar.
Error console's IE show me this error: 'Calendar._TT.DEF_DATE_FORMAT' is null.

Anybody has the same problem ?

I don't have any problem in IE 7.0 and Firefox 3.0

Thanks in advance.

**pmalves** · 06-30-2008 12:40 PM

I'm almost sure that I tested it (and worked) on IE6. I don't recognize that error, but try to look at the setup properties

**Neal Winblad** · 07-17-2008 08:02 PM

The referenced URL http://wiki.pentaho.org/display/COM/HOWTO+-+My+(very+big)+pentaho+install+and+setup+tutorial in this thread does not work. So, there are those of us out here who have downloaded the patch and have no clue as to what to do with it. Can someone help by posting a valid link to this tutorial or by posting new instruction as to what to do with the patch to make the calendar datepicker widget work with Design Studio in the Secure Filter process?