угловая подача материала - PullRequest
Новая
       13

угловая подача материала

0 голосов
/ 20 февраля 2019

Я просмотрел документацию по датировщику угловых материалов, и он не сработал, чтобы перейти к выводу.Я использовал некоторые ответы здесь на stackoverflow, но они все еще только изменили отображаемый формат.Как вы можете видеть на картинке, я не могу изменить вывод средства выбора даты с понедельника, 11 февраля, на формат в поле ввода средства выбора даты 11-02-2019 пример .Как мне заставить его выводить формат, как показано в строке ввода datepicker вместо понедельника, 11 февраля, и удалять приложенное значение времени.

Пока мой компонент.ts: 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {DateAdapter,NativeDateAdapter,MAT_DATE_FORMATS,MAT_DATE_LOCALE} from "@angular/material/core";
import * as moment from "moment";
import { DatabaseService } from 'src/app/database.service'
import { Observable } from 'rxjs';
const CUSTOM_DATE_FORMATS = {parse: {dateInput: { month: "short", year: "numeric", day: "numeric" }},
display: {
dateInput: "input",
monthYearLabel: { year: "numeric", month: "short" },
dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
monthYearA11yLabel: { year: "numeric", month: "long" }}};
const dateFormat = "DD-MM-YYYY";
class AppDateAdapter extends NativeDateAdapter {format(date: Date, displayFormat: Object): string {
if (displayFormat === "input") {return moment(date).format(dateFormat);}else {
  return date.toDateString();}}}
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],

  providers: [
     { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
     { provide: DateAdapter, useClass: AppDateAdapter }
]
})
export class DashboardComponent implements OnInit {
get data(): string {
return this.databaseService.serviceData;
}
set data(value: string) { 
this.databaseService.serviceData = (value);  } 

@Input() placeholder;
@Output() onFilter: EventEmitter<any> = new EventEmitter<any>();
@Input() selectedValue;
@Output() selectedValueChange: EventEmitter<any> = new EventEmitter<any>();

private _selectedValue;

constructor(public databaseService: DatabaseService){}

ngOnInit() {
this._selectedValue = this.data;}

onChange($event) {
this.selectedValue = this.updateDate($event.value);
this.onFilter.emit(this.data);}

updateDate(date) {
let formatedDate;
if (date !== undefined) {
  formatedDate = moment(date).format(dateFormat);
}
this.selectedValueChange.emit(formatedDate);
return formatedDate;
   }

}

И мой HTML: 

<div style="top: 50%; position: absolute;">
  <mat-form-field class="datepicker">
    <input matInput [matDatepicker]="picker" [(ngModel)]= data>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker touchUi #picker></mat-datepicker>
  </mat-form-field>  
 <h2 >Data from A: {{ data }} </h2> 
 <input [(ngModel)] = data/>
 <a [routerLink]="['/**']">Go to B</a> 
</div>

1 Ответ

0 голосов
/ 20 февраля 2019

Выходной объект, предоставленный из материала DatePicker, уже содержит всю необходимую информацию, вам нужно только правильно распечатать ее.

Попробуйте: 

    <h2 >Data from A: {{data.format("DD-MM-YYYY")}} </h2>

Вместо вашего: 

    <h2 >Data from A: {{ data }} </h2>

Просто чтобы быть уверенным, я проверил это на работающем проекте, и он работает правильно.

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

Если вам нужно выполнить некоторую процедуру, когдадата изменяется, вам нужно настроить «слушатель» (dateChange) на входе datePicker, таким образом: 

   ...
    <input matInput [matDatepicker]="picker" [(ngModel)]= data (dateChange)="yourFunctionName($event.value)">
   ...

$ event.value имеет значение сохранения «data»Таким образом, в этот момент вы можете удалить данные [(ngModel)] = (которые устарели в Angular 6 )

Затем, когда слушатель настроен, вы можете создать функцию в вашемфайл машинописного текста, который обрабатывает изменение даты. 

yourFunctionName(event: any) {
    const data = event;
    const formattedDate = data.getDate() + '-' + (data.getMonth() + 1) + '-' + data.getFullYear();
    ... do your operations with formattedDate ...
}

Теперь ваша дата правильно отформатирована и доступна в переменной "formattedDate".
Если вам нужен доступ к этим данным в вашем компоненте вне этой функции, вы можете объявитьвнешняя переменная (например, «данные»)вы уже создали) и ссылаетесь на нее внутри функции с помощью синтаксиса this.data 

data: string;

yourFunctionName(event: any) {
        ...
        this.data = data.getDate() + '-' + (data.getMonth() + 1) + '-' + data.getFullYear();
        ...
    }

Вы можете безразлично форматировать дату, используя ".getDate ()" & friends или используя Moment.

...