datetimepicker - 如何在 ng2-smart-table 中添加 Datetimepicker
问题描述
我想向datetimepicker
ng2-smart-table 组件添加一个组件。我现在所能做的就是添加一个datepicker
,但我也想在其中添加时间。
我尝试过一些 owl-date-time 组件。但它弄乱了整个窗口。
HTML 文件
<div class="input-group">
<span [owlDateTimeTrigger]="dt" class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input
[owlDateTimeTrigger]="dt" [owlDateTime]="dt"
[(ngModel)]="inputModel"
placeholder="{{placeholder}}"
[min]='min' [max]='max'
readonly
class="form-control">
</div>
<owl-date-time #dt [stepMinute]="15" [hour12Timer]='true' (afterPickerClosed)="onChange()"></owl-date-time>
**.ts file**
@Input() placeholder: string = 'Choose a Date/Time';
@Input() min: Date; // Defaults to now(rounded down to the nearest 15 minute mark)
@Input() max: Date; // Defaults to 1 month after the min
stringValue;
inputModel: Date;
constructor() {
super();
}
ngOnInit() {
if(!this.min) {
this.min = new Date();
this.min.setMinutes(Math.floor(this.min.getMinutes() / 15) * 15 );
}
if(!this.max) {
this.max = new Date(this.min);
this.max.setFullYear(this.min.getFullYear() + 1);
}
if(this.cell.newValue) {
let cellValue = new Date(this.cell.newValue);
if(cellValue.getTime() >= this.min.getTime() && cellValue.getTime() <= this.max.getTime()) {
this.inputModel = cellValue;
this.cell.newValue = this.inputModel.toISOString();
}
}
if(!this.inputModel) {
this.inputModel = this.min;
this.cell.newValue = this.inputModel.toISOString();
}
}
onChange() {
if(this.inputModel) {
this.cell.newValue = this.inputModel.toISOString();
}
}
}
@Component({
template: `{{value | date:'short'}}`,
})
export class SmartTableDatepickerRenderComponent implements ViewCell, OnInit {
@Input() value: string;
@Input() rowData: any;
constructor() { }
ngOnInit() { }
我想要 ng2-smart-table 中的日期时间选择器来选择一天中的日期和时间。
解决方案
我解决了!!只需遵循此 https://stackblitz.com/edit/ng-date-picker-smart-table-tjvgbe。
不要忘记在 angular.json 文件中添加样式,就像 stackblitz 链接一样。
推荐阅读
- python - 弃用警告:无效的转义序列 - 用什么代替 \d?
- python - Pyqt5 MySQL数据库连接未使用Python3通过工作线程打开
- rust - Rust 中 BigInt 或 BigUint 的大小是否有限制?
- google-bigquery - Bigquery 错误:UPDATE/MERGE 必须与每个目标行最多匹配一个源行
- java - 概念:构建 Java 程序并将其加载到 Oracle DB - Wrapper 函数调用 java 函数并返回
- wordpress - 如何在 woocommerce 商店页面中删除类别缩略图
- jquery - 将动态生成的值保存到列表中
- reactjs - 在 React 中管理列表内的输入
- php - ExcludeDirectoryFilterIterator 中的 Laravel 5.1 随机超时
- linux - 启用 linux 内核驱动程序 dev_dbg 调试消息