Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saeeddev94/ng-persian-datepicker
Persian datepicker for angular 19+
https://github.com/saeeddev94/ng-persian-datepicker
angular datepicker jalaali shamsi timepicker typescript
Last synced: 6 days ago
JSON representation
Persian datepicker for angular 19+
- Host: GitHub
- URL: https://github.com/saeeddev94/ng-persian-datepicker
- Owner: SaeedDev94
- License: mit
- Created: 2019-11-06T16:13:48.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-20T11:48:44.000Z (about 1 month ago)
- Last Synced: 2024-12-21T15:06:00.127Z (13 days ago)
- Topics: angular, datepicker, jalaali, shamsi, timepicker, typescript
- Language: TypeScript
- Homepage:
- Size: 3.84 MB
- Stars: 89
- Watchers: 5
- Forks: 19
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NgPersianDatepicker
Persian datepicker for angular 19+
**[Online demo](https://saeeddev94.github.io/ng-persian-datepicker/)**
# Install
```
npm install ng-persian-datepicker
npm install jalali-ts@^8.0.0
```
# Setup
Import modules:
```typescript
...
import { NgPersianDatepickerModule } from 'ng-persian-datepicker';
import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
imports: [
...
NgPersianDatepickerModule,
ReactiveFormsModule,
...
],
...
})
...
```
# Implement
```typescript
import { FormControl } from '@angular/forms';
@Component(...)
class DateComponent {
dateValue = new FormControl();
}
```
```html
```
That's it! this was a minimal setup ...
# Config [input]
You can customize datepicker config:
```html
...
```
Complete config reference:
| Key | Type | Description | Example |
|-----------------------|------------------|---------------------------------------------------------------------------------------------|----------------------------------------|
| calendarIsGregorian | boolean | set this to `true` if you want gregorian calendar. default: `false` | true |
| dateValue | FormControl | use this if you don't need a html input | dateValue: FormControl |
| dateInitValue | boolean | if no dateValue provided use today as init value. default: `true` | true |
| dateIsGregorian | boolean | is dateValue gregorian?. default: `false` | false |
| dateFormat | string | shamsi date format, check jalali-ts docs to see available formats. default: `YYYY/MM/DD` | 'YYYY-MM-DD HH:mm:ss' |
| dateGregorianFormat | string | gregorian date format, check jalali-ts docs to see available formats. default: `YYYY-MM-DD` | 'YYYY-MM-DD HH:mm:ss' |
| dateMin | number | min date that user can select (timestamp) . default: `null` | Jalali.parse('1396-11-01').valueOf() |
| dateMax | number | max date that user can select (timestamp) . default: `null` | Jalali.parse('1398-11-01').valueOf() |
| timeEnable | boolean | if set it to true time picker will visible. default: `false` | true |
| timeShowSecond | boolean | time second visibility. default: `false` | true |
| timeMeridian | boolean | show time in 12 hour format. default: `false` | false |
| uiTheme | IDatepickerTheme | datepicker theme, default: `defaultTheme: IDatepickerTheme` | darkTheme: IDatepickerTheme |
| uiIsVisible | boolean | only when this is true datepicker is visible. default: `false` | true |
| uiHideOnOutsideClick | boolean | if set to true datepicker will hide on outside click. default: `true` | true |
| uiHideAfterSelectDate | boolean | hide datepicker after date select. default: `true` | true |
| uiYearView | boolean | if set to true year view will enable. default: `true` | true |
| uiMonthView | boolean | if set to true month view will enable. default: `true` | true |
| uiInitViewMode | string | Initial view mode ('year', 'month', 'day'). default: `'day'` | 'year' |
| uiTodayBtnEnable | boolean | Show go to today btn or not. default: `true` | false |
# Event (output)
Complete events reference:
| Key | Type | Description | Example |
|-------------------|---------------------|---------------------------------------|-----------------------------------------------|
| dateOnInit | $event: IActiveDate | Fire event on setting init date value | (dateOnInit)="onInit($event)" |
| dateOnSelect | $event: IActiveDate | Fire event on date select | (dateOnSelect)="onSelect($event)" |
| uiIsVisibleChange | $event: boolean | Fire event on visibility change | (uiIsVisibleChange)="onVisibleChange($event)" |
# jalali-ts
Since `ng-persian-datepicker@^6.x.x` using `jalali-ts` instead of `moment-jalaali`, there are some limitations for parsing input date + output format
Please check **[jalali-ts](https://github.com/Saeed-Pooyanfar/jalali-ts)** for more information
# IActiveDate
It doesn't matter that you have timestamp or gregorian date as initial value,
The value of `dateValue: FormControl` is a shamsi (jalai) date string!
But what if you want timestamp or gregorian date of selected date?
First take a look at **[IActiveDate](https://github.com/Saeed-Pooyanfar/ng-persian-datepicker/blob/master/projects/ng-persian-datepicker/src/lib/interface/IActiveDate.ts)**
As you saw, `IActiveDate` includes shamsi date, gregorian date and timestamp.
The lib has 2 events of type `IActiveDate`:
- dateOnInit
- dateOnSelect
So, if you need to create `Date` object of selected date:
```typescript
import { IActiveDate } from 'ng-persian-datepicker';
@Component(...)
class DateComponent {
onSelect(event: IActiveDate): void {
const viaTimestampValue = new Date(event.timestamp);
const viaGregorianDate = new Date(event.gregorian);
}
}
```
```html
...
```
# Custom theme
Every app has its unique theme, static themes maybe are easy to use but hard to customize!
With custom theme feature you can create your custom theme base on your app theme.
To create a custom theme you need a set of colors for every part of datepicker component.
Example:
```typescript
import { IDatepickerTheme } from 'ng-persian-datepicker';
const customTheme: Partial = {
selectedBackground: '#D68E3A',
selectedText: '#FFFFFF',
};
```
```html
...
```
Checkout **[IDatepickerTheme](https://github.com/Saeed-Pooyanfar/ng-persian-datepicker/blob/master/projects/ng-persian-datepicker/src/lib/interface/IDatepickerTheme.ts)** interface to see all available props
And **[darkTheme](https://github.com/Saeed-Pooyanfar/ng-persian-datepicker/blob/master/src/app/demo/datepicker-theme/dark.theme.ts)** for full example
> **Note**
> Your theme will merge with defaultTheme,
> So if you don't provide all colors, the defaultTheme value will use for the missing parts
# Offline demo
you can download a release and see ng-persian-datepicker demo:
```
cd /to/ng-persian-datepicker/dir
npm install
npm run start
```
open `http://localhost:4200` in your browser