Customization of Date Input Component in pentaho CDE

Hello Guys,

In this post i would like to explain How to Customziation look and feel of the select date input component.

Here i am just overriding the by default css to my own css file.

Step 1:Create the external css file instead of chnaging by deafult file.

Step 2: css code
#render_date /* date here date input component name you can replace by your own name*/
{
border:1px solid #808000!important;
color:#BDB76B!important;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
   color:#BDB76B !important;
   border:1px solid #EEE8AA!important;
}
.ui-widget-header {
  
   border: 6px solid #EEE8AA!important;
    background: none repeat scroll 0 0 #808000 !important;
}
.ui-datepicker th{
   background-color: #BDB76B!important;
}
#ui-datepicker-div{
   border:1px solid #EEE8AA!important;
}
.ui-datepicker-calendar{
   background-color:#EEE8AA!important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
   border: 1px solid #BDB76B!important;
   color: #FFFFFF!important;
   font-weight: bold;
    background: none repeat scroll 0 0 #808000 !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  
   background: none repeat scroll 0 0 #F0E68C;
   color:#362B36;
   border: 1px solid  #BDB76B;
}
 
Step 3: Add that file in your CDE Dashboard.


Result:   By Default    

 

    
 After Customization :

You can change the color code as per your requirement.

Hope this post helps someone and feel free to give comments and suggestion

Sumit Bansal
BI Developer