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");
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)