diff --git a/demo.js b/demo.js index 2f4d714..41ed584 100644 --- a/demo.js +++ b/demo.js @@ -18,7 +18,7 @@ $(function() define a new language named "custom" */ - $.dateRangePickerLanguages['custom'] = + $.dateRangePickerLanguages['custom'] = { 'selected': 'Choosed:', 'days': 'Days', @@ -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) @@ -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 { @@ -188,8 +188,8 @@ $(function() $('#date-range101').dateRangePicker( { - showShortcuts: true, - shortcuts : + showShortcuts: true, + shortcuts : { 'next-days': [3,5,7], 'next': ['week','month','year'] @@ -199,7 +199,7 @@ $(function() $('#date-range102').dateRangePicker( { showShortcuts: true, - shortcuts : + shortcuts : { 'prev-days': [3,5,7], 'prev': ['week','month','year'], @@ -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, @@ -483,7 +483,7 @@ $(function() }); $('#date-range51').dateRangePicker( - { + { customArrowPrevSymbol: '', customArrowNextSymbol: '' }); @@ -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'), }); - - }); diff --git a/index.html b/index.html index de362ac..f70be76 100755 --- a/index.html +++ b/index.html @@ -673,8 +673,8 @@

Demonstrations

Custom arrow symbol: Show Config 
-// To make this demo work completely, the FontAwesome stylesheets are required 				
-{		
+// To make this demo work completely, the FontAwesome stylesheets are required
+{
     customArrowPrevSymbol: '<i class="fa fa-arrow-circle-left"></i>',
     customArrowNextSymbol: '<i class="fa fa-arrow-circle-right"></i>'
 }
@@ -712,6 +712,19 @@ 
Demonstrations

     yearSelect: function(current) {
         return [current - 10, current + 10];
     }
+}
+
+ + +
  • + Month and year select min and max dates: + Show Config + 
    +{
+    monthSelect: true,
+    yearSelect: true,
+    startDate: moment().subtract(3, 'months').format('YYYY-MM-DD'),
+    endDate: moment().endOf('day').format('YYYY-MM-DD'),
 }
    • diff --git a/src/jquery.daterangepicker.js b/src/jquery.daterangepicker.js index 867a558..aede1ff 100755 --- a/src/jquery.daterangepicker.js +++ b/src/jquery.daterangepicker.js @@ -1975,56 +1975,65 @@ } 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 = '
    ' + currentMonthName + '
    '; - if (!opt.monthSelect || - startDate && endDate && startDate.isSame(endDate, 'month')) { - return '
    ' + nameMonth(date.get('month')) + '
    '; - } + 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 '
    ' + nameMonth(date.get('month')) + '
    '; - } + 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 '
    ' + fullYear + '
    '; - } - - range = isYearFunction ? opt.yearSelect(fullYear) : opt.yearSelect.slice(); + var currentYear = date.get('year'); + var nonSelectableMonth = '
    ' + currentYear + '
    '; - 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); } @@ -2032,11 +2041,12 @@ 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)), }); } @@ -2048,12 +2058,14 @@ var current; for (var i = 0, l = data.length; i < l; i++) { - select += ''; - - if (data[i].isCurrent) { - current = data[i].text; + var item = data[i]; + select += ''; + + if (item.selected) { + current = item.text; } } @@ -2586,4 +2598,4 @@ } }; -})); \ No newline at end of file +}));