Ngxdatepicker

Custom Datepicker for Angular 8+ applications.

Demo.

Getting Started

Install through npm:

npm i @clmeida/ngxdatepicker --save

Include its module in your app.module.ts file:

import { NgxdatepickerModule } from "@clmeida/ngxdatepicker";
@NgModule({
  imports: [NgxdatepickerModule],
})
export class AppModule {}

Add the component in your application:

<dd-ngxdatepicker
  (dateClicked)="myComponentVariable = $event"
  name="date"
  [(ngModel)]="date"
></dd-ngxdatepicker>

It’s not required to use both dateClicked and ngModel together, you can use either one of them.

API

Properties

Example

import { ViewChild } from "@angular/core";
import * as moment from "moment";
export class AppComponent implements OnInit {
    invalidDates: string[] = [];
    ngOnInit() {
        const tomorrow = moment().add(1, 'days').format();
        const someDayOfNextMonth = moment().add(1, 'month').format();
        this.invalidDates.push(tomorrow);
        this.invalidDates.push(someDayOfNextMonth);
    }
}

<dd-ngxdatepicker #datepicker 
    name="date" 
    [(ngModel)]="date" 
    [invalidDates]="invalidDates"
    [disablePrevDates]="true">
</dd-ngxdatepicker>

Events

Methods

Example

import { ViewChild } from "@angular/core";
import * as moment from "moment";
export class AppComponent {
  @ViewChild("datepicker") datepicker: any;
  date: any = moment("25/12/2020", "DD/MM/YYYY").format();
}

<dd-ngxdatepicker #datepicker name="date" [(ngModel)]="date"></dd-ngxdatepicker>
<button type="button" (click)="datepicker?.goPrev()">
  My custom prev Button
</button>
<button type="button" (click)="datepicker?.goNext()">
  My custom next Button
</button>

Slots

Example

<dd-ngxdatepicker #datepicker name="date" [(ngModel)]="date">
  <button type="button" (click)="datepicker?.goPrev()" prev>Custom Prev</button>
  <button type="button" (click)="datepicker?.goNext()" next>Custom Next</button>
  <strong month>{{ datepicker.current | date: "MM yyyy" }}</strong>
</dd-ngxdatepicker>

Style

Every time you select a day a class named selected is bound to that element.

I18n

Since this module works with moment.js you can set up its locale globally in your application:

app.module.ts

// ... imports
import * as moment from "moment";
moment.locale("pt-BR");

License

MIT