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

Posted 2023-05-07

【中文标题】角度材料日期选择器 - 仅选择日期

【英文标题】：Angular material datepicker - select date only

【发布时间】：2018-09-13 23:09:38

【问题描述】：

我有一个 Material Datepicker，我只想从中获取没有时间戳的日期。由于我的时区是 GMT+2，API 总是收到 03.04.2018 22:00:00 UTC 之类的信息，但我想将日期保存在本地。

我的日期选择器：“2018 年 4 月 11 日星期三 00:00:00 GMT+0200（中欧夏令时间）”

<div class="input-group">
    <input matInput [matDatepicker]="start" readonly="readonly" class="form-control" formControlName="start" name="start" >
    <div class="date__picker__button">
        <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
        <mat-datepicker #start [disabled]="!formulationForm.enabled"></mat-datepicker>
    </div>
</div>

可以在调用 API 之前格式化 datepicker 值，但我希望有更好的解决方案。

【问题讨论】：

查看***.com/questions/47262449/…

感谢@SuvethanNantha，我让它与答案中的组件一起使用。

【参考方案1】：

是的，我知道有两种方法可行。

使用日期适配器。您可以将其用作服务或全局函数。

// date.helpers.ts

import  formatDate  from '@angular/common';
import  Injectable  from '@angular/core';
import  NativeDateAdapter  from '@angular/material/core';

export const PICK_FORMATS = 
    parse:  dateInput:  month: 'short', year: 'numeric', day: 'numeric'  ,
    display: 
        dateInput: 'input',
        monthYearLabel:  year: 'numeric', month: 'short' ,
        dateA11yLabel:  year: 'numeric', month: 'long', day: 'numeric' ,
        monthYearA11yLabel:  year: 'numeric', month: 'long' 
    
;

@Injectable(
    providedIn: 'root'
)
export class PickDateAdapter extends NativeDateAdapter 
    format(date: Date, displayFormat: Object): string 
        if (displayFormat === 'input') 
            return formatDate(date, 'dd/MM/yyyy', this.locale);;
         else 
            return date.toDateString();
        
    

// add this to your.module.ts

providers: [
    NomineeService,
     provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue:  appearance: 'legacy'  ,
     provide: DateAdapter, useClass: PickDateAdapter ,
     provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS ,
  ]

使用将 ISODate 转换为可读日期的用户定义函数。

// shared.service.ts

formatDate(date): string 
    const _date = new Date(date);
    const day = _date.getDate();
    const month = _date.getMonth() + 1;
    const year = _date.getFullYear();
    return `$year-$month-$day`;
  

  formatTime(date: Date): string 
    const _date = new Date(date);
    const hours = _date.getHours()
    const minutes = _date.getMinutes();
    const seconds = _date.getSeconds();
    return `$hours:$minutes:$seconds`;
  

  toDateTimestamp(date: Date): string 
    const dateStamp = this.formatDate(date);
    const timeStamp = this.formatTime(date);
    return `$dateStamp $timeStamp`
  
  calculateDays(fromDate, toDate): number 
    const FromDate = new Date(fromDate);
    const ToDate = new Date(toDate);
    const difference = ToDate.getTime() - FromDate.getTime();
    const days = Math.round((difference / (1000 * 60 * 60 * 24)));
    return days;
  

【参考方案2】：

可以使用moment node.js 库：

npm i moment --save

之后你就可以这样做了；

let formatted_date = moment(var_to_format).format("YYYY-MM-DD");