# custom-a1qa-ng2-datepicker

> Angular 2+ Simple and minimal datepicker component

Latest version **1.0.7** (published 2018-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install custom-a1qa-ng2-datepicker
pnpm add custom-a1qa-ng2-datepicker
yarn add custom-a1qa-ng2-datepicker
bun add custom-a1qa-ng2-datepicker
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2018-05-08 |
| First published | 2018-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 546.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 310 |
| Maintainers | vlad.kostyukevich |

## Links

- npm: https://www.npmjs.com/package/custom-a1qa-ng2-datepicker
- Repository: https://github.com/bleenco/ng2-datepicker
- Homepage: https://github.com/bleenco/ng2-datepicker#readme
- Issues: https://github.com/bleenco/ng2-datepicker/issues
- npm.io page: https://npm.io/package/custom-a1qa-ng2-datepicker

## Dependencies (3)

- [date-fns](https://npm.io/package/date-fns.md) ^1.29.0
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [ngx-slimscroll](https://npm.io/package/ngx-slimscroll.md) ^3.6.1

## Recent versions

- 1.0.7 (latest) — 2018-05-08
- 1.0.6 — 2018-04-05
- 1.0.5 — 2018-02-12
- 1.0.4 — 2018-02-01
- 1.0.3 — 2018-02-01
- 1.0.2 — 2018-02-01
- 1.0.1 — 2018-02-01
- 1.0.0 — 2018-02-01

## README

# ng2-datepicker

Angular 2+ Simple and minimal datepicker component

Forked From:

[![AbstruseCI](https://ci.bleenco.io/badge/6)](https://ci.bleenco.io/repo/6)

<p align="center">
  <img src="https://user-images.githubusercontent.com/1796022/30781709-624eddc2-a124-11e7-88b7-537af535c23b.png" width="300">
</p>

<p align="center">
  <img src="https://user-images.githubusercontent.com/1796022/30781711-666e5e5a-a124-11e7-9077-59e8eb7d6b03.png" width="300">
</p>

Allow Empty function was added, UI was changed

## Installation

1. Install package from `npm`.

```sh
npm install ng2-datepicker --save
```

2. Include NgDatepickerModule into your application.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgDatepickerModule } from 'ng2-datepicker';

@NgModule({
  imports: [
    BrowserModule,
    NgDatepickerModule
  ],
  declarations: [ AppComponent ],
  exports: [ AppComponent ]
})
export class AppModule {}
```

## Example
```html
  <ng-datepicker [(ngModel)]="date" />
```

## Additional attributes
|Name|Type|Default|Description|
| --- | --- | --- | --- |
|`headless`|boolean|`false`|Disable datepicker's input|
|`isOpened`|boolean|`false`|Show or hide datepicker|
|`position`|string|`bottom-right`|Dropdown position (`bottom-left`, `bottom-right`, `top-left`, `top-right`)|

## Options
```ts
import { DatepickerOptions } from 'ng2-datepicker';
import * as frLocale from 'date-fns/locale/fr';

options: DatepickerOptions = {
  minYear: 1970,
  maxYear: 2030,
  displayFormat: 'MMM D[,] YYYY',
  barTitleFormat: 'MMMM YYYY',
  dayNamesFormat: 'dd',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: frLocale,
  minDate: new Date(Date.now()), // Minimal selectable date
  maxDate: new Date(Date.now()),  // Maximal selectable date
  barTitleIfEmpty: 'Click to select a date',
  allowEmpty
};
```

For available `format` options check out [here](https://date-fns.org/docs/format).

In case you want to initialize with an empty value, just assign null to the model attribute you're storing the date and you can customize the message in the bar with the property `barTitleIfEmpty`.

## Run Included Demo

1. Clone this repository

```sh
git clone https://github.com/jkuri/ng2-datepicker.git
cd ng2-datepicker
```

2. Install packages

```sh
npm install
```

3. Run Demo

```sh
npm start
```

## Licence

MIT

---
_Source: https://npm.io/package/custom-a1qa-ng2-datepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._