mds.angular.datetimepicker v3.1.8
Mds Angular Persian and Gregorian DateTimePicker
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
How To Use:
- First add
import
to 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 --save @angular/material @angular/cdk
npm install --save @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
[inLine]="false" [placeHolder]="'Mds DateTime Picker'">
</mds-angular-persian-datetimepicker>
Options
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 persian 2017/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 generateIn 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 buttonSample: <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: حرف اول از ب.ظ یا ق.ظ |
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-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
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago