Компонент ion-datetime в платформе Ionic — это мощный инструмент для обработки ввода даты и времени. Одним из общих требований является установка минимальной выбираемой даты на сегодняшнюю дату. В этой статье мы рассмотрим несколько методов достижения этой функциональности на примерах кода.

Метод 1: использование объекта даты JavaScript

const today = new Date().toISOString().split('T')[0];
<ion-datetime min="{{ today }}"></ion-datetime>

Объяснение: мы создаем новый объект Date, представляющий сегодняшнюю дату. Затем мы преобразуем его в строковый формат ISO и извлекаем только часть даты. Наконец, мы привязываем атрибут minкомпонента ion-datetimeк переменной today.

Метод 2: использование пользовательской директивы

import { Directive, ElementRef, OnInit } from '@angular/core';
@Directive({
  selector: '[minDateToday]'
})
export class MinDateTodayDirective implements OnInit {
  constructor(private elementRef: ElementRef) {}
  ngOnInit() {
    const today = new Date().toISOString().split('T')[0];
    this.elementRef.nativeElement.setAttribute('min', today);
  }
}

Использование:

<ion-datetime minDateToday></ion-datetime>

Объяснение: мы создаем специальную директиву под названием minDateToday, которая устанавливает атрибут minкомпонента ion-datetimeна сегодняшнюю дату. Прикрепив эту директиву к элементу ion-datetime, минимальная дата будет автоматически установлена ​​при инициализации компонента.

Метод 3: использование реактивных форм

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <ion-datetime formControlName="selectedDate"></ion-datetime>
    </form>
  `
})
export class ExampleComponent {
  myForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    const today = new Date().toISOString().split('T')[0];
    this.myForm = this.formBuilder.group({
      selectedDate: [today, Validators.required]
    });
  }
}

Объяснение: Мы создаем реактивную форму с помощью сервиса FormBuilder. Начальное значение элемента управления формы selectedDateустановлено на сегодняшнюю дату. Установив валидатор Validators.required, мы гарантируем, что пользователь должен выбрать дату. Директива formControlNameпривязывает элемент управления формы selectedDateк компоненту ion-datetime.

В этой статье мы рассмотрели три различных метода установки минимальной выбираемой даты на сегодняшний день в компоненте ion-datetime. Независимо от того, предпочитаете ли вы использовать JavaScript, пользовательские директивы или реактивные формы, теперь у вас есть знания и примеры кода для реализации этой функции в ваших приложениях Ionic. Приятного кодирования!