# @stumpam/ngx-date-input

> Angular Date picker with masked input.

Latest version **2.2.2** (published 2023-12-06) · 0 weekly downloads

## Install

```sh
npm install @stumpam/ngx-date-input
pnpm add @stumpam/ngx-date-input
yarn add @stumpam/ngx-date-input
bun add @stumpam/ngx-date-input
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2023-12-06 |
| First published | 2020-02-19 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 304.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | stumpam |

## Links

- npm: https://www.npmjs.com/package/@stumpam/ngx-date-input
- npm.io page: https://npm.io/package/@stumpam/ngx-date-input

## Dependencies (1)

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

## Recent versions

- 2.2.2 (latest) — 2023-12-06
- 2.2.1 — 2023-12-06
- 2.2.0 — 2023-10-30
- 2.1.0 — 2023-06-14
- 2.0.0 — 2021-08-03
- 1.12.15 — 2021-08-03
- 1.12.13 — 2021-08-03
- 1.12.11 — 2021-08-03
- 1.12.10 — 2021-08-03
- 1.12.9 — 2021-06-15
- 1.12.8 — 2021-06-15
- 1.12.7 — 2021-06-15
- 1.12.6 — 2021-06-15
- 1.12.5 — 2021-06-04
- 1.12.4 — 2021-06-01
- … 36 more at https://npm.io/package/@stumpam/ngx-date-input/versions

## README

# NgxDateInput

Angular Date picker with masked input.

Demo: [https://stackblitz.com/edit/ngx-date-input](https://stackblitz.com/edit/ngx-date-input)

## Quick Start

1. Import NgxDateInputModule to your project.

```typescript
import { NgxDateInputModule } from '@stumpam/ngx-date-input';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxDateInputModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

2. Use in HTML template

```typescript
<ngx-date-input [formControl]="ctrl" [options]="options"></ngx-date-input>
```

or with custom image (svg)

```typescript
<ngx-date-input [formControl]="ctrl" [options]="options1">
    <img src="*">
  </ngx-date-input>
```

3. Set up in parent component

```typescript
options4: DateInputOptions = {
  // valid date types D/DD, M/MM, YYYY and any dividers between - default: 'D. M. YYYY'
  format: 'D. M. YYYY',
  // minimal date in YYYY-MM-DD format - default: empty
  min: '2020-03-10',
  // maximum date in YYYY-MM-DD format - default: empty
  max: '2020-04-10',
  // bolean whether datepicker returns Date object or YYYY-MM-DD format - default: false
  iso: boolean,
  // Disables weekends fo pick fromcalendar
  disableWeekends: boolean,
  // Hides other month dates in calendar
  hideOtherMonths: boolean,
  // Path to image of calendar, when not set it will use ng-content
  image: '*',
  // Sets default view of calendare component. Month shows month dates, year show month per selected year, decade shows 9 followin years in grid
  view: 'month' | 'year' | 'decade',
  // Shows inactive arrow if previous or next month/year is not active
  showInactiveArrows?: boolean;
  // Hides topbar today button - default: true
  hideTopbarToday?: boolean;
  // Show bottom bar - default: true
  showBottomBar?: boolean;
  bottomBar?: {
    // Shows today button in bottom bar - default: true
    today?: boolean;
    // Shows clear button in bottom bar - default: false
    clear?: boolean;
    // Shows close button in bottom bar - default: true
    close?: boolean;
  }
  // Shows clear button in input - default: false
  showInputClear?: boolean;
  // Calendar which starts in `decade` will be end aligned to the options.max date
  maxAtEnd?: boolean;
  // Calendar which starts in `decade` will be start aligned to the options.min date
  minAtStart?: boolean;
};
```

### Works with [formly](https://formly.dev)

If you want to add attributes directly to input element make custom Formly field and initialize it on `ngOnInit`

```typescript
ngOnInit() {
    this.attributes = {
      id: this.id,
      ...this.to.attributes,
    };
  }
```

and use it in the template

```HTML
<ngx-date-input [formControl]="formControl" [options]="to.dateOptions" [attributes]="attributes"></ngx-date-input>
```

> ⚠ Caution
>
> Attributes are bound just once on ngOnIput hook. Changes are matter of future improvements.

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