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

Name	Type	Description
invalidDates	Array[string]	Invalid dates as timestamps
validDates	Array[string]	Valid dates as timestamps
disablePrevDates	Boolean	Disable previous dates by today

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

Name	Description
(dateClicked)	Outputs a string when a day is clicked

Methods

Name	Description
goPrev	Goes back to earlier month
goNext	Goes forward to the next month

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

Name	Description
prev	Replace default prev button with a custom one
next	Replace default next button with a custom one
month	Replace default month title with a custom one

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