Playing with Date Format in Date selector component in Pentaho CDE - Example : Converting 2015-02-04 to 4-Feb-15

In this post, we will see how to customize date input control for default value & for it's format.

Thank you Sam Kumar( A community guy) for asking me to explore this and hope this solution might be useful in your project.

Though, there is a direct property of setting format for date in Date selector , that will not work when you set a default value for date type parameter.

Scenario : 

 Lets say  you have given "yesterday" as default value for date parameter and in Date selector if you give "dd-M-yy" format then you can able to see the selected date in that format BUT for the first time you will not find anything in Date selector because your default parameter value is "yesterday"

Software Setup : 

Pentaho BA Server version : 5.3.0.0.196 ( test server - not stable one)

C-Tools (CDE,CDF,CDA & CGG) : 5.3.0.0.196(5.3) - Formally TRUNK version with 5.3 server

Problem statement : 

Default values like "today", "yesterday", "One week ago", "One month ago" should take 5-Feb-15, 4-Feb-15 and etc format in Date selector when dashboard loads ...

Step by Step Screenshot solution :

1)  Design the lay out for Date label & for Date selector (i.e., Html Objects for label & selector  - lets assume these html objects are Col1 & Col2).

2) Creating Date parameter : parameter name = date_param
    Go to components -> Click on Generic from left side -> Click on Date parameter
   Give default value as "yesterday" ( or today or other from the drop down).

3) Creating Date selector for Date parameter created in Step 2 : Date selector name = date_picker
  *    Components section -> selections -> Date input component
  *    Give parameter(date_param) for listeners & parameter section.
  *    Give html object for this (i.e., Col2 )

4) Test -1 : Default view

5) Now, Converting the format
  * Go to Advanced properties of Date selector (date_picker)
  * Write below code in Post Execution section 


function f(){
       var date1 = Dashboards.getParameterValue("date_param").toString();

    testdate = $.datepicker.formatDate("d-M-y",new Date(date1));

 //alert(testdate);

 document.getElementById('render_date_picker').value=testdate;

}

6) Save the dashboard and test it : Test -2

parameter default value is : yesterday

That's it... We are done

Download Example here :  Click Me

NOTES :

1) From the stack overflow link below , as the CDE is already integrated with jQuery technology we have to use formatDate function for formatting the date. 
2) The code should go in Post Execution section. 
3) render_date_picker ----> render_ is the keyword for which we attach Date input component name. 
4) Code is independent for specific date control as it is going into Date input component's own Post Execution section. 
for example : I have taken another date component and tested..

  5) Find jQuery supported formats using this link https://jqueryui.com/resources/demos/datepicker/date-formats.html

Additional Notes : 

What about Date Range Picker Customization ?

Take 2 parameters : lets say param1_FromDate & param2_ToDate and write below code in "Post Execution" code area of "Date Range Input Component".

function f(){
 var date1 = Dashboards.getParameterValue("param1_FromDate").toString();
 var date2 = Dashboards.getParameterValue("param2_ToDate").toString();

 testdate = $.datepicker.formatDate("d-M-y",new Date(date1))+">"+ $.datepicker.formatDate("d-M-y",new Date(date2));

 alert(testdate);
 document.getElementById('render_date_range_picker').value=testdate;

}
  
Download :  Updated One 

 References : 
1) http://stackoverflow.com/questions/3552461/how-to-format-javascript-date 
2) https://jqueryui.com/resources/demos/datepicker/date-formats.html

R&D links from Sam :-)
3)
http://stackoverflow.com/questions/3552461/how-to-format-javascript-date
4)
http://api.jqueryui.com/datepicker/#option-dateFormat
:-) Sadhakar Pochampalli :-) BI developer :-)