角材料日期选择器日期格式

Posted

技术标签:

【中文标题】角材料日期选择器日期格式【英文标题】:Angular material datepicker dateformat 【发布时间】:2019-03-04 00:33:00 【问题描述】:

我正在尝试从 datepicker 获取日期并将其保存在 sql server 中,但输出类似于“1538107200000”。它是什么格式以及如何将其转换为与sql server日期格式兼容的日期格式。

在组件.html

<input matInput [matDatepicker]="picker" placeholder="enter date"
           (dateInput)="addEvent('input', $event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>

在component.ts中

addEvent(type: string, dinput: MatDatepickerInputEvent<Date>) 
    this.dinput.push(`$dinput.value`);
    this.date = new Date(this.dinput[0].toString());
    this.dates = moment(this.date, 'YYYY-MM-DD').toString();
    console.log(this.dates);
  

这是无效日期的错误。如何解决?请帮忙。

【问题讨论】:

此日期格式为计时格式 【参考方案1】:

1538107200000 是以毫秒为单位的日期(纪元时间戳)。要将其转换为日期对象,请使用new Date(1538107200000)。 要获得所需格式的日期,请使用moment(new Date(1538107200000)).format("YYYY-MM-DD")。这将为您提供 YYYY-MM-DD 格式的日期。现在您需要将其保存在 SQL Server 中。这将作为字符串发送到您的服务器,您需要找到您的服务器支持的日期格式并将该字符串转换为日期并保存到数据库。

【讨论】:

这个数字是多少?浮点数或整数以及如何从字符串中解析它? 你应该尽可能长。它从纪元开始以毫秒为单位。【参考方案2】:

这是自 epoc 以来的秒数,请参阅 here。我相信您没有正确使用 moment 构造函数。试试这个:

moment(this.date).format('YYYY-MM-DD').toString();

无论是那个还是你传递给时刻构造函数的值都是时刻无法识别的格式。请参阅documentation。

【讨论】:

【参考方案3】:

您正在获取 json 格式的日期。下面是一个自定义过滤器,用于将 json 日期格式转换为真实日期。

.filter("filterdate", function() 
var re = /\/Date\(([0-9]*)\)\//;
return function(x) 
    var m = x.match(re);
    if( m ) return new Date(parseInt(m[1]));
    else return null;
;
);

然后在 component.html

中添加下面的过滤器
<input dateInput| filterdate | date:'dd/MM/yyyy'>

【讨论】:

【参考方案4】:

您也可以使用 DatePipe。试试这个:

第一步,在 app.module.ts 文件中注入 DatePipe Provider:

import  DatePipe  from '@angular/common';

@NgModule(
    ...
    providers: [
        [DatePipe]
    ],
   ...
)

并将您的数据转换为所需的格式:

import  DatePipe  from '@angular/common';

constructor(private datePipe: DatePipe) 
    
this.datePipe.transform(this.myFormControl.value,'yyyy-MM-dd');

更多格式请关注 DatePicker documentation

【讨论】:

以上是关于角材料日期选择器日期格式的主要内容,如果未能解决你的问题,请参考以下文章

角材料日期选择器箭头颜色

角度材料日期时间选择器更改显示日期时间的格式

如何从角材料datepicker更改日期?

材料设计日期选择器

角度材料日期选择器 - 仅选择日期

角度材料日期选择器中的日期不正确