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