Блог

Главная - Вопросы по программированию - Измените формат даты, отображаемой в Датапикере (Угловой), с помощью пользовательского канала

Измените формат даты, отображаемой в Датапикере (Угловой), с помощью пользовательского канала

#javascript #angular #typescript #date #datepicker

Вопрос:

По умолчанию для выбора даты используется формат ММ/дд/гггг, и я хочу, чтобы он был установлен в соответствии с языком браузера, например) если английский, то он должен быть дд/ММ/гггг(используется в примере ниже)

Это моя пользовательская дата-трубка — >

 @Pipe({ name: 'replaceDate1' })
export class ReplaceDate1Pipe implements PipeTransform {
    transform(value: string): string {
        if (!value) {
            return value;
        }

        let date1 = (new Date(value));
        var userLang = navigator.language;  
        console.log(value);
        console.log(date1);
        console.log(Intl.DateTimeFormat(userLang).format(date1));
        return Intl.DateTimeFormat(userLang).format(date1);
    }
}

Это часть html ->

 <mat-form-field [floatLabel]="never" appearance="fill" id="xxx" class="textbox1" panelClass="option-panel">
<mat-label>Choose a date</mat-label>
<input [min]="todayDate" [disabled]="fun1()" readonly matInput [matDatepicker]="picker" [value]="program.datetobeformatted | replaceDate1" [matDatepickerFilter]="myDateFilter" (dateChange)="onChange($event, 'xxx',  program, $index)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Здесь я хочу изменить формат значения даты, отображаемого в окне выбора даты, но значение отображается в виде пустого поля в пользовательском интерфейсе
Пустое изображение значения указателя даты

я записал значения, когда вызывается канал, и это удовлетворительно, но почему это не отображается в окне выбора даты

и есть ли какой-либо способ изменить формат datepicker из HTML-файла (я просто хочу соответствующим образом отобразить формат и не изменять значение формата даты, используемого для внутренних служб)

это выходные данные журнала из replaceDate1 канала

 2021-06-30T00:00:00Z
Wed Jun 30 2021 05:30:00 GMT 0530 (India Standard Time)
30/6/2021

Комментарии:

1. Вы не должны преобразовывать формат value для форматирования отображаемого формата даты. Вы читали документацию ?

2. @YongShun спасибо за ваш вклад , но я не хочу использовать там ngModel , есть ли какой-либо другой способ указать дату

3. @JSONDerulo можете ли вы указать, куда поместить канал даты в HTML-файл, чтобы изменить формат даты

Ответ №1:

Вы пробовали изменить языковой стандарт для средства выбора даты мата?

 { provide: MAT_DATE_LOCALE, useValue: 'en-IN' }

Добавьте это в раздел поставщики вашего модуля

https://material.angular.io/components/datepicker/overview

Метки: , ,