Theming DateBox - Overview

An overall theme of DateBox is easy - just specify it like any other element. For jQueryMobile DateBox will do it’s best to inherit it’s theme from it’s parent(s) if you don’t specify, finally falling back on ‘a’.

For bootstrap and jQueryUI things work a bit differently - you’ll need to specify themes directly for those elements you wish to change.

An important thing to note is that the theme “names” are a part of a class name. For instance, in bootstrap mode, most themes are set to “primary” - for buttons, this results in the class “btn-primary” being added. There is no limitation to the string length, so you could certainly add additional arbitrary classes. In the example below, the “themeDate” option has been set to “warning annoying-blink”.

There are 3 really, really awful themes included in the jQueryUI css file to show how to be specific enough for your theme to apply.

<input type="text" data-role="datebox" data-datebox-theme-date="warning annoying-blink" data-datebox-mode="calbox">

The results from this are pretty hideous - but, DateBox provides a method in which to theme individual elements of each control, for the look you want.

Shared Themes

These themes tend to appear, based on configuration in all of the display modes.

Theming CalBox

CalBox has the largest number of theme configuration options, as the date limiting options are most useful with this display mode.

Theming DateBox/TimeBox/DurationBox

DateBox, TimeBox, and DurationBox have a small number of theme options.

Theming FlipBox/TimeFlipBox/DurationFlipBox

FlipBox, TimeFlipBox and DurationFlipBox likewise have a small number of theme options.

Theming SlideBox

SlideBox too has a small number of theme options.