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

Demo

How To Use:

1. First add import to your module,

import { MdsAngularPersianDateTimePickerModule } from 'mds.angular.datetimepicker';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MdsAngularPersianDateTimePickerModule],
  providers: [], 
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 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"
  ]

3. 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