Mds Angular 6+, Bootstrap 4+ Persian and Gregorian DateTimePicker
Persian and gregorian DateTimePicker with Angular 6+ and AngularMaterials 6+ and Bootstrap 4+
Installing package via npm:
npm install mds.angular.datetimepicker@latest
How To Use:
- First add
importto your module,
import { MdsAngularPersianDateTimePickerModule } from 'mds.angular.datetimepicker';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MdsAngularPersianDateTimePickerModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- Install Requirements: You can install these packages as follows:
npm install mds.persian.datetime
npm install @angular/material @angular/cdk
npm install @angular/animations
npm install jquery
npm install popper.js
npm install bootstrap
Guidance:
You can add bootstrap and jquery to your angular 6+ project as follows:
Open angular.json
add these lines
"styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]- Add to view:
<mds-angular-persian-datetimepicker [(ngModel)]="mdsDateTimePickerObject"
[inLine]="false" [placeHolder]="'Mds DateTime Picker'">
</mds-angular-persian-datetimepicker>Options
| Name | Type | Values | Description |
|---|---|---|---|
| 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: عدد دو رقمی ماه dddd: نام روز هفته dd: عدد دو رقمی روز ماه HH: ساعت دو رقمی با فرمت 00 تا 24 hh: ساعت دو رقمی با فرمت 00 تا 12 mm: عدد دو رقمی دقیقه ss: ثانیه دو رقمی fff: میلی ثانیه 3 رقمی ff: میلی ثانیه 2 رقمی tt: ب.ظ یا ق.ظ |
Events
| Name | Description |
|---|---|
| dateChanged(date: IMdsAngularDateTimePickerDate) | Occurs whenever selected date change |
| rangeDateChanged(rangeDate: IMdsAngularDateTimePickerRangeDate) | 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 |
Sample
<mds-angular-persian-datetimepicker (dateChanged)="mdsDatePicker2OnDateChange($event)" (rangeDateChanged)="mdsDatePicker1OnDateRangeChange($event)" [isPersian]="false" [templateType]="1" [rangeSelector]="true">
</mds-angular-persian-datetimepicker>https://github.com/Mds92/Mds92.github.io/tree/master/MdsDateTimePickerSample