Angular 6中Kendo-Datepicker日期格式转换问题求助

针对你遇到的Kendo DatePicker返回的Date对象格式不符合API需求的问题，我给你几个实用的解决方案：

方案1：使用Angular内置的DatePipe #

Angular自带的DatePipe是处理日期格式化最便捷的方式，步骤如下：

1. 首先在组件中导入DatePipe，并在模块的providers中声明（Angular 6+需要手动添加到providers）：

import { DatePipe } from '@angular/common';

@Component({
  // ... 其他组件配置
  providers: [DatePipe]
})
export class YourComponent {
  public lobs: Array<VTO> = []; 
  public value: Date = new Date();
  public errorMsg: string;

  constructor(private datePipe: DatePipe, private _vtos: YourService) {}

  public onChange(value: Date): void {
    // 转换为MM/dd/yyyy格式的字符串
    const formattedDate = this.datePipe.transform(value, 'MM/dd/yyyy');
    console.log('formatted date:', formattedDate); // 输出 05/10/2018
    this._vtos.getLOBs(formattedDate)
      .subscribe(data => this.lobs = data, error => this.errorMsg = error);
  }
}

方案2：手动编写格式化函数 #

如果不想依赖Angular的管道，可以自己写一个简单的格式化函数，处理月份和日期的补零逻辑：

export class YourComponent {
  public lobs: Array<VTO> = []; 
  public value: Date = new Date();
  public errorMsg: string;

  constructor(private _vtos: YourService) {}

  // 自定义日期格式化函数
  private formatDate(date: Date): string {
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1后补零
    const day = String(date.getDate()).padStart(2, '0');
    const year = date.getFullYear();
    return `${month}/${day}/${year}`;
  }

  public onChange(value: Date): void {
    const formattedDate = this.formatDate(value);
    console.log('formatted date:', formattedDate);
    this._vtos.getLOBs(formattedDate)
      .subscribe(data => this.lobs = data, error => this.errorMsg = error);
  }
}

方案3：优化Kendo DatePicker显示格式（可选） #

如果你希望DatePicker的显示格式也是MM/dd/yyyy，可以在模板中设置format属性：

<div class="form-group">
  <label>Select Report Date:</label>
  <kendo-datepicker 
    [(value)]="value" 
    (valueChange)="onChange($event)"
    format="MM/dd/yyyy">
  </kendo-datepicker>
</div>

注意：这个设置只会改变前端显示格式，valueChange返回的依然是Date对象，所以还是需要前面的转换步骤来生成API需要的字符串格式。

另外，建议你确认.NET MVC后端能够正确解析MM/dd/yyyy格式的日期字符串，比如在接收参数的模型上添加[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]特性，确保后端能正常识别传入的日期。

内容的提问来源于stack exchange，提问作者SilverFish