1.9.5 • Published 2 years ago
@clmeida/ngxdatepicker v1.9.5
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 | Arraystring | Invalid dates as timestamps |
validDates | Arraystring | 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
1.9.5
2 years ago
1.9.5-beta.2
2 years ago
1.9.5-beta.0
2 years ago
1.9.5-beta.1
2 years ago
1.9.4
3 years ago
1.9.3
3 years ago
1.9.2
3 years ago
1.9.1
3 years ago
1.9.0
3 years ago
1.8.1
3 years ago
1.8.0
4 years ago
1.7.0
4 years ago
1.6.0
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.5.0
4 years ago
1.4.0
4 years ago
1.3.0
4 years ago
1.2.1
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago