如何使用Kendo UI在Angular 2中創建雙重日期條目？

Question

我試圖在Angular2中創建一個雙重日期對象 ， 但我不知道如何實現。

我所說的雙重日期對象基本上是使用Kendo UI（ 來自Kendo UI的日期選擇器的屏幕快照）創建日期選擇器的單個實例。 單擊后，將顯示日期對象的兩個實例。 第一個用於“開始日期”，第二個用於“結束日期”。 日期對象使用Kendo UI。

基本上是由用戶選擇日期范圍。 我真的很感謝任何幫助。 謝謝。

Answer 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>