mhabedini / ngx-date-picker

Angular Date Picker

ngx-date-picker is a customizable jalali ( persian ) and gregorian date picker for Angular +12

Check online demo

Install and Setup

step 1: install @ah99/ngx-date-picker

npm i @ah99/ngx-date-picker

step 2: Import NgxDatePickerModule to your module

import { NgxDatePickerModule } from '@ah99/ngx-date-picker'

@NgModule({
    imports: [
        NgxDatePickerModule.forRoot() // dont forget forRoot()
    ]
})

step 3: Import css styles to your global styles ( usually styles/.css/.scss/.less/ )

  @import "@ah99/ngx-date-picker/styles"

Use

use ngx-date-picker directive on any html input element you need

  <input ngx-date-picker [(ngModel)]="dateControl">

important: you need to setup one form model in your input element with formControl or ngModel So you must have already imported FormsModule or ReactiveFormsModule in your module.

Config

There are some options for config your date picker as below:

Option	Type	Default	Description
calendar	"gregorian" | "jalali"	"gregorian"	Type of your calendar
format	ValueFormat	"DD/MM/YYYY"	Format of your input element value
outputData	object	OutputEvent Config	Output values from the onDateSelect event
displayFooter	boolean	true	This option is for date picker action buttons. date picker will be closed immediately after selecting the date if this option set to false.
doneText	string	"Done"	Done action text
cancelText	string	"Cancel"	Done action text
theme	"light" | "dark"	"light	Date picker theme mode
themeConfig	object	Default Theme Config	You can change default styles like Primary-Color in light and dark mode

ValueFormat

"MM/DD/YYYY" | "MM-DD-YYYY" | "DD-MM-YYYY" | "DD/MM/YYYY"

OutputEventConfig

outputData: {
  date: true, // boolean
  type: false, // boolean
  year: false, // boolean
  month: false, // boolean
  day: false // boolean
}

DefaultThemeConfig

themeConfig: {
    light: {
        primaryColor: "#777777", // string
        secondaryColor: "#444444", // string
        backgroudColor: "#ffffff" // string
    },
    dark: {
        primaryColor: "#ffffff", //string
        secondaryColor: "#eeeeee", // string
        backgroudColor: "#444444" // string
    },
    rounded: "medium" // flase | "medium" | "full"
}

How to config?

If you want customize default configs, you can do it in two ways:

1. Global Config

Define your configs inside the NgxDatePickerModule.forRoot() . This configs will be applied to all date pickers.

Example:

NgxDatePickerModule.forRoot({
  calendar: "jalali",
  displayFooter: false,
  theme: "dark",
  themeConfig: {
    rounded: "full",
    dark: {
      primaryColor: "#bbbbbb"
    }
  }
})

All of your configs will be merged with default configs

2. Individual Config

You can set individual configs for every date picker by pass your custom configs to it with datePickerConfig.

Example:

<!-- HTML template -->

<input ngx-date-picker [(ngModel)]="dateControl"
[datePickerConfig]="customConfig">

// typescript component

import { CustomConfig } from '@ah99/ngx-date-picker';
...
customConfig: CustomConfig = {
  calendar: "gregorian",
  format: "DD-MM-YYYY",
  themeConfig: {
    light: {
      primaryColor: "#ca8c07"
    }
  }
}

Your individual configs will be merged with global configs

Output Event (onDateSelect)

This event will be triggered when you select the date. The output value will be an object whose fields you can specify in OutputEvent Config.

Example:

<input ngx-date-picker [(ngModel)]="dateControl"
(onDateSelect)="log($event)">