Mitchell Y Mitchell Y - 1 month ago 10x
TypeScript Question

How do I create a dual date entry in Angular 2 with Kendo UI?

I'm trying to create a dual date object in Angular2 and I have no idea how it can be accomplished.

What I mean by a dual date object is basically creating a single instance of a date picker using Kendo UI (screenshot of a date picker from Kendo UI). Once it's clicked, two instances of the date object appears. The first is for 'Start date' and the second is for 'End Date'. The date object uses Kendo UI.

Basically it's for users to select a date range. I would really appreciate any help on this. Thank you.


The Kendo UI DatePicker can work with one date only. For selecting a date range, use two widget instances.

It is theoretically possible to use a Kendo UI Popup with two Calendar instances inside, and store the two date values somewhere, according to your preferences.

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

<p>Focus the textbox:</p>

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

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

  var textbox = $("#textbox");

    anchor: textbox
    change: updateTextBox
    change: updateTextBox

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