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

import { pgDatePickerModule } from '@pages/components/datepicker/datepicker.module';
@NgModule({
  imports: [pgDatePickerModule,...]
})
export class AppModule(){}

How to use

Basic Select with Search

HTML

<div class="input-group date col-md-8 p-l-0">
  <pg-datepicker></pg-datepicker>
  <div class="input-group-append">
      <span class="input-group-text">
        <i class="fa fa-calendar"></i>
      </span>
  </div>
</div>

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]