Обвязка для кендо DatePicker

Question

Привязка для кендо DatePicker содержит ошибку.

мой веб-API в Asp Core, чтобы получить студента:

    [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"}

в угловой моей модели:

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>

есть ошибка: 'Значение' должно быть допустимым экземпляром JavaScript Date

Излишне говорить, что я добавил DateInputsModule для импорта массива в app.module. Как я могу это исправить?

Answer 1

Значение, используемое в 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>

Вы также можете найти пример возможной реализации в документации KendoUI ( Ссылка )

Answer 2

Эта конфигурация удаляет часовой пояс (+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 таким образом и заставить его автоматически корректировать даты по UTC, установив для DateTimeStyles значение AdjustToUniversal:

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);
    });