Skip to content
Ember date time picker addon
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon implement updateDisabledDates May 23, 2019
app Support global icon overrides. Closes #12. Jun 27, 2016
blueprints/ember-cli-bootstrap-datetimepicker Cleanup blueprint Mar 19, 2019
config Update dependencies May 13, 2019
tests Cleanup. Document `date` requirement. May 23, 2019
vendor Initial Commit from Ember CLI v1.13.6 Aug 2, 2015
.editorconfig
.ember-cli Update dependencies May 13, 2019
.eslintignore
.eslintrc.js
.gitignore Update dependencies May 13, 2019
.npmignore Update blueprint Jan 29, 2019
.template-lintrc.js
.travis.yml Update dependencies May 13, 2019
.watchmanconfig Update ember-cli Dec 29, 2015
CONTRIBUTING.md Update blueprint Jan 29, 2019
LICENSE.md Drop support for Node 4. Update ember-cli and dependencies. Apr 12, 2018
README.md Cleanup. Document `date` requirement. May 23, 2019
ember-cli-build.js Drop support for Node 4. Update ember-cli and dependencies. Apr 12, 2018
index.js Use `npm` package instead of the repository directly. Closes #65. Mar 19, 2019
package.json Release 0.9.0 May 13, 2019
testem.js Drop node 7, 9. Support node 10. Jul 10, 2018
yarn.lock Update `bootstrap-datetimepicker` dependency. Fixes #66. May 13, 2019

README.md

ember-cli-bootstrap-datetimepicker

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

Requirements

  • Node.js 6, 8 or 10
  • 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.

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.

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

You can’t perform that action at this time.