Pages UI
Search…
Pages UI
v5.0.1 - Pages Angular
Getting Started
Layouts
Routing
Styles
Layout Components
Header
Menu Items
Sidebar
Horizontal Menu
Secondary Sidebar
Quick View
Overlay Search
Directives
Parallax
Retina Image
Bootstrap Components
Forms
Checkbox and Radio
Form Group
Input Helpers
Switch Toggle
Select
Select FX
Typeahead
Date Picker
Time Picker
Quill Editor
File Uploader
UI Components
Progress Bar
List View
Cards
Social Cards
Collapse
Tabs
Tree View
Sliders
Notifications
Tables / Datatables
Maps
Session and other pages
Service
Dashboards
Widgets
Charts
Change log
Powered By
GitBook
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,
month
select only to month,
day
select 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]
​
Forms - Previous
Typeahead
Next - Forms
Time Picker
Last modified
3yr ago
Copy link
Contents
Importing
How to use
API