Выделите конкретную неделю определенного месяца в Angular material DatePicker

ProgramBox

Выделите конкретную неделю определенного месяца в Angular material DatePicker

Post author:admin
Запись опубликована:6 марта, 2023
Post category:Вопросы по программированию

#angular #angular-material #angular-material-7 #angular-material-datetimepicker

#angular #angular-материал #angular-material-7 #angular-material-datetimepicker

Вопрос:

Я видел этот пример на официальном сайте angular material

https://stackblitz.com/angular/xxjleavorkm?file=src/app/datepicker-date-class-example.ts

Как выбрать даты динамически, например, если я запланировал встречу, скажем, в октябре, с 7 по 14, как выделить для нее дни.

В api есть класс с именем DateRange, но как его использовать, где его привязать?

Есть примеры, показывающие только интеграцию средства выбора диапазона дат angular materials с полями ввода с элементами управления формы, помеченными как «начало» и «конец», которые, вероятно, принимают входные данные диапазона дат, но в моем случае я хочу предоставить предопределенные входные данные из серверной части, как если бы у меня была дата началаи конечную дату, которую мне нужно установить непосредственно в средстве выбора диапазона дат.

P.S Также пробовал использовать средство выбора диапазона дат saturn, но его сбивает с толку необходимость добавления большего количества модулей и зависимостей.

Был бы оценен пример stackblitz ..!!

1. вы должны рассказать нам, что вы пробовали, чтобы мы могли помочь! 🙂 счастливого пути

2. функция dateClass — это функция, которая получает в качестве аргумента дату и возвращает строку с классом (она выполняется, когда мы меняем месяц, для каждого дня). единственное, что нужно, это поставить условие для возврата строки с именем класса, если cellDate оно соответствует вашему условию. ПРИМЕЧАНИЕ: Не забудьте поместить класс в styles.css -не в component.css

3. @FranciscoSantorelli, я видел класс DateRange в Angular material Api, но через www я не смог сразу найти пример, который мог бы объяснить, как именно указать диапазон для выбора диапазона дат angular materials 🙂 Есть примеры, показывающие только интеграцию с отображенными полями ввода, но, к сожалению, это не соответствует моим потребностям. Дайте мне знать, если вам нужно что-нибудь еще. Также искал saturn-datepicker, но было сложно ввести зависимости модуля.

4. Обновил вопрос с учетом моих данных 🙂

Ответ №1:

В Stackblitz измените вот так.

       return (date > 1 amp;amp; date < 20) ? 'example-custom-date-class' : '';

Редактировать:

Итак, вы ищете селектор диапазона дат.

https://stackblitz.com/angular/ovmarbmryxd?file=src/app/date-range-picker-overview-example.ts

РЕДАКТИРОВАТЬ 2:

Вы можете использовать formControlName для получения значения выбранных дат.

Есть еще один рабочий пример.

 <mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

<p>Selected range: {{range.value | json}}</p>

1. Привет, спасибо за подсказку, но как выбрать конкретный месяц, например, 20 дней января? поскольку я хочу выбрать конкретные дни определенного месяца.

2. да, это будет работать для меня, но как я могу установить статические значения? например, я запланировал встречу с 6 октября по 12 октября, поэтому я хочу установить здесь предопределенные значения, любые подсказки здесь помогут мне выполнить мою работу, поскольку я скрою входные данные для датирования или, скорее, отключу их.

3. Было бы здорово, если бы вы указали, как устанавливать и получать из него значения ..!! это на самом деле я хочу ..!!

4. Я обновил ответ. Вы можете проверить второе редактирование.

5. Я полностью осведомлен об этом примере, но мой вопрос в том, что я хочу установить диапазон без использования входных данных формы…. у меня будут только две даты из серверной части, и мне нужно показать выбранный диапазон, но я не буду хранить там входные данные … !!😊