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