title: Single calendar Date Range Picker
body: <p>I am looking to build a date range picker that's values only consist of January-December of a single year at a time.It will look something like this: </p>
  
  <p><a href="https://i.stack.imgur.com/wig7Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wig7Y.png" alt="enter image description here"></a></p>
  
  <p>(This is taken from my existing kendo date range picker and poorly photoshopped)</p>
  
  <p>I have built one using the kendo date picker but it seems to require two calendars, one for start date and the other for end date. Being that my range can only span months in a single year, I just need one calendar like below where the user can either click and drag for the desired range, or they can just click two dates. Does anyone know of a date range picker that already functions this way? Or if there is a way to alter the kendo one to do the same?</p>
  
  <p>Thanks.</p>
  
  <p>Edit: Here is my code for my existing date range picker:</p>
  
  <pre><code>            var start = $("#StartDate").kendoDatePicker({
                  value: LastMonthString,
                  format: "MM/yyyy",
                  start: 'year',
                  depth: 'year',
                  change: startChange,
                  open: function() {
                      $('#StartCalendar').append($('#StartDate_dateview'));
                  },
                  close: function(e) {
                      e.preventDefault();
                  }
              }).data("kendoDatePicker");
  
              var end = $("#EndDate").kendoDatePicker({
                  value: TodaysDateString,
                  format: "MM/yyyy",
                  start: 'year',
                  depth: 'year',
                  change: endChange,
                  open: function() {
                      $('#EndCalendar').append($('#EndDate_dateview'));
                  },
                  close: function(e) {
                      e.preventDefault();
                  }
              }).data("kendoDatePicker");
  
              start.max(end.value());
              end.min(start.value());
              $("#StartDate").attr("readonly", true);
              $("#EndDate").attr("readonly", true);
  
              start.open();
              end.open();
  </code></pre>