Ember CLI datepicker add-on
The add-on provides you a date input component based on amazing bootstrap-datepicker library. It supports popup and inline mode, and can be used in Ember CLI applications.
It doesn't have any external dependecy except bootstrap-datepicker.
Installation
If you are using Ember CLI 0.2.3 or higher, just run within your project directory:
ember install ember-cli-bootstrap-datepickerIf your Ember CLI version is greater than 0.1.5 and less than 0.2.3, run the following within your project directory:
ember install:addon ember-cli-bootstrap-datepickerWhen your Ember CLI version is below 0.1.5, please run within your project directory:
npm install --save-dev ember-cli-bootstrap-datepicker
ember generate bootstrap-datepickerUsage
Basic example:
Use separate component for inline mode:
The component supports many options of the bootstrap-datepicker library. Feel free to take a look into bootstrap-datepicker docs on Read the Docs for more in-depth information.
Let me show you how to use them ✨
Available options
autoclose
Whether or not to close the datepicker immediately when a date is selected.
Type: Boolean
Default: false
calendarWeeks
Whether or not to show week numbers to the left of week rows.
Type: Boolean
Default: false
clearBtn
If true, displays a “Clear” button at the bottom of the datepicker to clear the input value. If “autoclose” is also set to true, this button will also close the datepicker.
Type: Boolean
Default: false
datesDisabled
Array of date strings or a single date string formatted in the given date format
Type: Array or String
Default: "" or []
daysOfWeekDisabled
Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be
comma-separated. Example: disable weekends: '06' or '0,6' or [0,6].
Type: Array or String
Default: "" or []
endDate
The latest date that may be selected; all later dates will be disabled.
Type: Date or String
Default: Infinity (end of time)
forceParse
Whether or not to force parsing of the input value when the picker is closed. That is, when an invalid date is left in the input field by the user, the picker will forcibly parse that value, and set the input’s value to the new, valid date, conforming to the given format.
Type: Boolean
Default: true
format
The date format, combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.
- d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05.
- D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday.
- m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07.
- M, MM: Abbreviated and full month names, respectively. Eg, Jan, January
- yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.
Type: String
Default: 'mm/dd/yyyy'
keyboardNavigation
Whether or not to allow date navigation by arrow keys.
Type: Boolean
Default: true
language
The IETF code (eg “en” for English, “pt-BR” for Brazilian Portuguese) of the language to use for month and day names. These will also be used as the input’s value (and subsequently sent to the server in the case of form submissions). If a full code (eg “de-DE”) is supplied the picker will first check for an “de-DE” language and if not found will fallback and check for a “de” language. If an unknown language code is given, English will be used.
When you need another language, you should import a locale file using your Brocfile.js. Just import bower_components/bootstrap-datepicker/js/locales/bootstrap-datepicker.<LANGUAGE_CODE>.js, e.g.:
// Brocfile.js
app.import('bower_components/bootstrap-datepicker/js/locales/bootstrap-datepicker.de.js');Type: String
Default: 'en'
minViewMode
Set a minimum limit for the view mode. Accepts: “days” or 0, “months” or 1, “years” or 2, “decades” or 3, and “centuries” or 4. Gives the ability to pick only a month, a year or a decade. The day is set to the 1st for “months”, and the month is set to January for “years”, the year is set to the first year from the decade for “decades”, and the year is set to the first from the millennium for “centuries”.
Type: Number or String
Default: 0 or 'days'
orientation
A space-separated string consisting of one or two of “left” or “right”, “top” or “bottom”, and “auto” (may be omitted); for example, “top left”, “bottom” (horizontal orientation will default to “auto”), “right” (vertical orientation will default to “auto”), “auto top”. Allows for fixed placement of the picker popup.
“orientation” refers to the location of the picker popup’s “anchor”; you can also think of it as the location of the trigger element (input, component, etc) relative to the picker.
“auto” triggers “smart orientation” of the picker. Horizontal orientation will default to “left” and left offset will be tweaked to keep the picker inside the browser viewport; vertical orientation will simply choose “top” or “bottom”, whichever will show more of the picker in the viewport.
Type: String
Default: 'auto'
startDate
The earliest date that may be selected; all earlier dates will be disabled.
Type: Date or String
Default: -Infinity (beginning of time)
startView
The view that the datepicker should show when it is opened. Accepts values of 0 or “month” for month view (the default), 1 or “year” for the 12-month overview, 2 or “decade” for the 10-year overview, 3 or “century” for the 10-decade overview, and 4 or “millennium” for the 10-century overview. Useful for date-of-birth datepickers.
Type: Number or String
Default: 0 or 'month'
todayBtn
If true or “linked”, displays a “Today” button at the bottom of the datepicker to select the current date. If true, the “Today” button will only move the current date into view; if “linked”, the current date will also be selected.
Type: Boolean or String
Default: false
todayHighlight
If true, highlights the current date.
Type: Boolean
Default: false
weekStart
Day of the week start. 0 (Sunday) to 6 (Saturday)
Type: Number
Default: 0 (Sunday)
Actions
changeDate
The changeDate action is triggered when the selected date changes. It can be specified like this:
The action can be handled by a parent component, controller or route:
actions: {
changeDateAction(date) {
// do sth with the new date
}
}changeMonth
The changeMonth action is triggered when the view month changes (e.g. user click on "prev"/"next" buttons). Action called has new view date as first argument.
actions: {
changeDateAction(date) {
// do sth with the new view date
}
}clearDate
The clearDate action is triggered when the date is cleared (e.g. when the "clear" button is clicked).
The action can be handled by a parent component, controller or route:
actions: {
clearDateAction() {
// do sth
}
}focus-in & focus-out
The focus-in and focus-out actions are triggered when the respective focus events occur on the input field.
The actions can be handled by a parent component, controller or route:
actions: {
focusInAction(component, event) {
// handle event
},
focusOutAction(component, event) {
// handle event
}
}hide & show
The hide and show actions are triggered when the datepicker is either hidden or displayed.
The actions can be handled by a parent component, controller or route:
actions: {
hideAction() {
// datepicker is hidden
},
showAction() {
// datepicker is shown
}
}Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
Credits
The add-on is based on bootstrap-datepicker.