datetime-bootstrap

Lightweight widgets for entering dates and times, themed with bootstrap

datetime-bootstrap is an AngularJS module that provides simple widgets for entering dates and times, with bootstrap theming. Check out the GitHub repository for source code and installation instructions.

Dates

The date-input directive provides a simple widget for entering dates, where the user can either type the date directly, or select it from dropdowns.

Attributes

date

An array of year, month and day. It will always contain a legal date, or an array of null values if the currently entered date is invalid.

Two-way binding is implemented so changes to the widget are immediately reflected in the array, and vice-versa.

currently {{values.date}} undefined clear

config

A JSON object that configures the widget, described below. This only needs to be specified if you would like to deviate from the default configuration.

Configuration

The config object can optionally specify any of the following properties:

within

A string specifying the range of expected dates, so appropriate dropdowns can be provided.

For example, 2 weeks will provide a single dropdown listing the next 14 days, while 2 weeks ago will provide a listing of the previous 14 days.

Large values will result individual dropdowns for day, month and year. So, a good value for entering birthdates would be 140 years ago.

Defaults to undefined, which results in individual dropdowns for day and month, and no dropdown for year

currently {{configs.date.within}} undefined clear

Times

The time-input directive provides a simple widget for entering times, where the user can either type the time directly, or select it from dropdowns.

Attributes

time

An array of hour, minute and second. It will always contain a legal time (in 24 hour format), or an array of null values if the currently entered time is invalid.

Two-way binding is implemented so changes to the widget are immediately reflected in the array, and vice-versa.

currently {{values.time}} undefined clear

config

A JSON object that configures the widget, described below. This only needs to be specified if you would like to deviate from the default configuration.

Configuration

The config object can optionally specify any of the following properties:

showMinutes	`true` if it should be possible to set minutes, otherwise `false`. Defaults to `true`. currently true false
minuteAccuracy	The accuracy with which minutes should be presented in the dropdown. Defaults to `15`, meaning that multiples of 15 are shown. Valid values are 5, 10 and 15. currently `{{configs.time.minuteAccuracy}} undefined` clear
showSeconds	`true` if it should be possible to set seconds, otherwise `false`. Defaults to `false`. currently true false
secondAccuracy	The accuracy with which seconds should be presented in the dropdown. Defaults to `15`, meaning that multiples of 15 are shown. Valid values are 5, 10 and 15. currently `{{configs.time.secondAccuracy}} undefined` clear