Ng-pick-date picker: как установить формат даты?
Я хочу использовать средство выбора даты. Я хочу установить формат даты, но не могу понять, как это сделать. Так может ли кто-нибудь дать мне пример, как установить формат даты?
Вот код моего средства выбора даты:
<label class = "control-label my-label">From Date</label>
<div class = "input-group">
<input tabindex = "1" class = "form-control" [owlDateTime] = "fromDateOfConfirmation" [(ngModel)] = "fromDate" name = "fromDate" [owlDateTimeTrigger] = "fromDateOfConfirmation"
>
<span class = "input-group-addon trigger" [owlDateTimeTrigger] = "fromDateOfConfirmation">
<span class = "fa fa-calendar nopad2 fa-lg"></span>
</span>
<owl-date-time [pickerType] = "'calendar'" #fromDateOfConfirmation></owl-date-time>
</div>
РЕДАКТИРОВАТЬ
Я уже пробовал это.
export const MY_NATIVE_FORMATS = {
parseInput: 'LL LT',
fullPickerInput: 'LL LT',
datePickerInput: 'LL',
timePickerInput: 'LT',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
};
providers: [
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS },
],
Ответы 4
вы должны передать настраиваемый объект службе через поставщика useValue
export const MY_CUSTOM_FORMATS = {
parseInput: 'LL LT',
fullPickerInput: 'LL LT',
datePickerInput: 'LL',
timePickerInput: 'LT',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
};
selector: 'app-custom-format-example',
templateUrl: './custom-format.component.html',
providers: [
{provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS},
],
проверьте демонстрация
я думаю, что они не предоставили входной параметр, чтобы изменить его вот так
Итак, как мы можем узнать, какой из MY_CUSTOM_FORMATS применяется? И как ??
внутри компонента мы используем провайдера. поэтому для этого компонента будут добавлены только пользовательские форматы.
Но мой вопрос в том, какой ??
если вы используете несколько сборщиков внутри компонента, это повлияет на все
Я хочу установить один формат для всего приложения, чтобы это не имело значения.
да. затем вместо компонента добавьте объект поставщика в список поставщиков модуля приложения
Но это не работает. Я уже делал это раньше. Вот почему я ищу решение.
создать демо
Должен ли я, потому что это то же самое, что и демонстрация stackblitz, которую вы предоставили.
Позвольте нам продолжить обсуждение в чате.
Мне нужен вот такой 06-05-2020 11:22 AM GMT. Я пробовал, но могу получить только часовой пояс, например +05: 30. Но мне нужно показать это как String (IST). Пожалуйста, помогите в этом
Невозможно увидеть частные чаты или какое-либо решение, когда ссылки не работают, поэтому этот ответ не так полезен
Вам нужно создать еще один ввод, который будет отображать форматированное значение даты. В вашем html создайте один ввод для [ngModel], а другой - для отображения форматированного значения даты.
<div class = "date-container">
<!-- Invisible input keep ngModel value -->
<input
class = "shadow-input"
name = "date_time"
[(ngModel)] = "currentDate"
[owlDateTime] = "dt1"
>
<!-- Trigger owl-datepicker, display formatted date value -->
<input
type = "text"
[owlDateTimeTrigger] = "dt1"
placeholder = "Date Time"
[value] = "currentDate | dateFilter:dateFormat"
>
<owl-date-time #dt1></owl-date-time>
</div>
См. Демонстрацию на stackblitz
Некрасиво, но умно :)
Лучший ответ здесь. Документация для owl-date-time крайне скудная, а решение moment.js для форматирования в модуле не имеет документации. Вы можете видеть, что все используют одно и то же значение OWL_MOMENT_FORMATS, потому что неясно, как могут выглядеть другие значения. Лично я сожалею об использовании owl-date-time, но я рад, что нашел этот ответ
Я думаю, вы забыли импортировать OwlMomentDateTimeModule.
@NgModule({
imports: [
OwlDateTimeModule,
OwlNativeDateTimeModule,
OwlMomentDateTimeModule
],
providers: [
{
provide: OWL_DATE_TIME_FORMATS, useValue: OWL_MOMENT_FORMATS
}
]
})
Если вы хотите использовать этот тип форматов, вам нужно использовать отдельный модуль под названием
OwlMomentDateTimeModule
Но для этого требуется дополнительный пакет NPM (MoementJS)
Первый шаг, установите MomentJS
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 {
}
Как альтернатива вы можете использовать стандартные форматеры
import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';
// learn more about this from
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
export const MY_NATIVE_FORMATS = {
fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'},
datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric'},
timePickerInput: {hour: 'numeric', minute: 'numeric'},
monthYearLabel: {year: 'numeric', month: 'short'},
dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
monthYearA11yLabel: {year: 'numeric', month: 'long'},
};
@NgModule({
imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
providers: [
{provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS},
],
})
export class AppExampleModule {
}
Узнать больше о Ng Date Time Picker здесь
Да, я сделал это, но не работал. Как установить формат даты из html, например [owl Date Time] = "fromDate Confirmation" ??