Angular 7从Kendo UI日期选择器获取选定日期的值

Posted 2023-03-13

【中文标题】Angular 7从Kendo UI日期选择器获取选定日期的值

【英文标题】：Angular 7 getting value of selected date from Kendo UI date picker

【发布时间】：2019-09-04 19:06:43

【问题描述】：

我的 App Component.html 有一个基本的导航和一个日期选择器，就像这样......

<div class="container-fluid">
    <div class="row">

<!-- Navigation Removed -->          
        <div class="col-md-2 float-right">
            <kendo-datepicker
                (valueChange)="onChange($event)"
                [(value)]="value">
            </kendo-datepicker>
        </div>
    </div>
</div>
<router-outlet></router-outlet>

component.ts的设置方式如下：

import  Component, ViewEncapsulation, Input, Output, EventEmitter  from '@angular/core';

@Component(
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 

  @Input() value: Date = new Date();
  @Output() dateChanged: EventEmitter<Date> = new EventEmitter<Date>();

  constructor() 

  public onChange(value: Date): void 
    this.dateChanged.emit(value);
  

我有一些页面有一个调用服务的网格控件，但是日期当前是硬编码的，这一切都很好。我希望能够根据从上述日期选择器中选择的日期刷新网格数据，本质上，我将点击数据选择器，发出的值将通过网格控制器传递给组件中的方法。

带网格的控制器：

import  Component, OnInit, Input  from '@angular/core';
import  GridDataResult, DataStateChangeEvent  from '@progress/kendo-angular-grid';
import  DataSourceRequestState  from '@progress/kendo-data-query';
import  DataService  from '../services/DataService.service';

import  Observable  from 'rxjs/Observable';
import  State  from '@progress/kendo-data-query';

@Component(
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
)
export class GridComponent implements OnInit 

  public products: GridDataResult;
  public state: DataSourceRequestState = 
      skip: 0,
      take: 25
  ;
  @Input() value: Date = new Date();

  constructor(private dataService: DataService)  

  ngOnInit() 
     this.dataService.fetch(this.state).subscribe(r => this.products = r);
  

  public dataStateChange(state: DataStateChangeEvent): void 
    this.state = state;
    this.dataService.fetch(state)
        .subscribe(r => this.products = r);

【问题讨论】：

您的网格控制器在哪里？它是服务还是其他组件？目前你正在从AppComponent 输出dateChanged，这似乎是你的主要组件，你在哪里听这个发出的事件？

@CeritT，我已经添加了带有网格的控制器

为什么不使用 OnChanges 生命周期挂钩来监听网格组件上的传入日期。您提出的问题是“如何从 Kendo UI DatePicker 中获取价值”，但我认为您真正的问题是监听输入更改以进行新的 dataService 调用。

@CMR，这听起来是正确的 - 你建议的方法与下面建议的 CeritT 相同吗？

@christiandev，所以我开始更详细地研究你的问题，我意识到 OnChanges 对你不起作用。您正在尝试通过router-outlet，而父/子通信在router-outlet 上不起作用。所以你必须创建一个像 CeritT 推荐的服务。他很好地解释了这一点，但如果您有任何问题，请随时与我们联系。我每天都在工作中使用 Angular/Kendo。

【参考方案1】：

您可以使用Subject 收听日期输入的更改。

首先创建一个日期服务。

@Injectable()
export class DateService 

  public chosenDate: Observable<Date>;
  private dateSubject: Subject<Date>;

  constructor() 
    this.dateSubject = new Subject<Date>();
    this.chosenDate = this.dateSubject.asObservable();
  

  dateChanged(newDate:Date)
    this.dateSubject.next(newDate);
  

然后在您的网格控制器中，注入此服务并从组件中您需要的服务中订阅所选日期。

constructor(private service: DateService)

this.service.chosenDate.subscribe((date: Date) =>  
    // do something useful with date
);

最后在您的日期字段更改事件中，输入此代码以将新日期传递给服务

this.service.dateChanged(date);

编辑：这里我为你做了一个例子，展示了解决方案。我相信您可以在您的代码中轻松实现这一点。

DEMO

【讨论】：

谢谢 - 我今天会试试这个。

嗨@christiandev，我最近没时间检查，你的结果如何？你试过了吗？

是的，我刚刚开始工作 - 非常感谢。我只是在寻找一种为日期设置默认值的最佳方法，直到现在选择日期。

您可以在网格控制器中初始化date 属性date:Date = new Date();。并根据需要使用DatePipe 对其进行格式化。