ember-cli-bootstrap-datepicker editorconfig travis-ci Bower npm

Datepicker component for Ember CLI

3 years after

Ember CLI datepicker add-on

Build Status Ember Observer Score Code Climate

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 :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 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}}

Actions

changeDate

The changeDate action is triggered when the selected date changes. It can be specified like this:

{{bootstrap-datepicker changeDate="changeDateAction"}}

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.

{{bootstrap-datepicker changeMonth="changeMonthAction"}}
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).

{{bootstrap-datepicker clearDate="clearDateAction"}}

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.

{{bootstrap-datepicker focus-in="focusInAction" focus-out="focusOutAction"}}

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.

{{bootstrap-datepicker hide="hideAction" show="showAction"}}

The actions can be handled by a parent component, controller or route:

actions: {
  hideAction() {
    // datepicker is hidden
  },
  showAction() {
    // datepicker is shown
  }
}

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

Related Repositories

TreehouseShow

TreehouseShow

TeamTreeHouse's Weekly show notes ...

awesome-ember

awesome-ember

A curated list of awesome Ember.js things ...

awesome-javascript

awesome-javascript

stop starring this it's just a fork ...

sl-ember-components

sl-ember-components

An Ember CLI Addon that provides a variety of UI components. ...


Top Contributors

soulim octronic jelhan ManuelArno lazybensch Hanastaroth jesenko tszpinda abuiles filipecrosk fklingler HerveSeger mrberggg minimalweb ember-tomster

Releases

-   v0.5.6 zip tar
-   v0.5.5 zip tar
-   v0.5.4 zip tar
-   v0.5.3 zip tar
-   v0.5.2 zip tar
-   v0.5.1 zip tar
-   v0.5.0 zip tar
-   v0.4.0 zip tar
-   v0.3.4 zip tar
-   v0.3.3 zip tar
-   v0.3.2 zip tar
-   v0.3.1 zip tar
-   v0.3.0 zip tar
-   v0.2.0 zip tar
-   v0.1.1 zip tar
-   v0.1.0 zip tar
-   v0.0.7 zip tar
-   v0.0.6 zip tar
-   v0.0.5 zip tar
-   v0.0.4 zip tar
-   v0.0.3 zip tar
-   v0.0.2 zip tar
-   v0.0.1 zip tar