Skip to content

Bugfix/#412, #452 - Fix out-of-bounds options when building the month/year selects #455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 26, 2018
Merged

Bugfix/#412, #452 - Fix out-of-bounds options when building the month/year selects #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5610515
Add new usage showcase for month & date select + startDate & endDate …
monovertex Sep 23, 2018
1cbb9fd
Fix issue with out-of-bounds options when generating month / year sel…
monovertex Sep 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 23 additions & 17 deletions demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $(function()
define a new language named "custom"
*/

$.dateRangePickerLanguages['custom'] =
$.dateRangePickerLanguages['custom'] =
{
'selected': 'Choosed:',
'days': 'Days',
Expand Down Expand Up @@ -48,7 +48,7 @@ $(function()
'default-range' : 'Please select a date range between %d and %d days',
'default-default': 'This is costom language'
};

$('#date-range0').dateRangePicker(
{
}).on('datepicker-first-date-selected', function(event, obj)
Expand Down Expand Up @@ -156,7 +156,7 @@ $(function()
startOfWeek: 'sunday',
language:'en',
showShortcuts: true,
customShortcuts:
customShortcuts:
[
//if return an array of two dates, it will select the date range between the two dates
{
Expand Down Expand Up @@ -188,8 +188,8 @@ $(function()

$('#date-range101').dateRangePicker(
{
showShortcuts: true,
shortcuts :
showShortcuts: true,
shortcuts :
{
'next-days': [3,5,7],
'next': ['week','month','year']
Expand All @@ -199,7 +199,7 @@ $(function()
$('#date-range102').dateRangePicker(
{
showShortcuts: true,
shortcuts :
shortcuts :
{
'prev-days': [3,5,7],
'prev': ['week','month','year'],
Expand Down Expand Up @@ -277,17 +277,17 @@ $(function()
$('#date-range12').dateRangePicker(
{
inline:true,
container: '#date-range12-container',
alwaysOpen:true
container: '#date-range12-container',
alwaysOpen:true
});

$('#date-range13').dateRangePicker(
{
autoClose: true,
singleDate : true,
showShortcuts: false
showShortcuts: false
});

$('#date-range13-2').dateRangePicker(
{
autoClose: true,
Expand Down Expand Up @@ -483,7 +483,7 @@ $(function()
});

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

$('#date-range54').dateRangePicker(
$('#date-range54').dateRangePicker(
{
monthSelect: true,
yearSelect: function(current) {
return [current - 10, current + 10];
}
});

$('#date-range55').dateRangePicker(
{
monthSelect: true,
yearSelect: function(current) {
return [current - 10, current + 10];
}
yearSelect: true,
startDate: moment().subtract(3, 'months').format('YYYY-MM-DD'),
endDate: moment().endOf('day').format('YYYY-MM-DD'),
});


});
17 changes: 15 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -673,8 +673,8 @@ <h2 id="demonstrations">Demonstrations</h2>
Custom arrow symbol: <input id="date-range51" size="30" value="">
<a href="#" class="show-option">Show Config</a>
<pre class="options">
// To make this demo work completely, the FontAwesome stylesheets are required
{
// To make this demo work completely, the FontAwesome stylesheets are required
{
customArrowPrevSymbol: '&lt;i class="fa fa-arrow-circle-left"&gt;&lt;/i&gt;',
customArrowNextSymbol: '&lt;i class="fa fa-arrow-circle-right"&gt;&lt;/i&gt;'
}
Expand Down Expand Up @@ -712,6 +712,19 @@ <h2 id="demonstrations">Demonstrations</h2>
yearSelect: function(current) {
return [current - 10, current + 10];
}
}
</pre>
</li>

<li class="demo">
Month and year select min and max dates: <input id="date-range55" size="30" value="">
<a href="#" class="show-option">Show Config</a>
<pre class="options">
{
monthSelect: true,
yearSelect: true,
startDate: moment().subtract(3, 'months').format('YYYY-MM-DD'),
endDate: moment().endOf('day').format('YYYY-MM-DD'),
}
</pre>
</li>
Expand Down
110 changes: 61 additions & 49 deletions src/jquery.daterangepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1975,68 +1975,78 @@
}

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

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

range = [
startDate && date.isSame(startDate, 'year') ? startDate.get('month') : 0,
date ? date.get('month') : 11
];

if (range[0] === range[1]) {
return '<div class="month-element">' + nameMonth(date.get('month')) + '</div>';
}
var startDate = opt.startDate ? moment(opt.startDate).add(!opt.singleMonth && month === 'month2' ? 1 : 0, 'month') : false;
var endDate = opt.endDate ? moment(opt.endDate).add(!opt.singleMonth && month === 'month1' ? -1 : 0, 'month') : false;

return generateSelect(
'month',
generateSelectData(
range,
date.get('month'),
function(value) { return nameMonth(value); }
)
);
var minSelectableMonth = startDate && date.isSame(startDate, 'year') ? startDate.get('month') : 0;
var maxSelectableMonth = endDate && date.isSame(endDate, 'year') ? endDate.get('month') : 11;
var minVisibleMonth = Math.min(minSelectableMonth, currentMonth);
var maxVisibleMonth = Math.max(maxSelectableMonth, currentMonth);

if (minVisibleMonth === maxVisibleMonth) { return nonSelectableMonth; }

var selectData = generateSelectData(
{
minSelectable: minSelectableMonth,
maxSelectable: maxSelectableMonth,
minVisible: minVisibleMonth,
maxVisible: maxVisibleMonth,
},
currentMonth,
function (value) { return nameMonth(value); }
)
return generateSelect('month', selectData);
}

function generateYearElement(date, month) {
date = moment(date);
var startDate = opt.startDate ? moment(opt.startDate).add(!opt.singleMonth && month === 'month2' ? 1 : 0, 'month') : false;
var endDate = opt.endDate ? moment(opt.endDate).add(!opt.singleMonth && month === 'month1' ? -1 : 0, 'month') : false;
var fullYear = date.get('year');
var isYearFunction = opt.yearSelect && typeof opt.yearSelect === 'function';
var range;

if (!opt.yearSelect ||
startDate && endDate && startDate.isSame(moment(endDate), 'year')) {
return '<div class="month-element">' + fullYear + '</div>';
}

range = isYearFunction ? opt.yearSelect(fullYear) : opt.yearSelect.slice();
var currentYear = date.get('year');
var nonSelectableMonth = '<div class="month-element">' + currentYear + '</div>';

range = [
startDate ? Math.max(range[0], startDate.get('year')) : Math.min(range[0], fullYear),
endDate ? Math.min(range[1], endDate.get('year')) : Math.max(range[1], fullYear)
];
if (!opt.yearSelect) { return nonSelectableMonth; }

return generateSelect('year', generateSelectData(range, fullYear));
var isYearFunction = opt.yearSelect && typeof opt.yearSelect === 'function';
var startDate = opt.startDate ? moment(opt.startDate).add(!opt.singleMonth && month === 'month2' ? 1 : 0, 'month') : false;
var endDate = opt.endDate ? moment(opt.endDate).add(!opt.singleMonth && month === 'month1' ? -1 : 0, 'month') : false;
var range = isYearFunction ? opt.yearSelect(currentYear) : opt.yearSelect.slice();

var minSelectableYear = startDate ? Math.max(range[0], startDate.get('year')) : Math.min(range[0], currentYear);
var maxSelectableYear = endDate ? Math.min(range[1], endDate.get('year')) : Math.max(range[1], currentYear);
var minVisibleYear = Math.min(minSelectableYear, currentYear);
var maxVisibleYear = Math.max(maxSelectableYear, currentYear);

if (minVisibleYear === maxVisibleYear) { return nonSelectableMonth; }

var selectData = generateSelectData(
{
minSelectable: minSelectableYear,
maxSelectable: maxSelectableYear,
minVisible: minVisibleYear,
maxVisible: maxVisibleYear,
},
currentYear
)
return generateSelect('year', selectData);
}


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

for (var i = range[0]; i <= range[1]; i++) {
for (var i = range.minVisible; i <= range.maxVisible; i++) {
data.push({
value: i,
text: valueBeautifier(i),
isCurrent: i === current
selected: i === current,
disabled: ((i < range.minSelectable) || (i > range.maxSelectable)),
});
}

Expand All @@ -2048,12 +2058,14 @@
var current;

for (var i = 0, l = data.length; i < l; i++) {
select += '<option value="' + data[i].value + '"' + (data[i].isCurrent ? ' selected' : '') + '>';
select += data[i].text;
select += '</option>';

if (data[i].isCurrent) {
current = data[i].text;
var item = data[i];
select += '<option value="' + item.value + '"' +
(item.selected ? ' selected' : '') +
(item.disabled ? ' disabled' : '') + '>' +
item.text + '</option>';

if (item.selected) {
current = item.text;
}
}

Expand Down Expand Up @@ -2586,4 +2598,4 @@
}

};
}));
}));