1.1.1 • Published 5 years ago

corrected-ng2-jalali-date-picker v1.1.1

Weekly downloads
4
License
MIT
Repository
github
Last release
5 years ago

Angular Jalali Date Picker

This is a configurable jalali (persian, khorshidi, shamsi) date-picker build for Angular 2 applications and uses jalali-moment as its dependency. DEMO

Read this in other languages: فارسی

Build Status npm version Package Quality dependency Quality dev dependency Quality Codacy Badge Codacy Badge

Screenshots

Installation:

  1. Download from npm: npm install ng2-jalali-date-picker --save
  2. import the DpDatePickerModule module in typescript (.ts) or es6 files like below:
    import {DpDatePickerModule} from 'ng2-jalali-date-picker';
  3. Add DpDatePickerModule to your module imports:
 @NgModule({
   ...
   imports: [
     ...
     DpDatePickerModule
   ]
 })

How to use

 <dp-date-picker 
   dir="rtl"
   [(ngModel)]="dateObject"
   mode="day"
   placeholder="تاریخ"
   theme="dp-material">
 </dp-date-picker>
 dateObject = "";
 
 //OR if you have initial value you could use following code
 import * as moment from 'jalali-moment';
 dateObject = moment('1395-11-22','jYYYY,jMM,jDD');

Demo

How to use the output as a jalali (shamsi) date

