Mds.angular.datetimepicker NPM

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

Mds Angular Persian and Gregorian DateTimePicker

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

tslib

@everything-registry/sub-chunk-2148 @infinitebrahmanuniverse/nolb-mds

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

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago