ng-month-picker

ng-month-picker is a simple month picker for angular application.

Features

* Simple layout
* Enable/disable form control
* Can be used as an angular form control
* Customize functionality
* Support for angular version 10
* Change date format

Installation

* npm install ng-month-picker --save

Usage

* import { NgMonthPickerModule } from 'ng-month-picker';

* add NgMonthPickerModule to the imports of your NgModule

``ts
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgMonthPickerModule } from 'ng-month-picker';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
NgMonthPickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

And you are good to go...

Use it in your anywhere in your application

``

``

Example for template-driven form:

``
// your.component.html





Submit



``

Example for reactive form:

``
// your.component.ts
import { FormControl } from '@angular/forms';
export class YourComponent {
infoForm = new FormGroup({
title: new FormControl(''),
currentMonth: new FormControl(null),
});
}

// your.component.html





Submit



``

Customization

You can customize by changing the display format as well as value format.

| Inputs | Are
| ------------- |:-------------|
| displayFormat | Type: string
For changing the display format of date |
| valueFormat | Type: string
For changing the value format of date |
| isReadOnly | Type: boolean
Default: true
Readonly recommended. Disable/Enable the input field|
| showIcon | Type: boolean
Default: true
Show/Hide the calendar icon |

Supported display and value format are listed below. You can use - / . for separating month and year.

dayjs is used behind the scene for formatiing date

| Format | Output | Description
| ------------- |:-------------:|:-------------:|
| YY | 20 | Two-digit year |
| YYYY | 2020 | Four-digit year |
| M | 1-12 | The month, beginning at 1 |
| MM | 01-12 | The month, 2-digits |
| MMM | Jan-Dec | The abbreviated month name |
| MMMM | January-December | The full month name |

Example for changing display format and value format:
`


``