ember-cli-bootstrap-datetimepicker v0.9.4
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
2 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago