如何在日期范围的Jquery之间显示多个日期范围 [英] How to display multiple date ranges between a date-range Jquery
问题描述
我有一个日期范围选择器,我想显示为特定日期范围定义的所有日期范围,如下所示:
Hi I have a date ranger picker on this I want to display all the date ranges which is defined for a particular date-range as this:
假设我的日期范围是:01/01/2017-01/07/2017 并且我有一个所有日期的数组,这些日期是在db中上述日期范围之间定义的.所以该数组就像:
Suppose my date range is: 01/01/2017-01/07/2017 and I have an array all the dates which is defined between for above date-range in db.So the array is like:
$ sub_dates = ['01/01/2017','02/01/2017',..till 01/07/2017];
$sub_dates = ['01/01/2017','02/01/2017',.......till 01/07/2017];
因此,如果我在日期范围选择器上单击日期范围,则需要在其上显示所有这些定义的日期($ sub_dates).
So if I click on date range on date-range picker I need to show all these defined dates ($sub_dates ) on it.
var sub_dates = ['01/01/2017','02/01/2017',.......till 01/07/2017];
$('.lot-calander1').daterangepicker({
beforeShowDay: function(date){
var string = $.daterangepicker.formatDate('yy-mm-dd', date);
return [ sub_dates.indexOf(string) == -1 ]
}
});
但是它没有在日期范围选择器上显示这些日期.请协助解决可能的问题
But it is not displaying these date on date-range picker. please assist what could be the issue
感谢前进
推荐答案
$(function() {
var sub_dates = ['01/01/2017','01/03/2017','01/25/2017', '02/01/2017'];
var sub_dates_date = sub_dates.map(function(b) {
return +(new Date(b));
});
$('input[name="daterange"]').daterangepicker({
isInvalidDate: function(a) {
return sub_dates_date.indexOf(+(new Date(a))) < 0;
}
});
});
.daterangepicker td.available {
color: red;
background-color: blue;
}
.daterangepicker td.available.start-date, .daterangepicker td.available.end-date {
color: green;
background-color: black;
}
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input type="text" name="daterange" value="01/01/2017 - 01/31/2017" />
请注意:您可以根据需要更改颜色.
希望它会为您提供帮助.
Hope It will help you.
这篇关于如何在日期范围的Jquery之间显示多个日期范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!