Most UI elements in the Date Picker can be customised through CSS Properties.
In this demo we have set the background to light blue and changed the selected elements to be square (instead of round) with a display of light yellow text on a brown background.
We have also changed the hover colour to gray, the font to Verdana, added a thicker border (3px) and provided a larger cell size of 35px (default is 30).
There are a number of properties in User Interface Options to configure the Date Picker.
In this demo we have set showOutsideDays to
falseand showWeekNumber to
We have changed the dateFormat to
MMM do yyyyto change how dates appear.
And we have configured that 3 buttons should appear at the bottom:
tomorrow,today,yesterdaytogether with alignment and positioning instructions.
Click on the calendar icon in the 'Order Date' Column Quick Filter Bar to see how the Date Picker appears and compare it with the default layout: