ember-cli-bootstrap-datepicker

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.

Online demo

Installation

If you are using Ember CLI 0.1.5 and higher, just run 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 :sparkles:

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 Default: false

{{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