如何在Angular材料中設定MatDateRangePicker的值 -有解無憂

 <form [formGroup]="form"/span>>
        < mat-form-field appearance="outline"/span> class="date-picker"  style="margin-right: auto;">
            <mat-label>?? ???? ????? ?????? ????</mat-label> 
            <mat-date-range-input [rangePicker]="rangePicker"/span>>
                < input matInput #dateRangeStart matStartDate placeholder="????? ????" formControlName="fromDate"> 
                < input matInput #dateRangeEnd matEndDate placeholder="????? ?????" formControlName="toDate"/span>> 
            </mat-date-range-input> 
            <mat-dateepicker-toggle matSuffix [for]="rangePicker"> </mat-datepicker-toggle>。
                <mat-date-range-picker #rangePicker>/span>
                    <mat-date-range-picker-actions>/span>
                        <button mat-button matDateRangePickerCancel> ????</button>。
                        < button mat-raised-button color="primary" matDateRangePickerApply （click）="onFormSubmit（）"> ????</button>。
                    </mat-date-range-picker-actions> 
                </mat-date-range-picker> 
        </mat-form-field>/span>
    </form>

我這樣定義表單

 initForm（） {
    this.form = this.formBuilder.group（{
      fromDate: new FormControl(),
      toDate: new FormControl()
    });

并且想從ts檔案中設定值，像這樣

 if (filterModel.fromCreateDate &＆amp; filterModel.toCreateDate) { 
           this.form.get（'fromDate'）? setValue(this.convertToMiladi(filterModel.fromCreateDate) ）。)
            this.form.get（'toDate'）? setValue(this.convertToMiladi(filterModel.toCreateDate) ）。)
          }

我如何轉換為miladi是這樣的

 convertToMiladi（date: string）{
    let convertableDate = moment（date）。 locale('en').format('YYY-MM-DD')
    var m = moment(convertableDate, 'jYYYY-jMM-jDM');
    m = m.locale('en')
    return m.format('YYY-MM-DD')。
  }

我有一個用于Calender的配接器

import { Inject, Optional } from '@angular/core'/span>。
import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core'。
import * as jMoment from 'moment-jalaali'/span>;
const minin: any = jMoment;

export const PERSIAN_DATE_FORMATS = {
  parse: {
    dateInput: "jYYYY/jMM/jDD"。
  },
  display: {
    dateInput: "jYYYY/jMM/jDD"。
    monthYearLabel: "jYYYY jMMMM",
    dateA11yLabel: "jYYYY/jMM/jDD",
    monthYearA11yLabel: "jYYYY jMMMM".
  }
};

export class JalaliMomentDateAdapter extends DateAdapter<jMoment。 Moment> {
  constructor(@Optional() @Inject(MAT_DATE_LOCALE) matDateLocale: string) {
    super（）。
    this.setLocale(matDateLocale || minmin.locale('fa') ) 。
    minmin.loadPersian()。
  }

  invalid（） {
    return 'hi'/span> as any;

  }

  toIso8601（date） {
    return 'hi'。

  }

  /***。
   *回傳Jalali日歷系統中的年份。
   */
  getYear(date: jMoment.Moment) : number {
    return this.clone（date）.jYear（）。
  }

  /**。
   *回傳jalali日歷系統中的月份。
   */
  getMonth(date: jMoment.Moment) : number {
    return this.clone（date）.jMonth（）。
  }

  /**。
   *回傳jalali日歷系統中的日期。
   */
  getDate(date: jMoment.Moment) : number {
    return this.clone（date）.jDate（）。
  }

  /**。
   *回傳jalali日歷系統中的星期數。
   */
  getDayOfWeek(date: jMoment.Moment) : number {
    return this.clone（date）.day（）。
  }

