[英]How to set default format as ('dd/mm/yyyy') in ng-bootstrap
https://puu.sh/yThgV/bd55df9829.png
html
<label for="date">{{ "date" | translate }}</label>
<input type="date" class="form-control checking-field" id="date">
我想得到那种格式('dd/mm/yyyy') 。 有什么建议吗?
扩展我的评论
在你的 app.module
import { NgbDatepickerConfig, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateFRParserFormatter } from "./ngb-date-fr-parser-formatter"
@Component({
providers: [{provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter}]
})
export class AppComponent {}
在你的 NgbDateFRParserFormater
//your NgbDateFRParserFormater extends from NgbDateParserFormatter
//Is a Injectable that have two functions
@Injectable()
export class NgbDateFRParserFormatter extends NgbDateParserFormatter {
parse(value: string): NgbDateStruct { //parse receive your string dd/mm/yyy
//return a NgbDateStruct
//calculate year,month and day from "value"
return {year:year,month:month,day:day}
}
format(date: NgbDateStruct): string { //receive a NgbDateStruct
//return a string
return ''+date.day+'/'+date.month+'/'+date.year;
}
}
我完整的工作解决方案:
创建一个名为“date-picker”的文件夹并在其中添加以下文件。
日期选择器 > ngb-date-parser-formatter-ext.service.ts
日期选择器 > index.ts
该文件
日期选择器 > ngb-date-parser-formatter-ext.service.ts
import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { Injectable } from "@angular/core";
@Injectable()
export class NgbDateParserFormatterExtService extends NgbDateParserFormatter {
private dateSeparatorChar: string = "-";
// dateFormat should be "yyyy-MM-dd" or "dd-MM-yyyy" with the valid separator.
private dateFormat = `yyyy${this.dateSeparatorChar}MM${this.dateSeparatorChar}dd`;
parse(value: string): NgbDateStruct {
if (value === "") {
return null;
}
const dateString: string = value;
const dateValues = dateString.split(this.dateSeparatorChar);
if (dateValues.length !== 3) {
return null;
}
let dayIndex: number;
let yearIndex: number;
if (this.dateFormat === "dd-MM-yyyy") {
dayIndex = 0;
yearIndex = 2;
} else {
dayIndex = 2;
yearIndex = 0;
}
const year = Number(dateValues[yearIndex]);
const month = Number(dateValues[1]);
const day = Number(dateValues[dayIndex]);
const date: NgbDateStruct = {
year: year, month: month, day: day
};
return date;
}
format(date: NgbDateStruct): string {
if (date === null) {
return "";
}
const dayString: string = date.day < 10 ? `0${date.day}` : `${date.day}`;
const monthString: string = date.month < 10 ? `0${date.month}` : `${date.month}`;
const separator = this.dateSeparatorChar;
const dateString = this.dateFormat === "dd-MM-yyyy"
? `${dayString}${separator}${monthString}${separator}${date.year}`
: `${date.year}${separator}${monthString}${separator}${dayString}`;
return dateString;
}
}
该文件
日期选择器 > index.ts
import { NgbDateParserFormatter } from "@ng-bootstrap/ng-bootstrap";
import { NgbDateParserFormatterExtService } from "./ngb-date-parser-formatter-ext.service";
export const NgbDateParserFormatterExtProvider =
{ provide: NgbDateParserFormatter, useClass: NgbDateParserFormatterExtService };
在文件中
app.module.ts
import { NgbDateParserFormatterExtProvider } from "./common/services/date-picker";
@NgModule({
providers: [...., NgbDateParserFormatterExtProvider],
})
export class AppModule { }
在你的
your-component1.component.html
<div class="form-group">
<label>Publish Date</label><span> * </span>
<input #datepicker="ngbDatepicker" class="form-control" name="datepicker" formControlName="publishDate"
ngbDatepicker (click)="datepicker.toggle()" placeholder="yyyy-MM-dd" />
</div>
我正在使用反应式表单。
您可以通过设置变量将日期格式更改为“dd-MM-yyyy”或“dd/MM/yyyy”
private dateFormat = `yyyy${this.dateSeparatorChar}MM${this.dateSeparatorChar}dd`;
问候..
一般来说,您需要使用指令。
因此,您可以将现成的日期时间选择器之一用于角度。 像这样: https : //www.npmjs.com/package/angular-date-time-input
或者创建您自己的指令以使其工作。
myModule.directive(
'dateInput',
function(dateFilter) {
return {
require: 'ngModel',
template: '<input type="date"></input>',
replace: true,
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
return dateFilter(modelValue, 'yyyy-MM-dd');
});
ngModelCtrl.$parsers.unshift(function(viewValue) {
return new Date(viewValue);
});
},
};
});
我从以下代码中获取了此代码: https : //stackoverflow.com/a/18062552/3710672
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.