单个日历日期范围选取器
单个日历日期范围选取器
提问于 2016-04-19 22:59:11
我正在寻找建立一个日期范围选择器，它的值只包括一年的一月到十二月在一个time.It将看起来像这样：
(这是从我现有的kendo日期范围选择器中提取的，并且is效果很差)
我已经使用剑道日期选择器构建了一个日历，但它似乎需要两个日历，一个用于开始日期，另一个用于结束日期。因为我的范围只能跨越一年中的几个月，所以我只需要一个日历，就像下面这样，用户可以单击并拖动到所需的范围，也可以只单击两个日期。有没有人知道已经有这样的日期范围选择器了？或者有没有办法改变剑道来做同样的事情？
谢谢。
编辑:这是我现有日期范围选择器的代码：
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();回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-29 08:30:49
这就是我只显示年份的方法，但您可以明显地更改格式
$('#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36722158
复制相关文章
相似问题