Persian and gregorian DateTimePicker with angular 4 and angular materials
Installing package via npm:
npm install mds.angular.datetimepicker@latest Also, you need to install mds.persian.datetime via npm:
npm install mds.persian.datetime@latest 
- First add
importto your module,
import { MdsDatetimePickerModule } from 'mds.angular.datetimepicker';- Add to
importssection of your @NgModule, sample:
@NgModule({ declarations: [AppComponent], imports: [BrowserModule, MdsDatetimePickerModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }- Add to view:
<mds-datetime-picker></mds-datetime-picker>| Name | Type | Values | Description |
|---|---|---|---|
| initialValue | string | Initial value of datetime Picker You can initial date time picker with it. Example: 1396/06/06 or 1396/05/06 10:20:00 for persian2017/06/06 or 2017-06-06 10:20 for gregorian | |
| isPersian | boolean | true, [false] | Is date time picker persian or gregorian |
| timePicker | boolean | true, [false] | Is time picker enable |
| templateType | Enumeration | 1, [2] | You can choose how your date time picker generate In materials you have animations 1 = bootstrap 2 = material |
| inLine | boolean | false, [true] | Show date time picker as in line in page |
| textBoxType | Enumeration | 1, [2] | If you choose [inLine]="false" it shows a textbox as pickerYou can choose how should it shows 1 = withButton 2 = withoutButton |
| placeHolder | string | Place holder of text box | |
| buttonIcon | string | Icon of datepicker button Sample: <span class="fa fa-calendar" aria-hidden="true"></span> Default is 📅 | |
| rangeSelector | boolean | false, [true] | Is date picker range selector |
| format | string | format string | Format of showing date time فرمت پیش فرض 1393/09/14 13:49:40 yyyy: سال چهار رقمی yy: سال دو رقمی MMMM: نام فارسی ماه MM: عدد دو رقمی ماه M: عدد یک رقمی ماه dddd: نام فارسی روز هفته dd: عدد دو رقمی روز ماه d: عدد یک رقمی روز ماه HH: ساعت دو رقمی با فرمت 00 تا 24 H: ساعت یک رقمی با فرمت 0 تا 24 hh: ساعت دو رقمی با فرمت 00 تا 12 h: ساعت یک رقمی با فرمت 0 تا 12 mm: عدد دو رقمی دقیقه m: عدد یک رقمی دقیقه ss: ثانیه دو رقمی s: ثانیه یک رقمی fff: میلی ثانیه 3 رقمی ff: میلی ثانیه 2 رقمی f: میلی ثانیه یک رقمی tt: ب.ظ یا ق.ظ t: حرف اول از ب.ظ یا ق.ظ |
| Name | Description |
|---|---|
| dateChanged(date: IDate) | Occurs whenever selected date change |
| rangeDateChanged(rangeDate: IRangeDate) | Occurs whenever selected range date change |
| keyDown(event: IEventModel) | Occurs whenever keydown event fires on datepicker text box |
| blur(event: IEventModel) | Occurs whenever blur event fires on datepicker text box |
| focus(event: IEventModel) | Occurs whenever focus event fires on datepicker text box |
<mds-datetime-picker (dateChanged)="mdsDatePicker2OnDateChange($event)" (rangeDateChanged)="mdsDatePicker1OnDateRangeChange($event)" [isPersian]="false" [templateType]="1" [rangeSelector]="true"> </mds-datetime-picker>https://github.com/Mds92/Mds92.github.io/tree/master/MdsDateTimePickerSample