Question

绑定kendo DatePicker有错误。

我在asp核心中获取学生的web api是：

    [HttpGet, Route("/api/master/{id}")]
    public JsonResult GetStudentById(int id)
    {
        return Json(new { id = 1, name = "Axxx", family = "Rxxx", RegisterDate = DateTime.Now });
    }

它返回：

{"id":1,"name":"Axxx","family":"Rxxx","registerDate":"2018-05-01T13:23:35.1229748+04:30"}

在Angular我的模型中：

export class Student {
id: number;
name: string;
family: string;
registerDate: string

}

，服务是：

   getStudentById(id: number): Observable<Student> {
    return this.http
      .get(`http://localhost:58824/api/master/${id}`, { headers: this.setHeader() })
      .map(this.extractData);
  }

  private extractData(response: Response) {
    const body = response.text();
    console.log(body);
    return JSON.parse(body) || {};
  }

  private setHeader() {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json;');
    return headers;
  }

最后对于组件是：

  student: Student = new Student();
  constructor(private adminService: AdminCareWorkerService) { }

  ngOnInit() {
    this.adminService.getStudentById(10).subscribe(response => { this.student = response; }, error => { console.log('there is an error'); })
  }

观点：

<form novalidate #form="ngForm" (submit)="save(form)">
  <div class='row'>
    <div class='col-md-12'>

      <div class="form-group">
        <label for="firstName">name</label>
        <input type="text" class="form-control" required #name="ngModel" name="name" [(ngModel)]="student.name">
        <div *ngIf="name.invalid && name.touched">
          <small class="text-danger" *ngIf="name?.errors?.required">name is required</small>
        </div>
      </div>

      <div class="form-group">
        <label for="middleName">family</label>
        <input type="text" class="form-control" required #family="ngModel" name="family" [(ngModel)]="student.family">
        <div *ngIf="family.invalid && family.touched">
          <small class="text-danger" *ngIf="family?.errors?.required">family is required</small>
        </div>
      </div>

      <div class='form-group'>
        <label for="birthDate">Date</label>
        <kendo-datepicker [format]="'dd-MM-yyyy'" style="width: 100%;" required #registerDate="ngModel" name="registerDate" [(ngModel)]="student.registerDate"></kendo-datepicker>
        <div *ngIf="registerDate.invalid && registerDate.touched">
          <small class="text-danger" *ngIf="registerDate?.errors?.required">registerDate is required</small>
        </div>
      </div>

      <div class='form-group'>
        <div class='pull-right'>
          <input type="submit" value='Save' class='btn btn-primary btn-sm' [disabled]="form.invalid" />
        </div>
      </div>

    </div>
  </div>
</form>

有错误： ＆＃39;值＆＃39;应该是有效的JavaScript日期实例

不用说，我已经在app.module中添加了DateInputsModule来导入数组我该如何解决？

Answer 1

此配置从序列化数据中删除时区（+04：30）：

services.AddMvc()  
       .AddJsonOptions(options =>  
       {  
         options.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Unspecified;  // Treat as a local time if a DateTime is being converted to a string.
       });

或尝试以这种方式指定DateTimeFormat，并通过将DateTimeStyles设置为AdjustToUniversal使其自动将日期调整为UTC：

services.AddMvc()
    .AddJsonOptions(options =>
    {
        var settings = options.SerializerSettings;
        var dateConverter = new IsoDateTimeConverter
        {
            DateTimeStyles = DateTimeStyles.AdjustToUniversal,
            DateTimeFormat = "yyyy'-'MM'-'dd'T'HH':'mm':'ssK"
        };
        settings.Converters.Add(dateConverter);
    });

Answer 2

kendo-datepicker中使用的值必须是Date类型，但在您的情况下，它是string。

您需要事先将其转换为有效的Date对象。这可以用例如JSON Reviver，或使用IntlService.parseDate方法（Reference）。

@Component({ ... })
public class MyComponent
{
    value: Date;
    valueString: string;

    constructor(private intl: IntlService) {
        this.value = this.intl.parseDate("2018-05-01T13:23:35.1229748+04:30");
        this.valueString = "2018-05-01T13:23:35.1229748+04:30"; 
    }
}

<强> HTML

<!-- Works fine -->
<kendo-datepicker
    [(value)]="value"
></kendo-datepicker>

<!-- Throws error: The 'value' should be a valid JavaScript Date instance -->
<kendo-datepicker
    [(value)]="valueString"
></kendo-datepicker>

您还可以在KendoUIs文档中找到可能实现的示例（Link）

绑定kendo DatePicker

2 个答案: