ember-cli-bootstrap-datetimepicker

Date and time picker addon based on bootstrap. It uses bootstrap-datetimepicker and moment.js.

Requirements

• Node.js 8, 10 or 12
• Bootstrap 3
• Ember 3+

Installation

ember install ember-cli-bootstrap-datetimepicker

Demo

For demonstration see bootstrap-datetimepicker

Usage

Basic example:

{{bs-datetimepicker date=myDate}}

Available actions

change

Returns: date, null

Fired when the date is changed.

{{bs-datetimepicker change=(action onChange)}}

hide

Returns: null

Fired when the date picker is hidden.

{{bs-datetimepicker hide=(action onHide)}}

show

Returns: null

Fired when the date picker is shown.

{{bs-datetimepicker show=(action onShow)}}

Available options

allowInputToggle

Default: false

Accepts: boolean

{{bs-datetimepicker date=myDate allowInputToggle=true}}

If true, the picker will show on textbox focus and icon click when used in a button group.

calendarWeeks

Default: false

Accepts: boolean

{{bs-datetimepicker date=myDate calendarWeeks=true}}

Shows the week of the year to the left of first day of the week.

date

Default: null

Accepts: date, moment, string

{{bs-datetimepicker date=myDate}}

Sets the picker date/time.

daysOfWeekDisabled

Default: []

Accepts: array of [number]

{{bs-datetimepicker daysOfWeekDisabled=daysOfWeekDisabled}}

Disables selection of days in the array, e.g. sundays.

disabled

Default: false

Accepts: boolean

{{bs-datetimepicker disabled=disabled}}

Disables the input element.

disabledDates / enabledDates

Default: false

Accepts: array of [date, moment, string]

{{bs-datetimepicker disabledDates=disabledDates}}
{{bs-datetimepicker enabledDates=enabledDates}}

Disables / enables selection of dates in the array, e.g. holidays.

When updating the value, the array should be of type date.

disabledHours / enabledHours

Default: false

Accepts: array of [number]

{{bs-datetimepicker date=myDate disabledHours=disabledHours}}
{{bs-datetimepicker date=myDate enabledHours=enabledHours}}

Disables / enables selection of hours in the array, affecting all days.

extraFormats

Default: false

Accepts: array of [string]

{{bs-datetimepicker date=myDate extraFormats=extraFormats}}

Allows for several input formats to be valid. Accepts an array of valid input moment format options.

focusOnShow

Default: true

Accepts: boolean

{{bs-datetimepicker date=myDate focusOnShow=false}}

If false, the textbox will not be given focus when the picker is shown.

format

Default: false

Accepts: string

{{bs-datetimepicker date=myDate format='MM/DD/YYYY'}}

See momentjs' docs for valid formats. Format also dictates what components are shown, e.g. MM/dd/YYYY will not display the time picker.

icons

Defaults: component defaults

'ember-cli-bootstrap-datetimepicker': {
  icons: {
    next: 'chevron right',
    previous: 'chevron left'
  }
}

Replaces icon classes globally. Supported icons include clear, close, date, down, next, previous, time, today and up. If inner html has to be set (Material Icons), use ::after pseudo selector.

Note: When using only the time picker, pass isTime=true so that the correct icon is displayed.

inline

Defaults: component defaults

{{bs-datetimepicker inline=true}}

locale

Default: moment.locale()

Accepts: string, moment.local('locale')

{{bs-datetimepicker date=myDate locale='de'}}

Use the specified locale for text rendering.

Note: When using localization, add includeLocales to config/environment.js.

Cherry pick locales (optimal)

moment: {
  includeLocales: ['de', 'fr']
}

Include all locales

moment: {
  includeLocales: true
}

maxDate

Default: false

Accepts: date, moment, string

{{bs-datetimepicker date=myDate maxDate=myMaxDate}}

Prevents date/time selections after this date.

minDate

Default: false

Accepts: date, moment, string

{{bs-datetimepicker date=myDate minDate=myMinDate}}

Prevents date/time selections before this date.

openOnFocus

Default: false

Accepts: boolean

{{bs-datetimepicker date=myDate openOnFocus=true}}

Opens the picker on input focus.

showClear

Default: false

Accepts: boolean

{{bs-datetimepicker date=myDate showClear=true}}

Show the Clear button in the icon toolbar. Clicking the Clear button will set the calendar to null.

showClose

Default: false

Accepts: boolean

{{bs-datetimepicker date=myDate showClose=true}}

Show the Close button in the icon toolbar. Clicking the Close button will call hide().

showTodayButton

Default: false

Accepts: boolean

{{bs-datetimepicker date=myDate showTodayButton=true}}

Show the Today button in the icon toolbar. Clicking the Today button will set the calendar view and set the date to now.

sideBySide

Default: false

Accepts: boolean

{{bs-datetimepicker date=myDate sideBySide=true}}

Show calendar and time side by side.

timeZone

Default: ''

Accepts: string

{{bs-datetimepicker date=myDate timeZone='Europe/Berlin'}}

Set timezone.

tooltips

Default: { today: 'Go to today', clear: 'Clear selection', close: 'Close the picker', selectMonth: 'Select Month', prevMonth: 'Previous Month', nextMonth: 'Next Month', selectYear: 'Select Year', prevYear: 'Previous Year', nextYear: 'Next Year', selectDecade: 'Select Decade', prevDecade: 'Previous Decade', nextDecade: 'Next Decade', prevCentury: 'Previous Century', nextCentury: 'Next Century', pickHour: 'Pick Hour', incrementHour: 'Increment Hour', decrementHour: 'Decrement Hour', pickMinute: 'Pick Minute', incrementMinute: 'Increment Minute', decrementMinute: 'Decrement Minute', pickSecond: 'Pick Second', incrementSecond: 'Increment Second', decrementSecond: 'Decrement Second', togglePeriod: 'Toggle Period', selectTime: 'Select Time' }

Accepts: object with one or all of the parameters above

{{bs-datetimepicker date=myDate tooltips=tooltips}}

useCurrent

Default: false

Accepts: boolean, 'year', 'month', 'day', 'hour', 'minute'

{{bs-datetimepicker date=myDate useCurrent='day'}}

If the date is not set, the first time the widget opens will set the date to current moment (if true). Granularity can be specified as a string.

viewDate

Default: false

Accepts: date, moment, string

{{bs-datetimepicker date=myDate viewDate=customDate}}

Pre-set the date / time, allowing to change default time from 12:00 AM.

viewMode

Default: days

Accepts: 'years', 'months', 'days'

{{bs-datetimepicker date=myDate viewMode=false}}

The default view to display when the picker is shown. Note: To limit the picker to selecting, for instance the year and month, use format: MM/YYYY.

widgetParent

Default: null

Accepts: string or jQuery object

{{bs-datetimepicker date=myDate widgetParent='#an-element-id'}}

On picker show, places the widget at the identifier (string) or jQuery object if the element has css position: 'relative'.

widgetPositioning

Default: { horizontal: 'auto', vertical: 'auto' }

Accepts: object with one or all of the parameters above (horizontal: 'auto', 'left', 'right' / vertical: 'auto', 'top', 'bottom')

{{bs-datetimepicker date=myDate widgetPositioning=widgetPositioning}}

Will position widget according to the parameters given in object.

showIcon

Default: true

Accepts: boolean

{{bs-datetimepicker date=myDate showIcon=false}}

Show calendar or time icon after input.

License

MIT License