Miss any of our Open RFC calls?Watch the recordings here! »

ember-rl-year-picker

0.2.0 • Public • Published

Ember-rl-year-picker

Ember year picker component.

Build Status

See also:

Demo

Demo avialable here.

Installation

npm install ember-rl-year-picker --save-dev

This addon does not automatically import a stylesheet into your application. Run the following command to generate a stylesheet you can use as a base:

ember generate rl-picker-css

This will create a stylesheet at app/styles/rl-picker/_rl-picker.css. You can include this stylesheet into your application's sass or less files.

Usage

{{rl-year-picker year=yearOfBirth}}

Bind the year property to a property on your controller. Ember's two-way bindings will keep the value updated.

The following properties can be set to customize the year picker:

  • yearPlaceholderText (default: 'Year'): the text displayed on the picker toggle button when the year value is null.
  • flatMode (default: false): when set to true, only the picker is shown (see demo).
  • yearsPerPage (default: 12): the number of years shown on a page.
  • minYear (default: null): the minimum year that can be selected.
  • maxYear (default: null): the maximum year that can be selected.
  • decreaseButtonText (default: '<'): the text on the decrease year button. Set for example to "<i class='fa fa-chevron-left'></i>" to work with Font Awesome.
  • increaseButtonText (default: '>'): the text on the decrease year button. Set for example to "<i class='fa fa-chevron-right'></i>" to work with Font Awesome.
  • previousPageButtonText (default: '<'): the text on the previous page button. Set for example to "<i class='fa fa-chevron-left'></i>" to work with Font Awesome.
  • nextPageButtonText (default: '>'): : the text on the next page button. Set for example to "<i class='fa fa-chevron-right'></i>" to work with Font Awesome.

If you want to set different defaults for all year pickers in your application, extend the component and override the defaults with your own:

// app/components/rl-year-picker.js
import RlYearPickerComponent from 'ember-rl-year-picker/components/rl-year-picker';
 
export default RlYearPickerComponent.extend({
  decreaseButtonText: "<i class='fa fa-chevron-left'></i>",
 
  increaseButtonText: "<i class='fa fa-chevron-right'></i>",
 
  previousPageButtonText: "<i class='fa fa-chevron-left'></i>",
 
  nextPageButtonText: "<i class='fa fa-chevron-right'></i>"
});

Install

npm i ember-rl-year-picker

DownloadsWeekly Downloads

0

Version

0.2.0

License

MIT

Last publish

Collaborators

  • avatar