[英]ng-bootstrap datepicker format
I am using ng-bootstrap datepicker but when I save my form the date gets saved as. 我正在使用ng-bootstrap datepicker,但是当我保存表单时,日期保存为。
date: {
day: 01,
month: 12,
year: 16
}
I was hoping I could get it to save as something more like "2016-11-23T00:39:31.768Z"
我希望我可以把它保存为更像"2016-11-23T00:39:31.768Z"
Here is my implementation: 这是我的实现:
<div class="input-group">
<button class="input-group-btn" (click)="d.toggle()" >
<md-icon svgSrc="assets/images/calendar-plus.svg" style="cursor: pointer;"></md-icon>
</button>
<input class="form-control" placeholder="dd-mm-yyyy" name="dp" formControlName="due_date" navigation="arrows" ngbDatepicker #d="ngbDatepicker">
</div>
And form.component: 和form.component:
constructor( private fb: FormBuilder ) {
this.form = this.fb.group({
due_date: [''],
});
}
You're using ng-bootstrap not ng2-bootstrap (different groups). 你正在使用ng-bootstrap而不是ng2-bootstrap(不同的组)。 The code behind it uses the NgbDateStruct
which is an object { day, month, year }
它背后的代码使用NgbDateStruct
,它是一个对象{ day, month, year }
On submission you'll need to hook in and change the value to something else, like: 在提交时,您需要挂钩并将值更改为其他内容,例如:
onSubmit(): {
let ngbDate = this.form.controls['due_date'].value;
let myDate = new Date(ngbDate.year, ngbDate.month-1, ngbDate.day);
let formValues = this.form.value;
formValues['due_date'] = myDate;
<...>
http.post(url, formValues);
}
https://ng-bootstrap.github.io/#/components/datepicker https://ng-bootstrap.github.io/#/components/datepicker
NgbDateStruct Interface of the model of the NgbDatepicker and NgbInputDatepicker directives NgbDateStruct NgbDatepicker和NgbInputDatepicker指令模型的接口
Properties 属性
day Type: number The day of month, starting at 1 day类型:number从1开始的月中的某一天
month Type: number The month, with default calendar we use ISO 8601: 1=Jan ... 12=Dec month类型:number月份,默认日历我们使用ISO 8601:1 = Jan ... 12 = Dec
year Type: number The year, for example 2016 年份类型:数字年份,例如2016年
As @silentsod mentioned, you need to convert the date object that the datepicker uses from the NgbDateStruct
format into a string
format. 正如@silentsod所提到的,您需要将NgbDateStruct
使用的日期对象从NgbDateStruct
格式转换为string
格式。 ng-bootstrap provides a function to convert a date in the NgbDateStruct
format to the ISO 8601
format ( yyyy-mm-dd ). ng-bootstrap提供了将NgbDateStruct
格式的日期转换为ISO 8601
格式( yyyy-mm-dd )的功能。 You do not have to write your own if using that format: 如果使用该格式,则无需编写自己的文件:
import {NgbDateParserFormatter} from '@ng-bootstrap/ng-bootstrap';
...
constructor(private ngbDateParserFormatter: NgbDateParserFormatter; ... ) {
...
}
...
onSubmit(): {
let ngbDate = this.form.controls['due_date'].value;
let myDate = this.ngbDateParserFormatter.format(ngbDate); // e.g. myDate = 2017-01-01
...
}
See: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/ngb-date-parser-formatter.ts 请参阅: https : //github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/ngb-date-parser-formatter.ts
You can implement your own method to convert it to DD-MM-YYYY format you require. 您可以实现自己的方法将其转换为您需要的DD-MM-YYYY格式。
Or depending of order of elements in return statement and a separator you can create any other format you wish. 或者,根据return语句和分隔符中元素的顺序,您可以创建任何其他格式。
Implementation: 执行:
formatDate(d: NgbDate): string {
if (d === null) {
return null;
}
return [
(d.day < 10 ? ('0' + d.day) : d.day),
(d.month < 10 ? ('0' + d.month) : d.month),
d.year
].join('-');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.