CODEWITHSUNDEEP
angulartypescript
Jeyabalan Thavamani
Jeyabalan Thavamani

Reputation: 3327

How to set options in ng2-date-picker?

Currently I'm using angular 2 date picker ng2-date-picker. Here i don't know how to set minDate, maxDate, dateFormat and other options. Please help me on this.

code:

<dp-date-picker></dp-date-picker>

Upvotes: 4

Views: 14092

Answers (2)

Fahimeh Ahmadi
Fahimeh Ahmadi

Reputation: 1027

for use:

install: npm i ng2-date-picker

1- app.component.html

<dp-date-picker dir="rtl" theme="dp-material" placeholder="۱۳۹۸/۱۰/۰۸" required="true"
          [(ngModel)]="selectedDate" [config]="datePickerConfig" minDate="07/11/2020">
 </dp-date-picker>

2- app.component.ts

datePickerConfig = {
    drops: 'up',
    format: 'YY/M/D'
  }

3- AppComponetModule .ts

import { DpDatePickerModule } from 'ng2-jalali-date-picker';
@NgModule({
  imports: [
    DpDatePickerModule
  ],
})

And you can use the website: https://www.npmjs.com/package/ng2-date-picker

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222702

You can create a config object inside the component.ts as follows,

 constructor() {}
  config = {
    firstDayOfWeek: 'su',
    monthFormat: 'MMM, YYYY',
    disableKeypress: false,
    allowMultiSelect: false,
    closeOnSelect: undefined,
    closeOnSelectDelay: 100,
    onOpenDelay: 0,
    weekDayFormat: 'ddd',
    appendTo: document.body,
    drops: 'down',
    opens: 'right',
    showNearMonthDays: true,
    showWeekNumbers: false,
    enableMonthSelector: true,
    format: "YYYY-MM-DD HH:mm",
    yearFormat: 'YYYY',
    showGoToCurrent: true,
    dayBtnFormat: 'DD',
    monthBtnFormat: 'MMM',
    hours12Format: 'hh',
    hours24Format: 'HH',
    meridiemFormat: 'A',
    minutesFormat: 'mm',
    minutesInterval: 1,
    secondsFormat: 'ss',
    secondsInterval: 1,
    showSeconds: false,
    showTwentyFourHours: true,
    timeSeparator: ':',
    multipleYearsNavigateBy: 10,
    showMultipleYearsNavigation: false,
    locale: 'zh-cn',
    // min:'2017-08-29 15:50',
    // minTime:'2017-08-29 15:50'
  };

and refer in the component as,

 <dp-date-picker  theme="dp-material" [(ngModel)]="value" mode='daytime' [config]='config'
     (ngModelChange)="validatorsChanged()"
      [placeholder]="placeholder" [mode]='mode' #datePicker> 
  </dp-date-picker>

Upvotes: 11

Related Questions