Pages UI
v5.0.1 - Pages Angular
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
On this page
  • Importing
  • How to use
  • API
  1. Forms

Date Picker

PreviousTypeaheadNextTime Picker

Last updated 6 years ago

pg-datepicker is a fork of 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

<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

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]

Display date format, configuration reference

NG-ZORRO
Moment.js documentation