Pages UI
Search…
v5.0.1 - Pages Angular
Directives
Forms
Service
Date Picker
pg-datepicker is a fork of NG-ZORRO implementation of Date / Date Range Picker Initial credits go to the author
Importing
First import it to your app module or any submodule as you wish
1
import { pgDatePickerModule } from '@pages/components/datepicker/datepicker.module';
2
@NgModule({
3
imports: [pgDatePickerModule,...]
4
})
5
export class AppModule(){}
Copied!
How to use
Basic Select with Search
HTML
1
<div class="input-group date col-md-8 p-l-0">
2
<pg-datepicker></pg-datepicker>
3
<div class="input-group-append">
4
<span class="input-group-text">
5
<i class="fa fa-calendar"></i>
6
</span>
7
</div>
8
</div>
Copied!
API
The date class component includes the following three forms.
- pg-datepicker
- pg-datepicker [Mode='month']
- pg-rangepicker
Common API
parameter
Instructions
Types of
Defaults
Disabled
Disabled
boolean
false
AllowClear
Whether to show clear button
boolean
true
ShowTime
Time options, see nz-timepicker parameter
boolean | TimePickerInnerComponent
null
DisabledDate
A callback function to disable the date, returning true to disable this date
(Date) => boolean
​
pg-datepicker
parameter
Instructions
Types of
Defaults
Model
Display date
Date
Current date
Placeholder
Input box prompt text
String
​
Mode
Selector mode,
monthselect only to month, dayselect to dayString
"day"
pg-rangepicker
parameter
Instructions
Types of
Defaults
Model
Display date
[Date, Date]
Current date
Placeholder
Input box prompt text
[String, String]
​
Last modified 3yr ago
Copy link