# ngx-moderndatepicker

> Modern Date Picker with different stylish interface

Latest version **4.0.1** (published 2026-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-moderndatepicker
pnpm add ngx-moderndatepicker
yarn add ngx-moderndatepicker
bun add ngx-moderndatepicker
```

## Health

**Score 60/100 (C)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2026-04-13 |
| First published | 2019-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 270.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sushant Bansal |
| Maintainers | sushant.bansal |
| Keywords | ngx-moderndatepicker, Modern Date Picker, Date Picker, Stylish Picker, date component, ng-date picker, ngx date picker, angular date month picker, angular date picker, angular datepicker, angular calendar, angular calendar component, angular calendar picker, angular calendar date picker, angular calendar month picker, angular calendar year picker, angular calendar day picker, angular calendar week picker, angular calendar range picker |

## Links

- npm: https://www.npmjs.com/package/ngx-moderndatepicker
- Repository: https://github.com/sushantbansal-ai/ngx-moderndatepicker
- Homepage: https://www.npmjs.com/package/ngx-moderndatepicker
- Issues: https://github.com/sushantbansal-ai/ngx-moderndatepicker/issues
- npm.io page: https://npm.io/package/ngx-moderndatepicker

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [date-fns](https://npm.io/package/date-fns.md) ^1.29.0

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 4.0.1 (latest) — 2026-04-13
- 3.0.1 — 2026-04-13
- 3.0.0 — 2026-04-13
- 2.0.1 — 2021-07-06
- 2.0.0 — 2021-06-12
- 0.0.6 — 2019-11-08
- 0.0.5 — 2019-11-04
- 0.0.4 — 2019-11-03
- 0.0.3 — 2019-11-03
- 0.0.2 — 2019-11-01
- 0.0.1 — 2019-11-01

## README

# ngx-moderndatepicker

Angular 13+ simple and interactive calendar datepicker component

![ngx-moderndatepicker](https://github.com/bansalss001/ngx-moderndatepicker/blob/master/src/assets/Screenshot.png)

## Installation

1. Install package from `npm`.

```sh
npm install ngx-moderndatepicker --save
```

2. Include NgModernDatepickerModule into your application.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxModerndatepickerModule } from 'ngx-moderndatepicker';

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

## Example
```html
  <ngx-moderndatepicker [(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 { ModernDatePickerOptions } from 'ngx-moderndatepicker';
import * as enLocale from 'date-fns/locale/en';

options: ModernDatePickerOptions = {
  minYear: 1970,
  maxYear: 2030,
  displayFormat: 'MMM D[,] YYYY',
  dayNamesFormat: 'dd',
  monthNamesFormat: 'MMM',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: enLocale,
  minDate: new Date(Date.now()), // Minimal selectable date
  maxDate: new Date(Date.now()),  // Maximal selectable date
  placeholder: 'Select A Date', // HTML input placeholder attribute (default: '')
  addClass: 'form-control', // Optional, value to pass on to [ngClass] on the input field
  addStyle: {}, // Optional, value to pass to [ngStyle] on the input field
  fieldId: 'my-date-picker', // ID to assign to the input field. Defaults to datepicker-<counter>
   weekendsDay: [0,6],
   /** Sunday is 0 , Highlights the weekends with gray background**/
  holidayList: [new Date('12/25/2000'), new Date('01/01/2001')]
  /** List of Holidays **/
};
```

## Licence

MIT

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