Skip to content

Latest commit

 

History

History
65 lines (46 loc) · 2.46 KB

README.md

File metadata and controls

65 lines (46 loc) · 2.46 KB
Raw

@ionicx-components/monthpicker

Inspired by ionic-monthpicker

monthpicker-screenshot

Getting Started

  • Install using npm:
npm install @ionicx-components/monthpicker --save

This will install the component that match with latest Angular 4+ version. If you wish use Angular 2/4, point to angular-4.x branch in the install command:

npm install @ionicx-components/monthpicker@angular-4.x --save

Usage

  • Import the module IonicMonthPickerModule to use the component
import { IonicMonthPickerModule } from '@ionicx-components/monthpicker';

@NgModule({
 imports: [
   IonicModule.forRoot(AppComponent)
   IonicMonthPickerModule // Import the module!
 ]
})
export class AppModule {}
  • Use the component into your html template
<ion-monthpicker-trigger 
title="Select a month" lang="en" formControlName="month" cancelLabel="Close" [target]="otherFormControl">
</ion-monthpicker-trigger>

Inputs/Available options

The IonicMonthPickerModulecontains some all parts show a page/modal with the month calendar:

IonicMonthPickerTriggerComponent (Button) => IonicMonthPickerController (Service) => IonicMonthPickerComponent (Page)

INPUTS

Key Type Default Why?
formControlName string null Name of form control, to set the selected month
title string "Select a month" The text to show in the button and the headerbar of the calendar page
text string null The button text that will be changed with the selected month
lang string en The months language. By default, will be displayed months abbreviation in english
monthLabels array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Month labels to display
cancelLabel string "Cancel" The button cancel of the page/modal calendar
container object {type: string, opts?: any} The container type to wrap the calendar component (page, modal...)
target array|object [FormControl, TextInput...] The target(s) object(s) to fill with the selected month
changeBtnTitle boolean true Configure to change the button text or not

PS: You can use all properties of Ionic button component, described in Ionic Button documentation.