Website-Suche

angular - Wie setzt man Optionen im ng2-date-picker?


Derzeit verwende ich den Angular 2 Date Picker ng2-date-picker. Hier weiß ich nicht, wie man minDate, maxDate, dateFormat und andere Optionen festlegt. Bitte helfen Sie mir dabei.

Code :

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

Antwort #1

Sie können ein Konfigurationsobjekt innerhalb der component.ts wie folgt erstellen,

 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'
  };

und verweisen im Bauteil als,

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

Verwandte Artikel