fklingler / ember-cli-bootstrap-datepicker

Datepicker component for Ember CLI

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.

Online demo

Installation

If you are using Ember CLI 0.2.3 or higher, just run within your project directory:

ember install ember-cli-bootstrap-datepicker

If 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-datepicker

When 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-datepicker

Usage

Basic example:

{{bootstrap-datepicker value=expiresAt}}

Use separate component for inline mode:

{{bootstrap-datepicker-inline value=expiresAt}}

The component supports many options of the bootstrap-datepicker library. Let me show you how to use them ✨

Available options

autoclose

Type: Boolean Default: false

{{bootstrap-datepicker value=expiresAt autoclose=true}}

calendarWeeks

Type: Boolean Default: false

{{bootstrap-datepicker value=expiresAt calendarWeeks=true}}

clearBtn

Type: Boolean Default: false

{{bootstrap-datepicker value=expiresAt clearBtn=true}}

daysOfWeekDisabled

Type: Array or String Default: "" or []

{{bootstrap-datepicker value=expiresAt daysOfWeekDisabled="1,2"}}

endDate

Type: Date or String Default: Infinity (end of time)

{{bootstrap-datepicker value=expiresAt endDate="01/01/2018"}}

forceParse

Type: Boolean Default: true

{{bootstrap-datepicker value=expiresAt forceParse=false}}

format

Type: String Default: 'mm/dd/yyyy'

{{bootstrap-datepicker value=expiresAt format="dd.mm.yy"}}

keyboardNavigation

Type: Boolean Default: true

{{bootstrap-datepicker value=expiresAt keyboardNavigation=false}}

language

Type: String Default: 'en'

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');

{{! somewhere in template }}
{{bootstrap-datepicker value=expiresAt language="de"}}

minViewMode

Type: Number or String Default: 0 or 'days'

{{bootstrap-datepicker value=expiresAt minViewMode="months"}}

orientation

Type: String Default: 'auto'

{{bootstrap-datepicker value=expiresAt orientation="right"}}

startDate

Type: Date or String Default: -Infinity (beginning of time)

{{bootstrap-datepicker value=expiresAt startDate="01/01/2014"}}

startView

Type: Number or String Default: 0 or 'month'

{{bootstrap-datepicker value=expiresAt startView="decade"}}

todayBtn

Type: Boolean or String Default: false

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. More...

{{bootstrap-datepicker value=expiresAt todayBtn=true}}

todayHighlight

Type: Boolean Default: false

{{bootstrap-datepicker value=expiresAt todayHighlight=true}}

weekStart

Type: Number Default: 0 (Sunday)

{{bootstrap-datepicker value=expiresAt weekStart=1}}

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

Credits

The add-on is based on bootstrap-datepicker.

License

MIT License