如何使用 Kendo UI 在 Angular 2 中创建双日期条目？答案

【问题标题】：How do I create a dual date entry in Angular 2 with Kendo UI?如何使用 Kendo UI 在 Angular 2 中创建双日期条目？
【发布时间】：2016-09-22 09:43:09
【问题描述】：

我正在尝试在 Angular2 中创建一个双日期对象，但我不知道它是如何实现的可以实现。

我所说的双日期对象基本上是使用 Kendo UI (screenshot of a date picker from Kendo UI) 创建日期选择器的单个实例。单击后，将出现两个日期对象实例。第一个用于“开始日期”，第二个用于“结束日期”。日期对象使用 Kendo UI。

基本上是供用户选择日期范围。我真的很感激这方面的任何帮助。谢谢。

【问题讨论】：

标签： date angular typescript kendo-ui

【解决方案1】：

Kendo UI DatePicker 只能使用一个日期。要选择日期范围，请使用两个小部件实例。

http://demos.telerik.com/kendo-ui/datepicker/rangeselection

理论上可以使用带有两个Calendar 实例的Kendo UI Popup，并根据您的喜好将两个日期值存储在某处。

<style>
  #popup > div {display: inline-block; }
  #textbox { width: 300px; } 
</style>

<p>Focus the textbox:</p>

<input id="textbox" class="k-textbox" />

<div id="popup">
  <div id="calendar1"></div>
  <div id="calendar2"></div>
</div>

<script>
  var textbox = $("#textbox");

  $("#popup").kendoPopup({
    anchor: textbox
  });
  $("#calendar1").kendoCalendar({
    change: updateTextBox
  });
  $("#calendar2").kendoCalendar({
    change: updateTextBox
  });
  textbox.focus(function(){
    $("#popup").data("kendoPopup").open();
  });

  function updateTextBox() {
    textbox.val("use the Calendars' value method here");
  }

</script>

【讨论】：

非常感谢您的回复！会尝试这些方法 :) 顺便说一句，我怎么能使用弹出窗口，因为只有当它点击时，我需要两个日期实例才能出现？
@MitchellY 我更新了我的回复以更好地说明我的意思。
再次感谢您的插图。我对它是如何完成的有了更好的了解。