Date, Date Range

Use Date Range when you need to input a specific time period, either static or dynamic.

Go To:
View Guidelines

Presentation State

Presentation Component

Utilize the bootstrap popover component. Apply the class .presentation-date-range as a hook for the date range popover.

Hover over the example to see the popover.

Last 30 Days to Date

Code Snippet


Last 30 Days to Date

Read Only State

Readonly Component

Apply the class .readonly to the bootstrap class .input-group, add the attribute readonly to the input field and add the attribute disabled to the button.

Readonly with Icon Component

Add the class .w-front-icon to the .input-group. Add icon markup before the input field with the class .input-icon to create an input field with icon.

Code Snippet

Editable State

Editable Component

Add .input-group-addon .btn-info at the end to create the info button.

Editable inside Dialog Component

Tap the calendar button to launch the dialog.

BootstrapDialog 3 Plugin

Dialogs utilize the plugin BootstrapDialog. Learn More

BootstrapDatepicker

Dialogs utilize the plugin BootstrapDatepicker. Learn More

Code Snippet