如何在ng2-date-picker中设置选项?

时间:2017-10-15 07:31:01

标签: angular typescript

目前我正在使用角度2日期选择器ng2-date-picker。在这里,我不知道如何设置minDate,maxDate,dateFormat和其他选项。请帮帮我。

代码:

Rust

2 个答案:

答案 0 :(得分:2)

您可以在component.ts中创建一个配置对象,如下所示,

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

并在组件中引用,

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

答案 1 :(得分:0)

使用:

安装:data = np.zeros( (100, 1000,21), dtype=np.float32 )

1- app.component.html

npm i ng2-date-picker

2- app.component.ts

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

3- AppComponetModule .ts

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

您可以使用以下网站:https://www.npmjs.com/package/ng2-date-picker