Ember-rl-month-picker

Ember month picker component.

See also:

• ember-rl-year-picker
• ember-rl-week-picker

Demo

Demo available here.

Installation

npm install ember-rl-month-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 (you may need to update the extension to .scss or .less respectively).

Usage

{{rl-month-picker year=yearOfBirth monthNumber=monthOfBirth}}

<!-- You can also use a month string instead of a year and month number -->
{{rl-month-picker month="2015-02"}}

Bind the year and monthNumber (1-12 are valid values) properties to properties on your controller. Ember's two-way bindings will keep the value updated. If you don't need the year and month number separately, you can also bind a string to the month property, formatted as year-monthNumber (e.g. 2015-02 for February 2015).

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

• monthPlaceholderText (default: 'Month'): the text displayed on the picker toggle button when the monthNumber value is null.
• flatMode (default: false): when set to true, only the picker is shown (see demo).
• monthLabels (default: 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'): the labels used for the months, separated by commas, or bound to an Ember property containing an array or strings.
• minMonth (default: null): the minimum month that can be selected. Takes a string formatted as year-monthNumber (e.g. 2015-02 for February 2015).
• maxMonth (default: null): the maximum month that can be selected. Takes a string formatted as year-monthNumber (e.g. 2015-02 for February 2015).
• yearsPerPage (default: 12): the number of years shown on a page.
• 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 month pickers in your application, extend the component and override the defaults with your own:

// app/components/rl-month-picker.js
import RlMonthPickerComponent from 'ember-rl-month-picker/components/rl-month-picker';

export default RlMonthPickerComponent.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>"
});

Ember-rl-month-picker Changelog

0.2.0

Upgrades templates syntax to the new HTML-bars syntax, which means as of this version Ember 1.12 or higher is required.

0.1.0

Added minMonth and maxMonth options for constraining the months that can be selected by the user. Some css changes may be required if you want to use this functionality. Months that are not within the valid range get an out-of-range class added. You may want to rerun the css generator:

ember generate rl-picker-css

You are now also allowed to bind a month string (year-monthNumber, e.g. "2015-02") to the month property, instead of binding to year and monthNumber separately.