Используя Primeng Datepicker, как включить только последний день месяца? - PullRequest
Новая
       8

Используя Primeng Datepicker, как включить только последний день месяца?

0 голосов
/ 09 мая 2019

Так что мой вопрос довольно прост.Я хотел бы иметь конкретные даты, которые включены в средство выбора даты, например, только последний день любого месяца, например 30/06/2019, 31/07/2019

Primng Datepicker 

<p-calendar formControlName="date"></p-calendar>

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Это простой взлом для вашего требования.

В вашем component.html используйте минимальную и максимальную дату и метод (onMonthChange) для обновления минимального и максимального значения даты, когда пользователь меняет месяц. Трюк - это просто сделать минимальную и максимальную дату равной последнему дню месяца. 

<p-calendar [(ngModel)]="value" tabindex="0" [maxDate]="maxDateValue" 
    [minDate]="minDateValue" readonlyInput="true" 
    (onMonthChange)="onMonthChange($event)">
</p-calendar>

А в файле component.ts используйте следующий код: 

public maxDateValue: Date;
public minDateValue: Date;
ngOnInit() {
 this.setMinMaxDate();
}
setMinMaxDate() {
    var nowdate = new Date();
    this.maxDateValue = new Date(nowdate.getFullYear(), nowdate.getMonth() + 1, 0);
    this.minDateValue = new Date(nowdate.getFullYear(), nowdate.getMonth() + 1, 0);
  }
// method to handle month change.
onMonthChange(e:any) {
    this.minDateValue = new Date(e.year, e.month, 0);
    this.maxDateValue = new Date(e.year, e.month, 0);
  }

Вы должны подумать, почему во время инициализации я использую nowdate.getMonth() + 1 Но внутри onMonthChange только e.month, не добавляя + 1. Вам нужно пройти через эту статью найти последнюю и первую дату месяца статью о том, как получить последнюю и первую дату месяца, распечатать значения месяца в консоли и увидеть различия. Тогда вы легко поймете.

0 голосов
/ 09 мая 2019

Если вам нужен только один день каждого месяца, вы должны использовать представление месяца 

<p-calendar [(ngModel)]="dateValue"
  view="month" dateFormat="mm/yy" 
  [yearNavigator]="true" 
  yearRange="2000:2030"></p-calendar>
...