Original Input

If for some reason you wish you end-user to be able to directly enter a date in the input, set “lockInput” false.

Input Styles

There are a number of input styles, which I will demonstrate below.

Default Display

Note that the button may not display correctly if the input does not have a named ID

"useButton" false with "useFocus"

Setting 'useButton' off will prevent the button decoration (but will currently add a preceding decoration in bootstrap mode).

"buttonIcon"

Setting 'buttonIcon' to a different class will result in a different button ("cog" shown).

"hideContainer" and opening with a link or button

Note, that if you use "hideContainer", "popupPosition" = "window" is pretty much required for jQM.

Also note that "hideContainer" can be used with "useInline" - it just sits on the left edge of the screen and styling it is up to you.

For bootstrap, this feature will also force bootstrapModal on and bootstrapResponsive off

Open Datebox 
<a href="javascript:$(input).datebox('open');" data-role="button">Open Datebox</a>

"hideInput" and "useInline"

DateBox can be displayed right inline with other controls very prettily by combining these two options.

If you are not using CalBox in this manner, you might need to investigate "useImmediate" to make sure that when your user sets a date, that is really what gets sent to the server - particularly if it is in a simple form control.

Fine-Tuning Input styling

"usePlaceholder"

When 'usePlaceholder' is true, it will grab the label of the element and set it as the placeholder. If it is a string, it will use that instead. You may have also noticed that DateBox always tries to use the label as it's header text, when appropriate.