import * as moment from 'jalali-moment';
dateObject.format('jYYYY/jMM/jD)'

read jalali-moment

How to use it with system.js

this Demo is using system.js.

Attributes (Input):

all attributes in the following table could be used as

// a future selector
<dp-date-picker mode="day" placeholder="تاریخ" [minDate]="moment()" [(ngModel)]="selectedDate"></dp-date-picker>
NameTypeDefaultApplies ToDescription
dirrtlltrltrthe type of the calender which will be displayed in the picker
mode"day"\|"month"\|"time"\|"daytime""day"AllThe mode of the calender which will be displayed in the picker
displayDateMoment\|Stringcurrent dateday\|month\|daytimeIndicates on what date to open the calendar on
disabledBooleanfalseAllIf set to true the input would be disabled
placeholderString""AllThe date-picker input placeholder
requiredBooleanundefinedAllThis is a validation rule, if there won't be any selected date then the containing form will be invalid.
minDateMoment\|Stringundefinedday\|month\|daytimeThis is a validation rule, if the selected date will be before minDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
maxDateMoment\|Stringundefinedday\|month\|daytimeThis is a validation rule, if the selected date will be after maxDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
minTimeMoment\|StringundefinedtimeThis is a validation rule, if the selected date will be before minTime the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
maxTimeMoment\|StringundefinedtimeThis is a validation rule, if the selected date will be after maxTime the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
themeString""AllTheme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo.
configIDatePickerConfigSee BelowAllConfiguration object - see description below.

Attributes (Output):

NameEvent ArgumentsApplies ToDescription
onChangeCalendarValueAll PickersThis event will be emitted on every valid value change, if you want to receive every value (valid and invalid) please use the native ngModelChange output.
openundefinedAll PickersThis event will be emitted when picker is opened.
closeCalendarValueAll PickersThis event will be emitted when picker is closed.
onGoToCurrentvoidAll PickersThis event will be emitted when click was made on go to current button.
onLeftNavvoidAll PickersThis event will be emitted when click was made on left navigation button.
onRightNavvoidAll PickersThis event will be emitted when click was made on right navigation button.

Configuration:

In order to provide configurations to the date-picker you need to pass it to the dp-date-picker component:

<dp-date-picker [(ngModel)]="selectedDate" [config]="datePickerConfig"></dp-date-picker>
datePickerConfig = {
    drops: 'up',
    format: 'YY/M/D'
}

Here are the available configurations:

NameTypeDefaultApplies ToDescription
appendToString\|HTMLElementundefinedAllThe selector/element to which the calendar popup will append to (this is useful for overflow: hidden container issues). Please note that the appendTo element will be set with position absolute if it has position static (the default position).
localeStringmoment.locale()AllLocalisation of language (see in the demo all supported locales)
disableKeypressBooleanfalseAllDisables the possibility to change the date value by typing it - changing the date would be possible only from the picker
formatString"DD-MM-YYYY"AllIf ngModel provided as String the format is required, this format also will be used as the input format style.
onOpenDelayNumber0AllThe delay (in ms) between the date picker focusing and the date-picker popup apparel
drops'up'\|'down'undefined down if possibleAllWhether the picker appears below or above the input element.
opens'right'\|'left'undefined right if possibleAllWhether the picker appears aligned to the left or to the right the input element.
closeOnSelectBooleantrueday\|monthIf set to true will close the date-picker after choosing a date from the calender, otherwise, won't.
openOnClickBooleantrueday\|month\|daytimeIf set to false will not open the date-picker when input gets clicked, otherwise, will.
openOnFocusBooleantrueday\|month\|daytimeIf set to false will not open the date-picker when input gets focused, otherwise, will.
closeOnSelectDelayNumber100day\|monthThe delay (in ms) between the date selection and the date-picker collapse
allowMultiSelectBooleanundefinedday\|monthIf set to true will allow for choosing multiple dates. false will force a single selection. If undefined, the picker will attempt to guess based on the type of the input value.
dayBtnFormatStringDDday\|daytimeThe day format of the day button in the calendar.
dayBtnFormatter(Moment) => Stringundefinedday\|daytimeThe formatter (callback function) of the day button in the calendar.
dayBtnCssClassCallback(Moment) => Stringundefinedday\|daytimeCallback for adding custom CSS classes to the day button in the calendar. Can contain multiple classes, just seperate with a space.
enableMonthSelectorBooleantrueday\|daytimeWhether to enable/disable the selection of a moth granularity picker.
firstDayOfWeekString"su"day\|daytimeThe first day of the calendar's week. Should be one of: "su", "mo", "tu", "we", "th", "fr", "sa"
isDayDisabledCallback(Moment) => booleanundefinedday\|daytimeCallback which should indicate if specific day is disabled.
monthFormatString"MMM-YYYY"day\|daytimeThe date format of the day calendar, the one that seen above the calendar days. Will be overwritten if monthFormatter provided.
monthFormatter(Moment) => Stringundefinedday\|daytimeThe date formatter (callback function) of the day calendar, the one that seen above the calendar days.
showNearMonthDaysBooleantrueday\|daytimeWhether to show/hide next and previous month days.
showWeekNumbersBooleanfalseday\|daytimeWhether to show/hide the week number of each week (iso week number).
isMonthDisabledCallback(Moment) => booleanundefinedday\|month\|daytimeCallback which should indicate if specific month is disabled (month selector).
maxMoment\|Stringundefinedday\|month\|daytimeDisables all dates (on the date-picker) that are set to after the max, note that if invalid date would be set by the input then the date picker value would be the max date but the input will show the user typed date.
minMoment\|Stringundefinedday\|month\|daytimeDisables all dates (on the date-picker) that are set to before the min, note that if invalid date would be set by the input then the date picker value would be the min date but the input will show the user typed date.
monthBtnFormatStringDDday\|month\|daytimeThe month format of the month button in the calendar.
monthBtnFormatter(Moment) => Stringundefinedday\|month\|daytimeThe formatter (callback function) of the month button in the calendar.
monthBtnCssClassCallback(Moment) => Stringundefinedday\|month\|daytimeCallback for adding custom CSS classes to the month button in the calendar. Can contain multiple classes, just seperate with a space.
yearFormatString"YYYY"day\|month\|daytimeThe date format of the month calendar, the one that seen above the calendar months. Will be overwritten if yearFormatter provided. (available when enableMonthSelector is set to true).
yearFormatter(Moment) => Stringundefinedday\|month\|daytimeThe date formatter (callback function) of the month calendar, the one that seen above the calendar months. (available when enableMonthSelector is set to true).
hours12FormatString"hh"daytime\|timeThe hours format of the time select when showTwentyFourHours is false.
hours24FormatString"HH"daytime\|timeThe hours format of the time select when showTwentyFourHours is true.
maxTimeMoment\|Stringundefineddaytime\|timeDisables arrow buttons on the time select that would make the time after the maxTime.
meridiemFormatString"A"daytime\|timeThe AM/PM format of the time select when showTwentyFourHours is false.
minTimeMoment\|Stringundefineddaytime\|timeDisables arrow buttons on the time select that would make the time before the minTime.
minutesFormatString"mm"daytime\|timeThe minutes format of the time select.
minutesIntervalnumber1daytime\|timeThe number of minutes that will be added/subtracted when clicking up/down arrows on the time select.
secondsFormatString"ss"daytime\|timeThe seconds format of the time select.
secondsIntervalnumber1daytime\|timeThe number of seconds that will be added/subtracted when clicking up/down arrows on the time select.
showSecondsbooleanfalsedaytime\|timeIf set to true will show seconds in the time select, otherwise, won't.
showTwentyFourHoursbooleanfalsedaytime\|timeIf set to true will show hours in 24 hour format. false will show hours in 12 hours format and append AM/PM to the end of the time select.
timeSeparatorString":"daytime\|timeThe separator that will be placed between hours and minutes and between minutes and seconds on the time select.
showMultipleYearsNavigationbooleanfalseday\|month\|daytimeIf set to true will show buttons to navigate by multiple years (10 by default)
multipleYearsNavigateBynumber10day\|month\|daytimeNumber of years to navigate when showMultipleYearsNavigation is true
returnedValueTypeECalendarValueMomentAllThe returned value type (Moment, Moment[], string, string[]
unSelectOnClickbooleantrueday\|monthWill allow disallow/unselect to selected date by clicking on the selected date
inputElementContainerstring\|HTMLElementundefinedAllWill place picker popup relative to the provided elemenr (if string provided will used as a selector)
showGoToCurrentbooleantrueAllShow/Hides the go to current button on the calendars navigation
hideOnOutsideClickbooleantrueAllShow/Hides the picker popup after click outside of the component

API:

In order to use the date-picker api user the @ViewChild annotation in the date-picker containing component class, take at the example below:
Container component:

import {Component, ViewChild} from '@angular/core';
import {DatePickerComponent} from 'ng2-jalali-date-picker';

@Component({
selector: 'my-container',
template: `
<div>
    <h1>Container</h1>
    <dp-date-picker #dayPicker></dp-date-picker>
    <button (click)="open()"></button>
    <button (click)="close()"></button>
</div>
`
});
class MyContainer {
    @ViewChild('dayPicker') datePicker: DatePickerComponent;

    open() {
        this.datePicker.api.open();
    }

    close() {
         this.datePicker.api.close();
    }
}  

If you want to use API with Directive - you can do it by using #dateDirectivePicker, like below:

import {Component, ViewChild} from '@angular/core';
import {DatePickerDirective} from 'ng2-date-picker';

@Component({
selector: 'my-container',
template: `
<div>
    <input #dateDirectivePicker="dpDayPicker">
    <button (click)="close()"></button>
</div>
`
});
class MyContainer {
    @ViewChild('dateDirectivePicker') datePickerDirective: DatePickerDirective;
	
    close() {
         this.datePickerDirective.api.close();
    }
}  

Here is the list of APIs:

NameSignatureDescription
open() => voidOpens the date picker
close() => voidCloses the date picker
moveCalendarTo(to: Moment \| String) => voidMoves calendar to specific date

Inline - Day Calendar

You can use the <dp-day-calendar> component to display the calendar widget without an associated input box.

i.e.

<dp-day-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-calendar>

Attributes:

NameTypeDefaultDescription
requiredBooleanundefinedThis is a validation rule, if there won't be any selected date then the containing form will be invalid.
minDateMoment\|StringundefinedThis is a validation rule, if the selected date will be before minDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
maxDateMoment\|StringundefinedThis is a validation rule, if the selected date will be after maxDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
themeString''Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo.
configIDayPickerConfigSee BelowConfiguration object - see description below.

Attributes (Output):

NameEvent ArgumentsDescription
onSelectIDayThis event will be emitted when a day is selected.
onMonthSelectIMonthThis event will be emitted when a month is selected.
onNavHeaderBtnClickECalendarModeThis event will be emitted when the mode of the calendar switches form day to month and vise versa.
onGoToCurrentvoidThis event will be emitted when click was made on go to current button.
onLeftNavvoidThis event will be emitted when click was made on left navigation button.
onRightNavvoidThis event will be emitted when click was made on right navigation button.

Configuration:

In order to provide configurations to the day-calendar you need to pass it to the dp-day-calendar component:

<dp-day-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-calendar>

Here are the available configurations:

NameTypeDefaultDescription
formatString"DD-MM-YYYY"If ngModel provided as String the format is required, this format also will be used as the input format style.
firstDayOfWeekString"su"The first day of the calendar's week. Should be one of: "su", "mo", "tu", "we", "th", "fr", "sa"
monthFormatString"MMM-YYYY"The date format of the day calendar, the one that seen above the calendar days. Will be overwritten if monthFormatter provided.
monthFormatter(Moment) => StringundefinedThe date formatter (callback function) of the day calendar, the one that seen above the calendar days.
yearFormatString"YYYY"The date format of the month calendar, the one that seen above the calendar months. Will be overwritten if yearFormatter provided. (available when enableMonthSelector is set to true).
yearFormatter(Moment) => StringundefinedThe date formatter (callback function) of the month calendar, the one that seen above the calendar months. (available when enableMonthSelector is set to true).
allowMultiSelectBooleanundefinedIf set to true will allow for choosing multiple dates. false will force a single selection. If undefined, the picker will attempt to guess based on the type of the input value.
minMoment\|StringundefinedDisables all dates (on the date-picker) that are set to before the min, note that if invalid date would be set by the input then the date picker value would be the min date but the input will show the user typed date.
maxMoment\|StringundefinedDisables all dates (on the date-picker) that are set to after the max, note that if invalid date would be set by the input then the date picker value would be the max date but the input will show the user typed date.
showNearMonthDaysBooleantrueWhether to show/hide next and previous month days.
showWeekNumbersBooleanfalseWhether to show/hide the week number of each week (iso week number).
enableMonthSelectorBooleantrueWhether to enable/disable the selection of a moth granularity picker.
isDayDisabledCallback(Moment) => booleanundefinedCallback which should indicate if specific day is disabled.
isMonthDisabledCallback(Moment) => booleanundefinedCallback which should indicate if specific month is disabled (month selector).
dayBtnFormatStringDDThe day format of the day button in the calendar.
dayBtnFormatter(Moment) => StringundefinedThe formatter (callback function) of the day button in the calendar.
dayBtnCssClassCallback(Moment) => StringundefinedCallback which can add custom CSS classes to the day button in the calendar. Multiple classes can be returned with a space between them.
monthBtnFormatStringDDThe month format of the month button in the calendar.
monthBtnFormatter(Moment) => StringundefinedThe formatter (callback function) of the month button in the calendar.
monthBtnCssClassCallback(Moment) => StringundefinedCallback which can add custom CSS classes to the month button in the calendar. Multiple classes can be returned with a space between them.
showMultipleYearsNavigationbooleanfalseIf set to true will show buttons to navigate by multiple years (10 by default)
multipleYearsNavigateBynumber10Number of years to navigate when showMultipleYearsNavigation is true

Inline - Month Calendar

You can use the <dp-month-calendar> component to display the calendar widget without an associated input box. i.e.

<dp-month-calendar [(ngModel)]="selectedDate" [config]="config"></dp-month-calendar>

Attributes:

NameTypeDefaultDescription
requiredBooleanundefinedThis is a validation rule, if there won't be any selected date then the containing form will be invalid.
minDateMoment\|StringundefinedThis is a validation rule, if the selected date will be before minDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
maxDateMoment\|StringundefinedThis is a validation rule, if the selected date will be after maxDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
themeString''Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo.
configIMonthPickerConfigSee BelowConfiguration object - see description below.

Attributes (Output):

NameEvent ArgumentsDescription
onSelectIMonthThis event will be emitted when a month is selected.
onNavHeaderBtnClicknullThis event will be emitted when the mode button, in the navigation section, was clicked.
onGoToCurrentvoidThis event will be emitted when click was made on go to current button.
onLeftNavvoidThis event will be emitted when click was made on left navigation button.
onRightNavvoidThis event will be emitted when click was made on right navigation button.

Configuration:

In order to provide configurations to the month-calendar you need to pass it to the dp-month-calendar component:

<dp-month-calendar [(ngModel)]="selectedDate" [config]="config"></dp-month-calendar>

Here are the available configurations:

NameTypeDefaultDescription
formatString"DD-MM-YYYY"If ngModel provided as String the format is required, this format also will be used as the input format style.
yearFormatString"YYYY"The date format of the month calendar, the one that seen above the calendar months. Will be overwritten if yearFormatter provided. (available when enableMonthSelector is set to true).
yearFormatter(Moment) => StringundefinedThe date formatter (callback function) of the month calendar, the one that seen above the calendar months. (available when enableMonthSelector is set to true).
allowMultiSelectBooleanundefinedIf set to true will allow for choosing multiple dates. false will force a single selection. If undefined, the picker will attempt to guess based on the type of the input value.
minMoment\|StringundefinedDisables all dates (on the date-picker) that are set to before the min, note that if invalid date would be set by the input then the date picker value would be the min date but the input will show the user typed date.
maxMoment\|StringundefinedDisables all dates (on the date-picker) that are set to after the max, note that if invalid date would be set by the input then the date picker value would be the max date but the input will show the user typed date.
isMonthDisabledCallback(Moment) => booleanundefinedCallback which should indicate if specific month is disabled (month selector).
monthBtnFormatStringDDThe month format of the month button in the calendar.
monthBtnFormatter(Moment) => StringundefinedThe formatter (callback function) of the month button in the calendar.
monthBtnCssClassCallback(Moment) => StringundefinedCallback which can add custom CSS classes to the month button in the calendar. Multiple classes can be returned with a space between them.
showMultipleYearsNavigationbooleanfalseIf set to true will show buttons to navigate by multiple years (10 by default)
multipleYearsNavigateBynumber10Number of years to navigate when showMultipleYearsNavigation is true

Here is the list of APIs:

NameSignatureDescription
moveCalendarsBy(current: Moment, amount: number, granularity: moment.unitOfTime.Base) => voidMoves calendar by given amount
moveCalendarTo(to: Moment \| String) => voidMoves calendar to specific date
toggleCalendarMode(mode: day \| month) => voidChanges clander mode day/month

Inline - Time Select

You can use the <dp-time-select> component to display the time select widget without an associated input box.

i.e.

<dp-time-select [(ngModel)]="selectedDate" [config]="config"></dp-time-select>

Attributes:

NameTypeDefaultDescription
requiredBooleanundefinedThis is a validation rule, if there won't be any selected date then the containing form will be invalid.
minTimeMoment\|StringundefinedThis is a validation rule, if the selected date will be before minTime the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
maxTimeMoment\|StringundefinedThis is a validation rule, if the selected date will be after maxTime the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
themeString''Theme is a class added to the popup container (and inner components) - this will allow styling of the calendar when it's appended to outer element (for example - body). There is a built in theme named dp-material, you can find it in the demo.
configITimeSelectConfigSee BelowConfiguration object - see description below.

Attributes (Output):

NameEvent ArgumentsDescription
onChangeIDateThis event will be emitted when time is selected.

Configuration:

In order to provide configurations to the time-select you need to pass it to the dp-time-select component:

<dp-time-select [(ngModel)]="selectedDate" [config]="config"></dp-time-select>

Here are the available configurations:

NameTypeDefaultDescription
hours12FormatString"hh"The hours format of the time select when showTwentyFourHours is false.
hours24FormatString"HH"The hours format of the time select when showTwentyFourHours is true.
maxTimeMoment\|StringundefinedDisables arrow buttons on the time select that would make the time after the maxTime.