Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Angular 2+ And Bootstrap 4+ DateTimePicker

NotificationsYou must be signed in to change notification settings

Mds92/mds-angular-datetime-picker-package

Repository files navigation

Persian and gregorian DateTimePicker withAngular 6+ andAngularMaterials 6+ andBootstrap 4+

Installing package via npm:

npm install mds.angular.datetimepicker@latest

Demo

Mds Angular Persian and Gregorian DateTimePickerMds Angular Persian and Gregorian DateTimePicker

How To Use:

  1. First addimport to your module,
import{MdsAngularPersianDateTimePickerModule}from'mds.angular.datetimepicker';@NgModule({declarations:[AppComponent],imports:[BrowserModule,MdsAngularPersianDateTimePickerModule],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}
  1. Install Requirements:You can install these packages as follows:
npm install mds.persian.datetimenpm install @angular/material @angular/cdknpm install @angular/animationsnpm install jquerynpm install popper.jsnpm install bootstrap

Guidance:You can add bootstrap and jquery to your angular 6+ project as follows:Openangular.jsonadd 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"  ]
  1. Add to view:
<mds-angular-persian-datetimepicker[(ngModel)]="mdsDateTimePickerObject"[inLine]="false"[placeHolder]="'Mds DateTime Picker'"></mds-angular-persian-datetimepicker>

Options

NameTypeValuesDescription
isPersianbooleantrue, [false]Is date time picker persian or gregorian
timePickerbooleantrue, [false]Is time picker enable
templateTypeEnumeration1, [2]You can choose how your date time picker generate
In materials you have animations
1 = bootstrap
2 = material
inLinebooleanfalse, [true]Show date time picker as in line in page
textBoxTypeEnumeration1, [2]If you choose[inLine]="false" it shows a textbox as picker
You can choose how should it shows
1 = withButton
2 = withoutButton
placeHolderstringPlace holder of text box
buttonIconstringIcon of datepicker button
Sample:
<span aria-hidden="true"></span>
Default is 📅
rangeSelectorbooleanfalse, [true]Is date picker range selector
formatstringformat stringFormat 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

NameDescription
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

Releases

No releases published

Packages

No packages published

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp