Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ngx-month-year-selector with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@angular/forms/package.json"); // @angular/forms is a peer dependency. var ngxMonthYearSelector = require("ngx-month-year-selector")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-month-year-selector v1.0.0


Month & year selector form control for Angular 6+ with support for ngModel binding, Reactive Forms, and Events. ngx-month-year-selector is independent from any UI frameworks (however should be compatible in any UI framework like Bootstrap, Angular Material, etc).

Getting Started


ngxMonthYearSelector directive accepts the IMonthYearSelectorOptions options model described below as a value and can be used on any HTML input text element.

<input type="text" [ngxMonthYearSelector]="options">

Reactive Forms

<input type="text" [ngxMonthYearSelector]="options" formControlName="myDate">


<input type="text" [ngxMonthYearSelector]="options" [(ngModel)]="myDate">

Event Emitter

<input type="text" [ngxMonthYearSelector] [(ngModel)]="myDate" (dateSelected)="yourFunction($event)">

Options Model

IMonthYearSelectorOptions interface can be imported from the library:

import { IMonthYearSelectorOptions } from 'ngx-month-year-selector';

It contains the following typed properties:

closeOnSelectbooleanIf true, dialog automatically closes after both year & month selection
disabledDates{ year: number, month: number }[]Disabled year/month combinations.
disabledDateRanges[{ year: number, month: number }, { year: number, month: number }][]Disabled date ranges. Array of array objects where first element is start date and second element is end date.
formatstringFormat of input value (ex: 'yyyy-mm yy mmm mmmm')
resetYearOnBlurbooleanReset year in when dropdown closes
yearMaxnumberMaximum year allowed
yearMinnumberMinimum year allowed
yearStartnumberYear to start on when selector dialog opens

Build Library

  • npm run build:lib build angular library
  • npm run watch:lib build angular library & watch for changes


Use the global styling sheet in Angular to style the element as you wish.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free