Pages UI
Search…
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
Format
Display date format, configuration reference Moment.js documentation​
String
"YYYY-MM-DD"
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 day
String
"day"

pg-rangepicker

parameter
Instructions
Types of
Defaults
Model
Display date
[Date, Date]
Current date
Placeholder
Input box prompt text
[String, String]
​
Copy link