Question

我正在asp.net上工作-angular 5 Web应用程序，我需要加载一个具有空字段的组件来填充，其中一些字段是KendoDatePicker（对于Angular），我需要选择是否选择（插入）或不是日期，当我加载组件Date时未定义，并且出现此错误：

错误：“值”应该是有效的JavaScript Date实例。检查http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json以获得可能的分辨率。

现在，我已经阅读了文档，并尝试使用该stackblitz示例完美运行：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
    <div class="example-config">
        Selected value is: {{exampleDate| kendoDate:'MM/dd/yyyy'}}
    </div>
    <div class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
            [(ngModel)] = "exampleDate"
            placeholder="inserisci una data..."
        ></kendo-datepicker>
    </div>
    `
  })
export class AppComponent {
 public exampleDate: Date;

   constructor()
   {
    //undefined (as I want before the selection, browser consolle does not 
    return error)
    console.log(this.exampleDate);
   }
 }

这就是我在项目（component.ts）中得到的：

DatiGeneraliDocumento_Data: Date;

和component.html

  <div class="alto5">

            <kendo-datepicker
                              [(ngModel)]="_fatturaCorrente.DatiGeneraliDocumento_Data" 
                              name="DataDocumento" style="width:100%;" 
                              placeholder="Inserisci una data...">
              <kendo-datepicker-messages today="OGGI"></kendo-datepicker-messages>
            </kendo-datepicker>

         <div class="cl"></div>
        </div>

因此，在我的项目中，我遇到了上述错误，我想消除它，在此先感谢。

Answer 1

您是否尝试过在插值中使用安全导航器？即：

   <div class="example-config">
        Selected value is: {{exampleDate?| kendoDate:'MM/dd/yyyy'}}
    </div>

我添加了一个堆叠闪电战。我在DatePipe中使用Angular的构建，但对您来说应该可以使用相同的方式。

Example

这是您模板的代码：

{{(exampleDate? ('Your date' + exampleDate |kendoDate:'MM-dd-yyyy') : '')}}

这是我要在组件中输入的内容：

exampleDate = new Date(dateVariable);

Answer 2

我必须像这样修复它...

if (employeeModel.dateOfBirth != undefined) {
    employeeModel.dateOfBirth = new Date(employeeModel.dateOfBirth);        
}

Answer 3

我在应用程序中遇到了相同的问题。但是，当我删除了[(ngModel)]指令中的<kendo-datepicker>集时，它便修复了。

我使用了(onChange)事件处理程序on指令来更新ngModel的日期选择。

示例：

<kendo-datepicker 
    placeholder="YYYY-MM-DD"
    name="exampleDate"
    [format]="'yyyy-MM-dd'"
    (valueChange)="onChange($event)"
    class="form-control"
>
</kendo-datepicker>

onChange(value?: Date): void {
    this.exampleDate= value ? `${this.intl.formatDate(value, 'yyyy-MM-dd')}` : '';
}

“值”应该是有效的JavaScript Date实例

3 个答案: