- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试将格式化为“longDate”字符串的日期绑定(bind)到 ngbDatePicker 中的 [ngModel] 输入值。例如,当用户选择日期时,我想显示“2017 年 1 月 15 日”而不是“2017-01-15”。
我知道 [ngModel] 仅绑定(bind)到 NgbDateStruct 类型的对象,在我看来,当我将 NgbDateStruct 类型的对象(我们将其称为 selectedStartDate,如下面的代码所示)传递给 [ngModel],然后传递给 NgbDateParserFormatter。 format(selectedStartDate) 在幕后被调用以将日期显示为“yyyy-MM-dd”。那么如何将 longDate 格式(即 2017 年 1 月 15 日)绑定(bind)到 [ngModel]?我考虑过覆盖 NgbDateParserFormatter 中的 format() 方法以显示我想要的日期,但我不确定当我传递 NgbDateStruct 对象以绑定(bind)到 [ngModel] 时如何/是否会调用它。
此外,最好保留 NgbDateStruct 解析/格式化方法,因为我将日期数据作为“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>
更新:虽然下面的解决方案有效,但出于某种原因我无法设置默认日期值。例如,从我的日期选择器所在的组件,我在 ngOnInit() 中实现 OnInit 和表单 我将我的“selectedStartDate”绑定(bind)字段设置为 NgbDateStruct 类型的日期。然后在 Debug模式下,我能够看到我的 selectedStartDate 字段被填充,最终调用 MyNgbDateParserFormatter.format() 将日期格式化为“longDate”字符串 - 但是 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);
}
}
提前感谢您的帮助,谢谢。
最佳答案
我认为您在覆盖 NgbDateParserFormatter 方面走在正确的轨道上。您想要创建自己的 ParserFormatter 实现,并将所选日期格式作为 .format() 函数的输出格式。类似地,您重写 .parse() 函数以获取您选择的日期格式并将其转换为 NgbDateStruct。如果你想为服务器使用另一种格式,那么我建议你也为它创建一个函数。我在这里创建了一个示例 plunker:
如图所示,第一步是扩展 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);
}
}
关于angular - NgbDatePicker - 如何将 longDate 字符串绑定(bind)到 [ngModel]?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41658935/
我有一个 foo 类,它有一个 bar 方法,它接受可调用的东西(函数指针/仿函数)。这个可调用的东西应该作为绑定(bind)元素传递给另一个方法 doit 和第三个方法 bar_cb 方法。 #in
我正在尝试在我的 WPF 4.0 应用程序(使用 VS 2010 Pro RTM)中创建自定义 TabItem 模板/样式,但尽管一切似乎都正常工作,但我注意到跟踪窗口中存在绑定(bind)错误。 我
作为一名刚接触 Android 的开发人员,我想我可能误解了绑定(bind)服务。 我创建了一项服务来结束对服务器的访问。作为此服务的一部分,该服务正在监听多播地址,以识别本地网络上的设备何时出现和消
这个问题在这里已经有了答案: What is the use of the JavaScript 'bind' method? (23 个回答) 关闭 7 年前。 所以我一直在尝试了解一些 JS 上
我不明白这三种语法之间的区别: where a = f (b) do a <- f (b) do let a = f (b) 我确实明白了a <- f(b)与其他两个不同,在大多数情况下,我尝试了所有
我在将 Cocoa 项目从手动同步接口(interface)模型转换为绑定(bind)模型时遇到问题,这样我就不必担心接口(interface)粘合代码。 我关注了 CocoaDevCentral C
我正在尝试找出一种好的方法来对处理大数据集的代码进行并行化,然后将结果数据导入 RavenDb。 数据处理受 CPU 限制和数据库导入 IO 限制。 我正在寻找一种解决方案,以对 Environmen
我正在 foreach 循环中生成单选按钮。我试图将选中的属性绑定(bind)到父级中的基本可观察值。不幸的是,当单击单选按钮时,父级的属性似乎没有在单击处理程序中更新。 基于一些previous w
在我的 Windows Phone 应用程序中,我有两个 LongListSelectors并排在页面上。我想做到这一点,以便当用户滚动其中一个时,另一个滚动相同的量。 两个 LongListSele
我在网上看到这个问题准备面试: Given a non-preemptive kernel which type of process will get affected morein terms o
我有一个 foreach 绑定(bind),如下所示: Summary Permitting 原因是有两个选项卡始终存在,并且我根据是否添加了其他选项卡来添加其他选项
任何人都有绑定(bind)相同的情况DataContext到 TextBlock 中的 Text 属性(例如)。 我必须分配 DataContext以我的风格反射(reflect)基于 Datacon
给定以下代码: Login 和下面的javascript $(function () { $('#btnLogin').click(function () { co
我使用 boost::asio 创建了一个服务器。我在绑定(bind)到端点时遇到问题。所以,如果我在构造函数中初始化一个接受器: Server::Server(QWidget *parent) :
我正在将现有项目从 MySQL 转换为 Postgres。代码中有相当多的原始 SQL 文字使用 ? 作为占位符,例如 SELECT id FROM users WHERE
似乎在绑定(bind)某些数据时出错了,有人可以帮我解决我哪里出错了,尽管我无法弄清楚。 真的不需要在这里显示太多,这是 Binding,我已经通过移除背景并在其中放置颜色来测试背景,效果很好。 编辑
我正在尝试使用 wcf 构建一个 http 监听器(web 服务)。这个监听器是一个更大的桌面应用程序的一部分。此桌面应用程序还会调用 http 监听器。 当监听器接收到数据时,它应该被传递到桌面应用
嘿嘿。 我正在使用 Node.JS 和 child_process 来生成 bash 进程。我试图了解我是否正在执行 I/O 绑定(bind)、CPU 绑定(bind)或两者兼而有之。 我正在使用 p
尝试执行以下操作并出现“Got interpolation ({{}}) where expression was expected”错误。 {{item.name}} 谢谢!
我有一个导入的 Java 库,它是我解决方案中的“绑定(bind)库”项目。 我正在尝试从解决方案中的另一个项目绑定(bind)到第 3 方库中的服务。 第 3 方库文档 [在 java 中] 非常简
我是一名优秀的程序员,十分优秀!