NgbDatePicker - Как связать строку longDate с [ngModel]?
Я пытаюсь привязать дату, отформатированную в виде строки "longDate", к входному значению [ngModel] в ngbDatePicker. Например, когда пользователь выбирает дату, я хотел бы отобразить "15 января 2017 года" вместо "2017-01-15".
Я понимаю, что [ngModel] привязывается только к объекту типа NgbDateStruct, и мне кажется, что когда я передаю объект типа NgbDateStruct (давайте назовем его selectedStartDate, как показано в коде ниже), то [ngModel] затем NgbDateParserFormatter.format (selectedStartDate)) вызывается за кулисами, чтобы отобразить дату как "гггг-мм-дд". Итак, как я могу связать формат longDate (т.е. 15 января 2017 г.) с [ngModel]? Я думал о переопределении метода format() в NgbDateParserFormatter для отображения даты так, как я хочу, но я не уверен, как / если она будет вызвана, когда я передаю объект NgbDateStruct для привязки к [ngModel].
Кроме того, было бы неплохо сохранить методы синтаксического анализа / форматирования NgbDateStruct по мере их поступления, потому что я передаю данные Date в виде строк "yyyy-MM-dd" в API, и они пригодятся... Я использую ngbootstrap alpha.18. Любая помощь приветствуется спасибо!
<div class="form-group">From:
<div class="input-group">
<input class="form-control"
name="dp1"
[ngModel]="selectedStartDate"
(ngModelChange)="selectStartDate($event)"
ngbDatepicker
[dayTemplate]="customDay"
[markDisabled]="isDisabled"
#d1="ngbDatepicker" />
<div class="input-group-addon" (click)="d1.toggle()">
<img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
</div>
</div>
</div>
ОБНОВЛЕНИЕ: хотя приведенное ниже решение работает, по какой-то причине я не могу установить значение даты по умолчанию. Например, из компонента, в котором находится мой инструмент выбора даты, я реализую OnInit и создаю форму в ngOnInit(). Я устанавливаю в поле привязки selectedStartDate дату типа NgbDateStruct. Затем, находясь в режиме отладки, я вижу, что мое поле selectedStartDate заполнено, и в конечном итоге вызывается MyNgbDateParserFormatter.format() для форматирования даты в строку "longDate", однако параметр date в методе format() имеет значение null и ошибка, конечно, выдается... Я не могу понять, почему это становится нулевым. После этого, когда я выбираю дату, "selectedDate" отображается в формате "longDate", как и ожидалось.
Следующая проблема, которую я заметил, заключается в том, что теперь каждый раз, когда я выбираю дату, метод selectStartDate() не срабатывает.
Вот мой модуль (я предоставляю это в "разделяемом модуле", потому что там объявлен мой компонент, использующий ngbdatepicker)
@NgModule({
imports: [
CommonModule,
FormsModule,
NgbModule,
ChartsModule
],
exports: [
CommonModule,
FormsModule,
NgbModule,
CrgbFilterComponent,
DateFilterComponent,
BarChartComponent,
LineChartComponent,
ChartsModule
],
declarations: [
CrgbFilterComponent,
DateFilterComponent,
BarChartComponent,
LineChartComponent
],
providers: [
{
provide: NgbDateParserFormatter,
useFactory: () => { return new CustomNgbDateParserFormatter("longDate") }
},
DateFilterService,
BarChartService,
TableService,
HelperMethodsService
]
})
export class SharedModule { }
Вот мой компонент (части, которые имеют значение):
export class DateFilterComponent implements OnInit {
selectedStartDate: NgbDateStruct;
selectedEndDate: NgbDateStruct;
@Output() startDateChanged: EventEmitter<string>;
@Output() endDateChanged: EventEmitter<string>;
constructor(private dateFilterService: DateFilterService) {
this.startDateChanged = new EventEmitter<string>();
this.endDateChanged = new EventEmitter<string>();
}
ngOnInit(): void {
this.selectStartDate(this.dateFilterService.setDefaultStartDate());
this.selectEndDate(this.dateFilterService.setDefaultEndDate());
}
selectStartDate(date: NgbDateStruct) {
if (date != null) {
this.selectedStartDate = date;
let dateString = this.dateFilterService.toServerString(date);;
this.startDateChanged.emit(dateString);
}
}
selectEndDate(date: NgbDateStruct) {
if (date != null) {
this.selectedEndDate = date;
let dateString = this.dateFilterService.toServerString(date);
this.endDateChanged.emit(dateString);
}
}
Вот мой сервис фильтрации даты:
export class DateFilterService {
constructor(private parserFormatter: NgbDateParserFormatter) { }
setDefaultStartDate(): NgbDateStruct {
// removing for simplicity, returning a NgbDateStruct object correctly.
}
setDefaultEndDate(): NgbDateStruct {
// removing for simplicity, returning a NgbDateStruct object correctly.
}
toNgbDateStruct(date: string): NgbDateStruct {
return this.parserFormatter.parse(date);
}
tolongDateString(date: NgbDateStruct): string {
return this.parserFormatter.format(date);
}
toServerString(date: NgbDateStruct): string {
return this.parserFormatter.formatForServer(date);
}
}
Спасибо за любую помощь заранее, спасибо.
1 ответ
Я думаю, что вы на правильном пути с переопределением NgbDateParserFormatter. Вы хотите создать свою собственную реализацию ParserFormatter с выбранным форматом даты в качестве выходного с помощью функции.format(). Точно так же вы переопределяете функцию.parse(), чтобы взять выбранный вами формат даты и преобразовать его в NgbDateStruct. Если вы хотите иметь другой формат для сервера, то я предлагаю вам также создать функцию для этого. Я создал пример плунжера здесь:
Как показано, первым шагом является расширение NgbDateParserFormatter и перезапись двух упомянутых функций:
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';
export class MyNgbDateParserFormatter extends NgbDateParserFormatter {
datePipe = new DatePipe('en-US');
constructor(
private dateFormatString: string) {
super();
}
format(date: NgbDateStruct): string {
if (date === null) {
return '';
}
try {
return this.datePipe.transform(new Date(date.year, date.month - 1, date.day), this.dateFormatString);
} catch (e) {
return '';
}
}
formatForServer(date: NgbDateStruct): string {
if (date === null) {
return '';
}
try {
return this.datePipe.transform(new Date(date.year, date.month - 1, date.day), 'y-MM-dd');
} catch (e) {
return '';
}
}
parse(value: string): NgbDateStruct {
let returnVal: NgbDateStruct;
if (!value) {
returnVal = null;
} else {
try {
let dateParts = this.datePipe.transform(value, 'M-d-y').split('-');
returnVal = { year: parseInt(dateParts[2]), month: parseInt(dateParts[0]), day: parseInt(dateParts[1]) };
} catch (e) {
returnVal = null;
}
}
return returnVal;
}
}
В вашем AppModule вам нужно предоставить эту новую реализацию:
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
JsonpModule,
NgbModule.forRoot()
],
declarations: [
App,
NgbdDatepickerPopup
]
bootstrap: [ App ],
providers: [
{provide: NgbDateParserFormatter, useFactory: () => new MyNgbDateParserFormatter('longDate')}
]
})
export class AppModule {}
Затем ваши ngbDatepickers будут использовать эту версию функций parse () и format (). Вы также можете вызвать функцию formatForServer() при необходимости:
import {Component} from '@angular/core';
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-datepicker-popup',
templateUrl: 'src/datepicker-popup.html'
})
export class NgbdDatepickerPopup {
model;
constructor(
private ngbDateParserFormatter: NgbDateParserFormatter
) {}
getServerDate(dateStruct) {
return this.ngbDateParserFormatter.formatForServer(dateStruct);
}
}