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

Demo

Mds Angular Persian and Gregorian DateTimePicker

How To Use:

First add import to your module,
```javascript
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 @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
```json
 "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
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 picker You 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