Угловой материал 6 DatePicker разных форматов в одном компоненте - PullRequest
Новая
       5

Угловой материал 6 DatePicker разных форматов в одном компоненте

0 голосов
/ 06 октября 2018

Мне нужно выбрать два разных формата даты (ГГГГ-ММ-ДД и ГГГГ-ММ) в двух полях выбора даты в одном представлении компонентов.

Я использую угловой 6.0.3 и материал 6.4.7.

Я настроил формат DatePicker на YYYY-MM-DD в модуле приложения, используя MAT_DATE_FORMATS, и он работает глобально, но мне нужно переопределить этот формат на YYYY-MM в нескольких полях DatePicker, как я писал выше.К сожалению, я понятия не имею, как мне этого добиться.

Не могли бы вы мне помочь, пожалуйста?

Части моего кода: 

        import { Component, OnInit, ViewChild } from '@angular/core';
    import { FormGroup, FormControl } from '@angular/forms';

    @Component({
      selector: 'app-invoice-list',
      templateUrl: './invoice-list.component.html',
      styleUrls: ['./invoice-list.component.css']
    })
    export class InvoiceListComponent {

      filterForm: FormGroup;

      @ViewChild('month_picker') month_picker;

      constructor() {
        this.filterForm = new FormGroup({
          assigned_date_from: new FormControl(),
          assigned_date_to: new FormControl(),
          assigned_month: new FormControl(),
        });
      }
    }

<div class="container" [formGroup]="filterForm">
  <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="start">
      <div fxFlex="32%">
        <mat-form-field>
            <input matInput [matDatepicker]="date_from_picker" (focus)="date_from_picker.open()" formControlName="assigned_date_from" placeholder="Date from">
            <mat-datepicker-toggle matSuffix [for]="date_from_picker"></mat-datepicker-toggle>
            <mat-datepicker #date_from_picker></mat-datepicker>
        </mat-form-field>
      </div>
      <div fxFlex="32%">
        <mat-form-field>
            <input matInput [matDatepicker]="date_to_picker" (focus)="date_to_picker.open()" formControlName="assigned_date_to" placeholder="Date to">
            <mat-datepicker-toggle matSuffix [for]="date_to_picker"></mat-datepicker-toggle>
            <mat-datepicker #date_to_picker></mat-datepicker>
          </mat-form-field>
      </div>

      <!-- In below input I want month year format - YYYY-MM - so different than default format in above fields -->
      <div fxFlex="32%">
          <mat-form-field>
              <input matInput [matDatepicker]="month_picker" (focus)="month_picker.open()" formControlName="assigned_month" placeholder="Month">
              <mat-datepicker-toggle matSuffix [for]="month_picker"></mat-datepicker-toggle>
              <mat-datepicker #month_picker></mat-datepicker>
            </mat-form-field>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 06 октября 2018

Пожалуйста, попробуйте это.В вашем HTML 

        <mat-form-field>
          <input matInput [matDatepicker]="month_picker" (focus)="month_picker.open()" [value] = "selectedMonth" placeholder="Month">
          <mat-datepicker-toggle matSuffix [for]="month_picker"></mat-datepicker-toggle>
          <mat-datepicker #month_picker  
              startView="multi-year"
              (monthSelected)="chosenMonthHandler($event, month_picker)"></mat-datepicker>
        </mat-form-field>

В вашем .ts 

    selectedMonth = new Date();

    chosenMonthHandler(normlizedMonth, datepicker) {
        var tempDate = JSON.stringify(normlizedMonth).replace("\"",'').split("-")
        var month = parseInt(tempDate[1])
        var year = month == 12?parseInt(tempDate[0])+1:parseInt(tempDate[0])
        var year = month == 12?parseInt(tempDate[0])+1:parseInt(tempDate[0])
        month = month == 12?1:month+1;
        this.selectedMonth = new Date(year + "-" + month)
        console.log(year + " " + month)
        datepicker.close();
      }

Это хорошо работает. Но показывает выбранную дату как 1 после выбора месяца. Но я думаю, что это отвечает вашим требованиям.

...