单日历日期范围选择器 [英] Single calendar Date Range Picker

问题描述

我正在寻找一个日期范围选择器，其值一次仅包含一年的一月到十二月，它将看起来像这样:

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:

(这是从我现有的剑道日期范围选择器中选取的，照片处理不当)

(This is taken from my existing kendo date range picker and poorly photoshopped)

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

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?

谢谢.

这是我现有日期范围选择器的代码:

Here is my code for my existing date range picker:

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

推荐答案

这是我仅显示年份的方法，但是您可以明显地更改格式

This is how I've made it to show years only but you can change the format obviously

$('#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> 

这篇关于单日历日期范围选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！