Есть ли способ настроить angular выбора даты? - PullRequest
Новая
       22

Есть ли способ настроить angular выбора даты?

0 голосов
/ 13 февраля 2020

Мне нужна помощь в настройке выбора даты материала angular, т. Е. https://material.angular.io/components/datepicker/overview. Календарь не должен закрываться, когда мы нажимаем на дату. У меня должно быть 2 кнопки: одна «Отмена», другая «Сохранить». После нажатия кнопки сохранения календарь должен быть закрыт.

1 Ответ

0 голосов
/ 13 февраля 2020

Я не знаю, является ли это лучшим решением, но исходя из этого SO ответа , я думаю, что решение заключается в использовании меню с календарем внутри.

Как нам нужно для ввода нам нужны как минимум две функции: одна для анализа значения ввода в объекте Date, а другая для форматирования значения ввода, когда у нас есть объект Date.

Как я хочу, это "специальное предложение" «DatePicker может форматировать дату несколькими способами, ГГГГ-ММ-ДД и ДД / ММ / ГГГГ. Мне нужны переменные дерева 

  placeHolder:string="DD/MM/YYYY"
  separator:string;
  order:number[]=[];

Функция дает нам значение« разделитель и порядок »

  init(placeholder:string)
  {
     this.separator=placeholder.replace(/[YMD]/g,'').substr(0,1)
     const parts=placeholder.replace(/[.\/]/g,'-').split('-')
     this.order[0]=parts.indexOf('YYYY')
     this.order[1]=parts.indexOf('MM')
     this.order[2]=parts.indexOf('DD')
  }

Таким образом, наша функция синтаксического анализа и формат выглядит следующим образом: 

format(date:any)
  {
    if (!date)
      return null;
    const parts=[''+date.getFullYear(),
                 ("00" + (date.getMonth() + 1)).slice(-2),
                 ("00" + date.getDate()).slice(-2)]
    return parts[this.order[0]]+this.separator+
           parts[this.order[1]]+this.separator+
           parts[this.order[2]]
  }
  parse(value:string)
  {
   const parts=value?value.replace(/[.\/]/g,'-').split('-'):[]
   const date:any=(parts.length==3)?
        new Date(parts[this.order[0]]+'-'+parts[this.order[1]]+'-'+parts[this.order[2]]):
        null
   return date && date.getTime && date.getTime()?date:null
  }

Вспомогательная функция позволяет нам (размытие) переформатировать значение 

  tryFormat(value:string)
  {
    const date=this.parse(value)
    this.date=date?this.format(date):value
  }

И функцию, когда " меню "открыто, позволяет изменить активную дату календаря, который появляется в ViewChild 

@ViewChild('calendar',{static:false}) calendar:any
onOpen()
  {
    if (this.date)
    {
      const date=this.parse(this.date);
      if (date)
      {
        this.calendar.activeDate=date;
      }
    }
  }

Наконец, html похоже на 

<mat-form-field class="example-full-width">
    <mat-label>Date</mat-label>
    <input matInput placeholder="{{placeHolder}}" [(ngModel)]="date" (blur)="tryFormat(date)" >
    <button matSuffix mat-icon-button [matMenuTriggerFor]="appMenu" (menuOpened)="onOpen()">
  <mat-icon>calendar_today</mat-icon>
</button>
  </mat-form-field>

<mat-menu #appMenu="matMenu" class="drop-calendar" >
    <div (click)="$event.stopPropagation()">
        <mat-calendar #calendar 
          (selectedChange)="date=format($event)" 
           [selected]="parse(date)">
        </mat-calendar>
    </div>
</mat-menu>

И полный код в стекаблиц

...