Skip to content

Commit cfe9d9c

Browse files
monovertexmonovertex
authored
Merge pull request #455 from monovertex/bugfix/fix-out-of-bounds-current-month-when-generating-month-select
Bugfix/#412, #452 - Fix out-of-bounds options when building the month/year selects
2 parents 9249fe7 + 1cbb9fd commit cfe9d9c

File tree

3 files changed

+99
-68
lines changed

3 files changed

+99
-68
lines changed

‎demo.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ $(function()
1818
define a new language named "custom"
1919
*/
2020

21-
$.dateRangePickerLanguages['custom'] =
21+
$.dateRangePickerLanguages['custom'] =
2222
{
2323
'selected': 'Choosed:',
2424
'days': 'Days',
@@ -48,7 +48,7 @@ $(function()
4848
'default-range' : 'Please select a date range between %d and %d days',
4949
'default-default': 'This is costom language'
5050
};
51-
51+
5252
$('#date-range0').dateRangePicker(
5353
{
5454
}).on('datepicker-first-date-selected', function(event, obj)
@@ -156,7 +156,7 @@ $(function()
156156
startOfWeek: 'sunday',
157157
language:'en',
158158
showShortcuts: true,
159-
customShortcuts:
159+
customShortcuts:
160160
[
161161
//if return an array of two dates, it will select the date range between the two dates
162162
{
@@ -188,8 +188,8 @@ $(function()
188188

189189
$('#date-range101').dateRangePicker(
190190
{
191-
showShortcuts: true,
192-
shortcuts :
191+
showShortcuts: true,
192+
shortcuts :
193193
{
194194
'next-days': [3,5,7],
195195
'next': ['week','month','year']
@@ -199,7 +199,7 @@ $(function()
199199
$('#date-range102').dateRangePicker(
200200
{
201201
showShortcuts: true,
202-
shortcuts :
202+
shortcuts :
203203
{
204204
'prev-days': [3,5,7],
205205
'prev': ['week','month','year'],
@@ -277,17 +277,17 @@ $(function()
277277
$('#date-range12').dateRangePicker(
278278
{
279279
inline:true,
280-
container: '#date-range12-container',
281-
alwaysOpen:true
280+
container: '#date-range12-container',
281+
alwaysOpen:true
282282
});
283283

284284
$('#date-range13').dateRangePicker(
285285
{
286286
autoClose: true,
287287
singleDate : true,
288-
showShortcuts: false
288+
showShortcuts: false
289289
});
290-
290+
291291
$('#date-range13-2').dateRangePicker(
292292
{
293293
autoClose: true,
@@ -483,7 +483,7 @@ $(function()
483483
});
484484

485485
$('#date-range51').dateRangePicker(
486-
{
486+
{
487487
customArrowPrevSymbol: '<i class="fa fa-arrow-circle-left"></i>',
488488
customArrowNextSymbol: '<i class="fa fa-arrow-circle-right"></i>'
489489
});
@@ -500,13 +500,19 @@ $(function()
500500
yearSelect: [1900, moment().get('year')]
501501
});
502502

503-
$('#date-range54').dateRangePicker(
503+
$('#date-range54').dateRangePicker(
504+
{
505+
monthSelect: true,
506+
yearSelect: function(current) {
507+
return [current - 10, current + 10];
508+
}
509+
});
510+
511+
$('#date-range55').dateRangePicker(
504512
{
505513
monthSelect: true,
506-
yearSelect: function(current) {
507-
return [current - 10, current + 10];
508-
}
514+
yearSelect: true,
515+
startDate: moment().subtract(3, 'months').format('YYYY-MM-DD'),
516+
endDate: moment().endOf('day').format('YYYY-MM-DD'),
509517
});
510-
511-
512518
});

‎index.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -673,8 +673,8 @@ <h2 id="demonstrations">Demonstrations</h2>
673673
Custom arrow symbol: <input id="date-range51" size="30" value="">
674674
<a href="#" class="show-option">Show Config</a>
675675
<pre class="options">
676-
// To make this demo work completely, the FontAwesome stylesheets are required
677-
{
676+
// To make this demo work completely, the FontAwesome stylesheets are required
677+
{
678678
customArrowPrevSymbol: '&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;',
679679
customArrowNextSymbol: '&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;'
680680
}
@@ -712,6 +712,19 @@ <h2 id="demonstrations">Demonstrations</h2>
712712
yearSelect: function(current) {
713713
return [current - 10, current + 10];
714714
}
715+
}
716+
</pre>
717+
</li>
718+
719+
<li class="demo">
720+
Month and year select min and max dates: <input id="date-range55" size="30" value="">
721+
<a href="#" class="show-option">Show Config</a>
722+
<pre class="options">
723+
{
724+
monthSelect: true,
725+
yearSelect: true,
726+
startDate: moment().subtract(3, 'months').format('YYYY-MM-DD'),
727+
endDate: moment().endOf('day').format('YYYY-MM-DD'),
715728
}
716729
</pre>
717730
</li>

‎src/jquery.daterangepicker.js‎

Lines changed: 61 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1975,68 +1975,78 @@
19751975
}
19761976

19771977
function generateMonthElement(date, month) {
1978-
var range;
1979-
var startDate = opt.startDate ? moment(opt.startDate).add(!opt.singleMonth && month === 'month2' ? 1 : 0, 'month') : false;
1980-
var endDate = opt.endDate ? moment(opt.endDate).add(!opt.singleMonth && month === 'month1' ? -1 : 0, 'month') : false;
19811978
date = moment(date);
1979+
var currentMonth = date.get('month');
1980+
var currentMonthName = nameMonth(currentMonth);
1981+
var nonSelectableMonth = '<div class="month-element">' + currentMonthName + '</div>';
19821982

1983-
if (!opt.monthSelect ||
1984-
startDate && endDate && startDate.isSame(endDate, 'month')) {
1985-
return '<div class="month-element">' + nameMonth(date.get('month')) + '</div>';
1986-
}
1983+
if (!opt.monthSelect) { return nonSelectableMonth; }
19871984

1988-
range = [
1989-
startDate && date.isSame(startDate, 'year') ? startDate.get('month') : 0,
1990-
date ? date.get('month') : 11
1991-
];
1992-
1993-
if (range[0] === range[1]) {
1994-
return '<div class="month-element">' + nameMonth(date.get('month')) + '</div>';
1995-
}
1985+
var startDate = opt.startDate ? moment(opt.startDate).add(!opt.singleMonth && month === 'month2' ? 1 : 0, 'month') : false;
1986+
var endDate = opt.endDate ? moment(opt.endDate).add(!opt.singleMonth && month === 'month1' ? -1 : 0, 'month') : false;
19961987

1997-
return generateSelect(
1998-
'month',
1999-
generateSelectData(
2000-
range,
2001-
date.get('month'),
2002-
function(value) { return nameMonth(value); }
2003-
)
2004-
);
1988+
var minSelectableMonth = startDate && date.isSame(startDate, 'year') ? startDate.get('month') : 0;
1989+
var maxSelectableMonth = endDate && date.isSame(endDate, 'year') ? endDate.get('month') : 11;
1990+
var minVisibleMonth = Math.min(minSelectableMonth, currentMonth);
1991+
var maxVisibleMonth = Math.max(maxSelectableMonth, currentMonth);
1992+
1993+
if (minVisibleMonth === maxVisibleMonth) { return nonSelectableMonth; }
1994+
1995+
var selectData = generateSelectData(
1996+
{
1997+
minSelectable: minSelectableMonth,
1998+
maxSelectable: maxSelectableMonth,
1999+
minVisible: minVisibleMonth,
2000+
maxVisible: maxVisibleMonth,
2001+
},
2002+
currentMonth,
2003+
function (value) { return nameMonth(value); }
2004+
)
2005+
return generateSelect('month', selectData);
20052006
}
20062007

20072008
function generateYearElement(date, month) {
20082009
date = moment(date);
2009-
var startDate = opt.startDate ? moment(opt.startDate).add(!opt.singleMonth && month === 'month2' ? 1 : 0, 'month') : false;
2010-
var endDate = opt.endDate ? moment(opt.endDate).add(!opt.singleMonth && month === 'month1' ? -1 : 0, 'month') : false;
2011-
var fullYear = date.get('year');
2012-
var isYearFunction = opt.yearSelect && typeof opt.yearSelect === 'function';
2013-
var range;
2014-
2015-
if (!opt.yearSelect ||
2016-
startDate && endDate && startDate.isSame(moment(endDate), 'year')) {
2017-
return '<div class="month-element">' + fullYear + '</div>';
2018-
}
2019-
2020-
range = isYearFunction ? opt.yearSelect(fullYear) : opt.yearSelect.slice();
2010+
var currentYear = date.get('year');
2011+
var nonSelectableMonth = '<div class="month-element">' + currentYear + '</div>';
20212012

2022-
range = [
2023-
startDate ? Math.max(range[0], startDate.get('year')) : Math.min(range[0], fullYear),
2024-
endDate ? Math.min(range[1], endDate.get('year')) : Math.max(range[1], fullYear)
2025-
];
2013+
if (!opt.yearSelect) { return nonSelectableMonth; }
20262014

2027-
return generateSelect('year', generateSelectData(range, fullYear));
2015+
var isYearFunction = opt.yearSelect && typeof opt.yearSelect === 'function';
2016+
var startDate = opt.startDate ? moment(opt.startDate).add(!opt.singleMonth && month === 'month2' ? 1 : 0, 'month') : false;
2017+
var endDate = opt.endDate ? moment(opt.endDate).add(!opt.singleMonth && month === 'month1' ? -1 : 0, 'month') : false;
2018+
var range = isYearFunction ? opt.yearSelect(currentYear) : opt.yearSelect.slice();
2019+
2020+
var minSelectableYear = startDate ? Math.max(range[0], startDate.get('year')) : Math.min(range[0], currentYear);
2021+
var maxSelectableYear = endDate ? Math.min(range[1], endDate.get('year')) : Math.max(range[1], currentYear);
2022+
var minVisibleYear = Math.min(minSelectableYear, currentYear);
2023+
var maxVisibleYear = Math.max(maxSelectableYear, currentYear);
2024+
2025+
if (minVisibleYear === maxVisibleYear) { return nonSelectableMonth; }
2026+
2027+
var selectData = generateSelectData(
2028+
{
2029+
minSelectable: minSelectableYear,
2030+
maxSelectable: maxSelectableYear,
2031+
minVisible: minVisibleYear,
2032+
maxVisible: maxVisibleYear,
2033+
},
2034+
currentYear
2035+
)
2036+
return generateSelect('year', selectData);
20282037
}
20292038

20302039

20312040
function generateSelectData(range, current, valueBeautifier) {
20322041
var data = [];
20332042
valueBeautifier = valueBeautifier || function(value) { return value; };
20342043

2035-
for (var i = range[0]; i <= range[1]; i++) {
2044+
for (var i = range.minVisible; i <= range.maxVisible; i++) {
20362045
data.push({
20372046
value: i,
20382047
text: valueBeautifier(i),
2039-
isCurrent: i === current
2048+
selected: i === current,
2049+
disabled: ((i < range.minSelectable) || (i > range.maxSelectable)),
20402050
});
20412051
}
20422052

@@ -2048,12 +2058,14 @@
20482058
var current;
20492059

20502060
for (var i = 0, l = data.length; i < l; i++) {
2051-
select += '<option value="' + data[i].value + '"' + (data[i].isCurrent ? ' selected' : '') + '>';
2052-
select += data[i].text;
2053-
select += '</option>';
2054-
2055-
if (data[i].isCurrent) {
2056-
current = data[i].text;
2061+
var item = data[i];
2062+
select += '<option value="' + item.value + '"' +
2063+
(item.selected ? ' selected' : '') +
2064+
(item.disabled ? ' disabled' : '') + '>' +
2065+
item.text + '</option>';
2066+
2067+
if (item.selected) {
2068+
current = item.text;
20572069
}
20582070
}
20592071

@@ -2586,4 +2598,4 @@
25862598
}
25872599

25882600
};
2589-
}));
2601+
}));

0 commit comments

Comments
 (0)