ng-pick-datetime формат даты

Question

Я использую угловой в том, что используется ng-pick-datetime npm. Когда я пытаюсь изменить формат после выбора даты (дд / мм / гггг), но я получил (ММ / дд / гггг) только. Я не знаю, как это сделать.

Снимок экрана для уточнения моего вопроса:

HTML

<input
    [owlDateTime]="dt1"
    [owlDateTimeTrigger]="dt1"
    placeholder="Wedding Anniversary"
    formControlName="wedding"
    class="form-control"
    onkeydown="return false"
    id="text-input"
    name="wedding"
    max="{{ maxDate | date: 'yyyy-MM-dd' }}"
  />
  <owl-date-time #dt1 [pickerType]="'calendar'"></owl-date-time>

Мне нужен такой результат (дд / мм / гггг). Большое спасибо ...

Answer 1

Использование средства выбора с MomentJS. Вот пример использования OwlMomentDateTimeModule с различными форматами даты и времени: (Осторожно, что OwlMomentDateTimeModule требует MomentJS)

npm Установка:

npm install ng-pick-datetime-moment moment --save;

код:

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';
import { OwlMomentDateTimeModule } from 'ng-pick-datetime-moment';

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_MOMENT_FORMATS = {
    parseInput: 'l LT',
    fullPickerInput: 'l LT',
    datePickerInput: 'l',
    timePickerInput: 'LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
};

@NgModule({
    imports: [OwlDateTimeModule, OwlMomentDateTimeModule],
    providers: [
        {provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS},
    ],
})
export class AppExampleModule {
}

Answer 2

Это прекрасно работает, я только сейчас прочитал документ.Добавьте код ниже в модуле

providers: [
    ClientService,
    DatePipe, 
    {provide: OWL_DATE_TIME_LOCALE, useValue: 'in'}
]

Answer 3

Добавление объекта в ваш компонент с нужным форматом даты.

Дополнительная информация: https://daniel -projects.firebaseapp.com / owlng / date-time-picker # реализационный формат

import { DateTimeAdapter, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { MomentDateTimeAdapter } from 'ng-pick-datetime-moment';

export const MY_CUSTOM_FORMATS = {
  parseInput: 'DD/MM/YYYY',
  fullPickerInput: 'DD/MM/YYYY hh:mm a',
  datePickerInput: 'DD/MM/YYYY',
  timePickerInput: 'hh:mm a',
  monthYearLabel: 'MMM-YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM-YYYY'
};

@Component({
  selector: 'time-series',
  templateUrl: './time-series.component.html',
  styleUrls: ['./time-series.component.scss'],
  providers: [
    { provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] },
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }
  ]
})
@Injectable()
export class TimeSeriesComponent {
   ....
}