https://github.com/amir-rh99/ngx-date-picker

https://github.com/amir-rh99/ngx-date-picker

angular datepicker jalali-datepicker

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/amir-rh99/ngx-date-picker
• Owner: amir-rh99
• License: mit
• Created: 2022-09-08T14:34:48.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-18T16:57:14.000Z (over 2 years ago)
• Last Synced: 2024-11-05T15:56:59.207Z (2 months ago)
• Topics: angular, datepicker, jalali-datepicker
• Language: TypeScript
• Homepage:
• Size: 782 KB
• Stars: 4
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Angular Date Picker

![Angular Date Picker](https://github.com/amir-rh99/ngx-date-picker/raw/master/src/assets/AngularDatePicker.png)

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

[Check online demo](https://amir-rh99.github.io/ngx-date-picker/)

## Install and Setup

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

```bash

npm i @ah99/ngx-date-picker

```

### step 2: Import NgxDatePickerModule to your module

```typescript

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/ )

```css

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

```

## Use

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

```html

  

```

**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](#ValueFormat) | "DD/MM/YYYY" | Format of your input element value

| outputData | object | [OutputEvent Config](#OutputEventConfig) | 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](#DefaultThemeConfig) | You can change default styles like Primary-Color in light and dark mode

#### ValueFormat

```javascript

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

```

#### OutputEventConfig

```javascript

outputData: {

  date: true, // boolean

  type: false, // boolean

  year: false, // boolean

  month: false, // boolean

  day: false // boolean

}

```

#### DefaultThemeConfig

```javascript

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:

```typescript

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

```

```typescript

// 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](#OutputEventConfig).

#### Example:

```html

```