  /**。
   * 回傳jalali日歷系統中的月名。
   *大多數時候我們使用長格式。短或窄格式的月名有點奇怪。
   */
  getMonthNames（style: 'long' | 'short' | 'narrow') : string[] {
    const r: string[] = [] 。
    minmin.loadPersian({ dialect: 'persian-modern', usePersianDigits: true }）。)
    const l = minmin().localeData() 。
    if (style =='long' || style =='short') {
      Object.keys(l).forEach(>key =>  {
        if (key === '_jMonths') {
          const values = l[key];
          for (let index = 0; index < values.length; index  ) {
            r.push（values[index]）。
          }
        }
      });
    } else {
      Object.keys(l).forEach(>key =>  {
        if (key === '_jMonthsShort') {
          const values = l[key];
          for (let index = 0; index < values.length; index  ) {
            r.push（values[index]）。
          }
        }
      });
    }
    return r;
    // switch (style) {
    // case 'long':
    // const mlong = (minmin().localeData() as any)._jMonths.slice(0);
    // console.log(mlong);
    // return mlong;
    // case 'short':
    // const mshort = (minmin().localeData() as any)._jMonthsShort.slice(0);
    // console.log('mshort: ', mshort);
    // return mshort;
    // case '窄':
    // return (minmin().localeData() as any)._jMonthsShort.slice(0); 
    // }
  }

  /****
   *借用了angular的材料代碼。
   */
  getDateNames(): string[] {
    return this. range(31, i =>  String(i   1)) 。
  }

  /**。
   *回傳jalali日歷系統中的星期名稱。
   */
  getDayOfWeekNames（style: 'long' | 'short' | 'narrow'）: string[] {
    switch (style) {
      case 'long':
        return minin().localeData（）。 weekdays().slice（0）。
      case 'short':
        return minin().localeData（）。 weekdaysShort().slice（0）。
      case '窄':
        return minin().localeData（）。 weekdaysMin().slice（0）。
    }
  }

  /**。
   *回傳Jalali日歷系統中的年份。
   */
  getYearName(date: jMoment.Moment) : string {
    return this.clone（date）。 jYear().toString()。
  }

  /**。
   * 回傳jalali日歷系統中一周的第一天。
   *一周的第一天是星期六，????
   */
  getFirstDayOfWeek(): number {
    return 6;
  }

  /****
   *回傳jalali日歷系統中的月度天數。
   */
  getNumDaysInMonth(date: jMoment.Moment, fa? ) : number {
    if (date['_d']) {
      return minmin.jDaysInMonth(this. getYear(date['_d']), this。 getMonth(date['_d'])。
    }
    return minmin.jDaysInMonth(this. getYear(date), this.getMonth(date)）。)
  }

  clone(date: jMoment.Moment) : jMoment.Moment{
    // return date.clone().locale(this.locale);.
    return minim(date)。
  }

  createDate(year: number, month: number, date: number): jMoment.Moment{
    return minmin().jYear(year). jMonth(month).jDate(date)。
  }

  today(): jMoment.Moment {
    return minin()。
  }

  parse(value: any, parseFormat: string | string[]): jMoment.Moment | null{
    if (value && typeof value == 'string') {
      return minin(value, parseFormat, this.locale) 。
    }
    return value ? minim(value).locale(this.locale) 。null。
  }

  format(date: jMoment.Moment, displayFormat: any) : string {
    return this.clone（date）.format（displayFormat）。
  }

  addCalendarYears(date: jMoment.Moment, years: number) : jMoment.Moment{
    return this.clone（date）.add（year, 'jYear'）。
  }

  addCalendarMonths(date: jMoment. Moment, months: number) : jMoment.Moment {
    return this.clone（date）。 add(month as any, 'jmonth')。
  }

  addCalendarDays(date: jMoment.Moment, days: number) : jMoment.Moment{
    return this.clone(date).add(days, 'day' /span>) 。
  }

  getISODateString(date: jMoment.Moment): string {
    return this.clone(date).format('jYYYY-jMM-jDD'/span>) 。
  }

  isDateInstance(obj: any): boolean {
    return minmin.isMoment（obj）。
  }

  isValid(date: jMoment.Moment) : boolean {
    return this.clone（date）.isValid（）。
  }

  range<T>(length: number, valueFunction: (index: number) => T）。) T[] {
    const valuesArray = Array（length）。
    for (let i = 0; i < length; i  ) {
      valuesArray[i] = valueFunction（i）。
    }
    return valuesArray;
  }

我試著設定值，但我的日期范圍選擇器在Angular反應式中的patchValue或setValue之后是空的。有人能幫助我從ts檔案中為mat日期范圍選擇器設定值嗎？

uj5u.com熱心網友回復：

由于你的JalaliMomentDateAdapter擴展了DateAdapter<T>，其中T是jMoment.Moment。

因此，你需要將jMoment.Moment型別的值設定為FormControl。

convertToMiladi（date: string）{
  //將日期格式與決議的日期格式相匹配。
  return moment(date, 'YYY/MM/DD');
}

StackBlitz的示例演示

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/328398.html

標籤：

上一篇：按多個鍵對陣列進行排序，可選鍵

下一篇：在資料庫中找到每個季度的最后一個月的第一天？