NgxDatepicker

This project is still under development and will be released soon.

Compatibility

Angular 19.2.0

How to install:

Install the package using npm:

npm install @wzrdev/ngx-datepicker@latest

Add the styles to your angular.json file:

{
  "styles": [
    "node_modules/@wzrdev/ngx-datepicker/styles/theme.min.css",
    "src/styles.css"
  ]
}

The theme.min.css file contains the styles for the standard component. You can customize the styles by overriding the variables in your global styles.css file.

/* Import Montserrat Alternates font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Datepicker overrides */
  --ngx-datepicker-outline-color: theme('colors.blue.600');
  --ngx-datepicker-accent-color: theme('colors.slate.800');
  --ngx-datepicker-accent-text-color: theme('colors.white');
  --ngx-datepicker-range-color: theme('colors.slate.300');
}

You can also use classical CSS to customize the styles instead of using Tailwind.

How to use:

Datepicker

There are two ways to use the datepicker:

• using signals
• using reactive forms

Import the basis component in your project:

import { NgxDatepickerComponent } from "@wzrdev/ngx-datepicker";

Using with signals:

<ngx-datepicker
  [label]="'My label"
  [date]="myDate()"
  (selectedDate)="onSelectedDateChange($event)"
/>

Using with reactive forms:

<ngx-datepicker
  [label]="'My label"
  formControlName="myDate"
/>

Defining min and max dates:

You can define optional min and max dates for the datepicker simply by passing a date object to the minDate and maxDate properties.

<ngx-datepicker
  [label]="'My label"
  [minDate]="minDate()"
  [maxDate]="maxDate()"
  formControlName="myDate"
/>

DateRange picker

It depends on what you need, you can use the date range with a combined field or with two separate fields.

There are two ways to use the date range picker:

• using signals
• using reactive forms (Not fully implemented yet)

Using with signals:

<ngx-date-range-picker
  label="Choose a date range"
  [startDate]="startDate()"
  [endDate]="endDate()"
  (selectedDateRange)="onSelectDateRange($event)"
/>