# @clmeida/ngxdatepicker

> Custom Datepicker for Angular 8+ applications.

Latest version **1.9.5** (published 2022-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @clmeida/ngxdatepicker
pnpm add @clmeida/ngxdatepicker
yarn add @clmeida/ngxdatepicker
bun add @clmeida/ngxdatepicker
```

## 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.9.5 |
| Published | 2022-11-01 |
| First published | 2019-11-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 125.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Caue Almeida |
| Maintainers | clmeida |
| Keywords | datepicker, ngxdatepicker, angular |

## Links

- npm: https://www.npmjs.com/package/@clmeida/ngxdatepicker
- Repository: https://github.com/nncl/ngx-datepicker
- Homepage: https://github.com/nncl/ngx-datepicker#readme
- Issues: https://github.com/nncl/ngx-datepicker/issues
- npm.io page: https://npm.io/package/@clmeida/ngxdatepicker

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [moment](https://npm.io/package/moment.md) ^2.24.0

## Recent versions

- 1.9.5 (latest) — 2022-11-01
- 1.9.5-beta.2 (beta) — 2022-11-01
- 1.9.5-beta.1 — 2022-11-01
- 1.9.5-beta.0 — 2022-11-01
- 1.9.4 — 2021-08-01
- 1.9.3 — 2021-06-29
- 1.9.2 — 2021-06-29
- 1.9.1 — 2020-11-18
- 1.9.0 — 2020-11-18
- 1.8.1 — 2020-11-17
- 1.8.0 — 2020-10-23
- 1.7.0 — 2020-10-21
- 1.6.0 — 2020-10-19
- 1.5.0 — 2020-10-17
- 1.4.0 — 2020-10-17
- … 7 more at https://npm.io/package/@clmeida/ngxdatepicker/versions

## README

# Ngxdatepicker

Custom Datepicker for Angular 8+ applications.

[![npm](https://img.shields.io/npm/v/@clmeida/ngxdatepicker.svg)](https://www.npmjs.com/package/@clmeida/ngxdatepicker)

[Demo](https://ngxdatepicker.surge.sh/).

## Getting Started

Install through npm:

```
npm i @clmeida/ngxdatepicker --save
```

Include its module in your `app.module.ts` file:

```typescript
import { NgxdatepickerModule } from "@clmeida/ngxdatepicker";

@NgModule({
  imports: [NgxdatepickerModule],
})
export class AppModule {}
```

Add the component in your application:

```html
<dd-ngxdatepicker
  (dateClicked)="myComponentVariable = $event"
  name="date"
  [(ngModel)]="date"
></dd-ngxdatepicker>
```

It's not required to use both `dateClicked` and `ngModel` together, you can use either one of them.

## API

### Properties

| Name          | Type                            | Description
| ------------- | -------------------------------------- | ---
| invalidDates | Array[string] | Invalid dates as timestamps
| validDates   | Array[string] | Valid dates as timestamps
| disablePrevDates | Boolean | Disable previous dates by today

#### Example

```typescript
import { ViewChild } from "@angular/core";
import * as moment from "moment";

export class AppComponent implements OnInit {
    invalidDates: string[] = [];

    ngOnInit() {
        const tomorrow = moment().add(1, 'days').format();
        const someDayOfNextMonth = moment().add(1, 'month').format();
        this.invalidDates.push(tomorrow);
        this.invalidDates.push(someDayOfNextMonth);
    }

}
```

```html
<dd-ngxdatepicker #datepicker 
    name="date" 
    [(ngModel)]="date" 
    [invalidDates]="invalidDates"
    [disablePrevDates]="true">
</dd-ngxdatepicker>
```

### Events

| Name          | Description                            |
| ------------- | -------------------------------------- |
| (dateClicked) | Outputs a string when a day is clicked |

### Methods

| Name   | Description                    |
| ------ | ------------------------------ |
| goPrev | Goes back to earlier month     |
| goNext | Goes forward to the next month |

#### Example

```typescript
import { ViewChild } from "@angular/core";
import * as moment from "moment";

export class AppComponent {
  @ViewChild("datepicker") datepicker: any;
  date: any = moment("25/12/2020", "DD/MM/YYYY").format();
}
```

```html
<dd-ngxdatepicker #datepicker name="date" [(ngModel)]="date"></dd-ngxdatepicker>

<button type="button" (click)="datepicker?.goPrev()">
  My custom prev Button
</button>

<button type="button" (click)="datepicker?.goNext()">
  My custom next Button
</button>
```

### Slots

| Name  | Description                                   |
| ----- | --------------------------------------------- |
| prev  | Replace default prev button with a custom one |
| next  | Replace default next button with a custom one |
| month | Replace default month title with a custom one |

#### Example

```html
<dd-ngxdatepicker #datepicker name="date" [(ngModel)]="date">
  <button type="button" (click)="datepicker?.goPrev()" prev>Custom Prev</button>
  <button type="button" (click)="datepicker?.goNext()" next>Custom Next</button>
  <strong month>{{ datepicker.current | date: "MM yyyy" }}</strong>
</dd-ngxdatepicker>
```

### Style

Every time you select a day a class named `selected` is bound to that element.

### I18n

Since this module works with [**moment.js**](https://momentjs.com/) you can set up its locale globally in your application:

**app.module.ts**

```typescript
// ... imports
import * as moment from "moment";

moment.locale("pt-BR");
```

### License

[MIT](https://github.com/nncl/ngx-datepicker/blob/master/LICENSE)

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