# Date Picker

pg-datepicker is a fork of[ NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) 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

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

## How to use 

Basic Select with Search

{% tabs %}
{% tab title="HTML" %}

```markup
<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>
```

{% endtab %}
{% endtabs %}

## 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](http://momentjs.cn/docs/#/parsing/string-formats/) | 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] |              |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pages.revox.io/angular/forms/date-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.