单日历日期范围选择器答案

【问题标题】：Single calendar Date Range Picker单日历日期范围选择器
【发布时间】：2016-04-19 14:59:11
【问题描述】：

我正在寻找一个日期范围选择器，它的值一次只包含一年的 1 月至 12 月。它看起来像这样：

（这是从我现有的剑道日期范围选择器中获取的，并且照片处理不佳）

我使用剑道日期选择器构建了一个，但它似乎需要两个日历，一个用于开始日期，另一个用于结束日期。由于我的范围只能在一年内跨越几个月，我只需要一个如下所示的日历，用户可以单击并拖动所需的范围，或者他们可以只单击两个日期。有谁知道已经以这种方式运行的日期范围选择器？或者如果有办法改变剑道来做同样的事情？

谢谢。

编辑：这是我现有日期范围选择器的代码：

            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();

【问题讨论】：

标签： date-range daterangepicker kendo-datepicker

【解决方案1】：

这就是我让它只显示年份的方式，但你可以明显地改变格式

$('#sandbox-container').datepicker({ 
  format: "yyyy", 
  startView: 1, 
  viewMode: "years", 
  minViewMode: "years", 
  minViewMode: "years", 
  multidate: true, 
  multidateSeparator: ", ", 
  autoClose: true, 
}).on("changeDate",function(event){ 
  var dates = event.dates, elem = $('#sandbox-container'); 
  if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser. 
  if(dates.length>2) dates=dates.splice(dates.length-1); 
  dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()}); 
  elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates); 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<div id="sandbox-container">
<input type="text" id="date" value="">
</div>

【讨论】：