angular - How to handle multiple date format in Bsdatepicker
问题描述
what i need
- i need to handle multiple date format in bsdatepicker.
Date Component
import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit, AfterViewChecked } from '@angular/core';
import { FormGroup } from '@angular/forms';
import * as moment from 'moment';
import { BsDatepickerConfig, BsLocaleService } from 'ngx-bootstrap/datepicker';
@Component({
selector: 'date',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div [formGroup]="form" >
<ng-container *ngIf="field.read_only !== 'Y'">
<div>
<input type="text" class="form-control edit-mode-field"
bsDatepicker
[formControlName]="field.code"
[bsConfig]="datePickerConfig"
[(ngModel)]="myDateValue"
(ngModelChange)="customOnDateChange($event);"
placeholder={{'DD-MMM-YYYY'}}
#dp="bsDatepicker"
(keyup)="dp.toggle()"
value="{{ myDateValue | date: 'dd-MMM-yyyy'}}"
[(bsValue)]="myDateValue"
/>
<i (click)="dp.toggle()" class="far fa-calendar-alt date-field-calendar-icon"></i>
</div>
<span class="view-mode-field">{{ field.value }}</span>
</ng-container>
<ng-container *ngIf="field.read_only === 'Y'">
<span class="">{{ field.value }}</span>
</ng-container>
</div>
`
})
export class DateComponent implements OnInit {
@Input() field: any = {};
@Input() form: FormGroup;
@Input() type: string;
appConstants = new ClientAppConstants();
get isValid() { return this.form.controls[this.field.code].valid; }
get isDirty() { return this.form.controls[this.field.code].dirty; }
datePickerConfig = {
isAnimated: true,
containerClass: 'theme-blue',
showWeekNumbers: false,
};
customInitDate = '';
myDateValue = '';
formatsDateFormats: any;
constructor(private cd: ChangeDetectorRef, private bs: BsDatepickerConfig) {
this.formatsDateFormats = [
'dd/MM/yyyy',
'dd/MM/yyyy hh:mm:ss',
'dd-MM-yyyy',
'DD-MM-YYYY',
'dd-MM-yyyy HH:mm:ss',
'MM/dd/yyyy',
'MM/dd/yyyy hh:mm:ss',
'yyyy/MM/dd',
'yyyy/MM/dd HH:mm:ss',
'dd/MM/yy',
'dd/MM/yy hh:mm:ss',
'DD-MM-YYYY', 'MM/dd/yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate', 'medium',
'short', 'fullDate', 'longDate', 'mediumDate', 'mediumTime', 'DD-MMM-YYYY', 'YYYY-MMM-DD', 'YYYY/MMM/DD',
'YYYY-MM-DD', 'YYYY/MM/DD'
];
this.bs.dateInputFormat = this.formatsDateFormats;
}
ngOnInit() {
if (this.field.value) {
this.myDateValue = moment(new Date(this.field.value)).format('DD-MMM-YYYY');
}
if (typeof this.field.maxDays != 'undefined') {
const date1 = new Date();
date1.setDate(date1.getDate() + this.field.maxDays);
this.datePickerConfig['maxDate'] = date1;
}
if (typeof this.field.minDays != 'undefined') {
const date2 = new Date();
date2.setDate(date2.getDate() - this.field.minDays);
this.datePickerConfig['minDate'] = date2;
}
this.cd.markForCheck(); // marks path
this.cd.detectChanges();
}
customOnDateChange(search: any) {
if (search !== '') {
if (moment(search).isValid()) {
this.myDateValue = moment(new Date(search)).format('DD-MMM-YYYY');
} else {
this.myDateValue = '';
}
}
}
}
https://valor-software.com/ngx-bootstrap/#/datepicker
Stackblitz
https://stackblitz.com/edit/ngx-bootstrap-datepicker-testing?file=app%2Fapp.component.ts
解决方案
推荐阅读
- vba - 如何在 xmlhttp (vba) 中传递参数
- javascript - 如何正确地从元素类型中获取值?
- python - 如何在 python Tkinter 类之外更改标签属性
- arrays - 尝试向数组添加值时出现“+=:找不到命令”-Shell 脚本
- r - rep("contr.dummy", l) 中的错误:无效的 'times' 参数 rStudio 错误
- c# - Itext 7 和 C# - 特殊字符的不同字体
- android - 片段内 WebView 中的超链接单击应在活动中的新 WebView 中打开(棘手)
- c# - 字符串的有效日期时间转换
- mysql - 在 Ubuntu Linux 18.04 LTS 上安装 Mysql 5.7.29
- visualization - 增加 Apache Superset 中的过滤器限制