# date-picker-directive

> This is a date picker that uses a directive which you can place on your html input. Compatible with Angular2+

Latest version **1.0.16** (published 2019-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install date-picker-directive
pnpm add date-picker-directive
yarn add date-picker-directive
bun add date-picker-directive
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.16 |
| Published | 2019-05-24 |
| First published | 2018-05-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 705 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ricardo Lynch |
| Maintainers | lycheecom |
| Keywords | date picker, date range, angular2, angular4, typescript, directive, ng, ng2, ng4 |

## Links

- npm: https://www.npmjs.com/package/date-picker-directive
- Repository: https://github.com/rickolynch/daterangepicker
- Issues: https://github.com/rickolynch/daterangepicker/issues
- npm.io page: https://npm.io/package/date-picker-directive

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 1.0.16 (latest) — 2019-05-24
- 1.0.15 — 2018-12-12
- 1.0.14 — 2018-12-12
- 1.0.13 — 2018-12-12
- 1.0.12 — 2018-12-11
- 1.0.11 — 2018-09-11
- 1.0.10 — 2018-08-29
- 1.0.9 — 2018-06-19
- 1.0.8 — 2018-06-18
- 1.0.7 — 2018-06-13
- 1.0.6 — 2018-06-13
- 1.0.5 — 2018-05-07
- 1.0.4 — 2018-05-04
- 0.0.4 — 2018-05-04
- 0.0.3 — 2018-05-04
- … 1 more at https://npm.io/package/date-picker-directive/versions

## README

# date-picker-directive

Angular date picker

## Description

This is a date picker that uses a directive which you can place on your html input. Compatible with Angular2+

## Installation

*npm i date-picker-directive --save*

## Dependencies
-

## Basic Usage

### 1. Add *DatepickerModule* import to your *@NgModule* like example below
``` typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyTestApp } from './my-test-app';
import { DatePickerModule } from 'date-picker-directive';

@NgModule({
    imports:      [ BrowserModule, DatePickerModule ],
    declarations: [ MyTestApp ],
    bootstrap:    [ MyTestApp ]
})
export class MyTestAppModule {}
```
### 2. Add the directive and additional options to your HTML input
``` html
<input type="text" placeholder="Input Date" date-picker (dateselected)="dateSelected($event)" />
```
### 3. Provide method for date selected event
``` typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  dateval: string = null;
  dateSelected(val) {
    this.dateval = val;
  }
}
```

## Attributes
The following options are available for the date picker

*NB* all date options must be entered in the format *MM/DD/YYYY*

| Option        | Default    | Type  | Description |
| ------------- | ------------- | ----- | ----- |
| singleDatePicker | false | boolean | Determine whether to show a single calendar or show a range calendar |
| minDate | no default value | string | Set earliest date in the past that the calendar can show. |
| maxdate | no default value | string | Set the latest date in the future which the calendar can show |
| startDate | Today | string | Set the start date of the selected range on the calendar. If using singleDatePicker, then this property should be used to set the default selected date on the calendar |
| endDate | Today | string | Set the end date of the selected range on the calendar. |

## Events

### dateselected

This event is triggered when a date is selected. If using a single calendar then it is triggered once a date is clicked and returns a single date "MM/DD/YYYY". When using a range calendar, it is triggered when a default range is selected or the apply button is clicked and returns a date range "MM/DD/YYYY" - "MM/DD/YYYY". 

## Author
* Author: Ricardo Lynch

## License
This project is licensed under the MIT License 

# Keywords
* Date Picker
* Date Range
* Angular2+
* Typescript
* ng4
* ng2
* ng
* Directive

---
_Source: https://npm.io/package/date-picker-directive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._