角材料DatepickerRange更改时获取价值

问题描述

我有 Angular Material的DatePickerRange,我想在我尝试使用该函数(更改)的DatePicker中更改值时运行一个函数,但是它不起作用,我很乐意为您提供帮助。 谢谢!

这是我的html:

<mat-form-field class="form-field">
    <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>

这就是我要激活的功能:

   @Output() newItemEvent = new EventEmitter<bookedDate>();
      addNewDate() {
        this.dateRange.dateStart = this.range.get('start').value;
        this.dateRange.dateEnd = this.range.get('end').value;
        this.newItemEvent.emit(this.dateRange);
      }

解决方法

改为尝试dateChange

<mat-date-range-input [formGroup]="range" [rangePicker]="picker" (dateChange)="addNewDate()">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
,

我有一些与您的问题类似的问题对我有用,因此我希望它可以为您提供帮助或为您提供解决方案的提示 这是我的html:

<mat-form-field class="dialogform">
  <mat-label>Duree du Session : </mat-label>
    <input matInput
       required
       placeholder=""
       [satDatepicker]="picker"
       [value]="dateRangeDisp"
       (dateChange)="saveDate($event)"
    >
  <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
  <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
  </mat-form-field>

函数是:

     saveDate(event: any) {
    // look at how the date is emitted from save
    console.log(event.target.value.begin);
    //this.session.dateDebut = event.target.value.begin;
    console.log(event.target.value.end);

    // change in view
     this.dateRangeDisp = event.target.value;


    // save date range as string value for sending to db

    // ... save to db
  }
,

我的方法是将link添加到matStartDatematEndDate的输入中。在下面的模板示例中,它们是dateRangeStartdateRangeEnd

// Template

<mat-form-field appearance="standard">
  <mat-label>{{reportField.value.label}}</mat-label>
  <mat-date-range-input [rangePicker]="dateRangePicker">
    <input matStartDate
      placeholder="Start date"
      #dateRangeStart>
    <input matEndDate
      placeholder="End date"
      #dateRangeEnd
      (dateChange)="dateRangeChange(dateRangeStart,dateRangeEnd)">
  </mat-date-range-input>
  <mat-datepicker-toggle matPrefix
    [for]="dateRangePicker">
  </mat-datepicker-toggle>
  <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
</mat-form-field>

然后可以通过dateChange上的matEndDate输出调用的函数来访问这些输入的值。

// Component

dateRangeChange(dateRangeStart: HTMLInputElement,dateRangeEnd: HTMLInputElement) {
  console.log(dateRangeStart.value);
  console.log(dateRangeEnd.value);
}

这避免了两个输入都需要dateChange事件。

,

@Kirubel和@Irad Amri谢谢!

它最终以这种方式对我有效:

HTML-

<mat-form-field class="form-field">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
        <input **(dateInput)="addEvent('input',$event)" 
(dateChange)="addEvent('change',$event)"** matStartDate
            formControlName="start" placeholder="Start date">
        <input **(dateInput)="addNewDate('input',$event)" 
 (dateChange)="addNewDate('change',$event)"** 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>

TS-

@Output() newItemEvent = new EventEmitter<bookedDate>();

  addNewDate(type: string,event: MatDatepickerInputEvent<Date>) {
    this.dateRange.dateStart = this.range.get('start').value;
    this.dateRange.dateEnd = this.range.get('end').value;
    this.newItemEvent.emit(this.dateRange);
  }

再次感谢您的帮助!

,

我自己也遇到过这个问题,以下是对我有帮助的解决方案: 组件.ts:

    import * as moment from 'moment';
    import { FormControl,FormGroup } from "@angular/forms";
    import { DateAdapter,MAT_DATE_FORMATS,MatDateFormats } from "@angular/material/core";
    import {  MomentDateAdapter } from '@angular/material-moment-adapter';
        const CUSTOM_DATE_FORMATS: MatDateFormats = {
        parse: {
            dateInput: 'D/MM/YYYY'
        },display: {
            dateInput: 'DD/MM/YYYY',monthYearLabel: 'MMMM Y',dateA11yLabel: 'LL',monthYearA11yLabel: 'MMMM Y'
        }
    };
    @Component({
        providers: [
            {provide: MAT_DATE_FORMATS,useValue: CUSTOM_DATE_FORMATS},{provide: DateAdapter,useClass: MomentDateAdapter}
        ],})
    
        @ViewChild('picker') picker: any;
        dateRange: moment.Moment;
        disabled = false;
        tempDate = new Date().setMonth(new Date().getMonth() - 1);
        range = new FormGroup({
            start: new FormControl(new Date(this.tempDate)),end: new FormControl(new Date()),});
    
        ngAfterViewInit() {
            this.range.valueChanges.pipe(
                debounceTime(200)
            ).subscribe(event => {
                if (event.start && event.end) {
                    this.onDateChanged(event);
                }
            });
        }
  
    <mat-form-field class="date-range" 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>

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...