RestrictToYear option in datepicker

src/datepicker.js

@@ -10,7 +10,7 @@
 
 // -- BEGIN UMD WRAPPER PREFACE --
 
-// For more information on UMD visit: 
+// For more information on UMD visit:
 // https://github.com/umdjs/umd/blob/master/jqueryPlugin.js
 
 (function (factory) {
@@ -23,9 +23,9 @@
     }
 }(function ($) {
     // -- END UMD WRAPPER PREFACE --
-        
+
     // -- BEGIN MODULE CODE HERE --
-    
+
 	var old    = $.fn.datepicker;
 	var moment = false;
 
@@ -112,6 +112,8 @@
 		this.options.restrictLastMonth = Boolean( this.options.restrictDateSelection );
 		this.options.restrictNextMonth = false;
 
+		this.options.restrictToYear = this.options.restrictToYear || null;
+
 		this.months = [
 			{ abbreviation: this.options.monthNames[0], 'class': '', number: 0 },
 			{ abbreviation: this.options.monthNames[1], 'class': '', number: 1 },
@@ -309,7 +311,10 @@
 			var restrictBoolean = false;
 			returnClasses       = returnClasses || false;
 
-			if( date <= this.minDate || date >= this.maxDate ) {
+			if( this.options.restrictToYear && this.options.restrictToYear !== date.getFullYear() ) {
+				classes += ' restrict';
+				restrictBoolean = true;
+			} else if( date <= this.minDate || date >= this.maxDate ) {
 				if ( Boolean( this.blackoutDates( date ) ) ) {
 					classes += ' restrict blackout';
 					restrictBoolean = true;
@@ -634,7 +639,7 @@
 			if( e.target.className.indexOf( 'restrict' ) > -1 ) {
 				return this._killEvent(e);
 			}
-			
+
 			if( this.options.showDays) {
 				this.viewDate = new Date( this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1 );
 			} else if( this.options.showMonths ) {
@@ -660,7 +665,7 @@
 			if( e.target.className.indexOf('restrict') > -1 ) {
 				return this._killEvent(e);
 			}
-			
+
 			if( this.options.showDays ) {
 				this.viewDate = new Date( this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1 );
 			} else if( this.options.showMonths ) {
@@ -715,7 +720,7 @@
 		_toggleMonthYearPicker: function( e ) {
 			if( this.options.showDays ) {
 				this._showView( 2 );
-			} else if( this.options.showMonths ) {
+			} else if( this.options.showMonths && !this.options.restrictToYear ) {
 				this._showView( 3 );
 			} else if( this.options.showYears ) {
 				this._showView( 1 );
@@ -816,7 +821,7 @@
 			var dropdownHtml = '<div class="' + inputClass + '">' +
 						'<div class="dropdown-menu"></div>' +
 						'<input type="text" '+ this._calculateInputSize() +' value="'+this.formatDate( this.date ) +'" data-toggle="dropdown">';
-			
+
 			if( Boolean( this.options.createInput.dropDownBtn ) ) {
 				dropdownHtml = dropdownHtml + '<button type="button" class="btn" data-toggle="dropdown"><i class="icon-calendar"></i></button>';
 			}
@@ -868,7 +873,7 @@
 			}
 
 			if( !!triggerError ) {
-				// we will insert the staged date into the input 
+				// we will insert the staged date into the input
 				this._setNullDate( true );
 				this.$element.trigger( 'inputParsingFailed' );
 			}
@@ -927,8 +932,18 @@
 
 			this.$calendar.on( 'click', $.proxy( this._emptySpace, this) );
 
-			this.$header.find( '.left' ).on( 'click', $.proxy( this._previous, this ) );
-			this.$header.find( '.right' ).on( 'click', $.proxy( this._next, this ) );
+			if ( this.options.restrictToYear !== this.viewDate.getFullYear() || this.viewDate.getMonth() > 0 ) {
+				this.$header.find( '.left' ).on( 'click', $.proxy( this._previous, this ) );
+			} else {
+				this.$header.find( '.left' ).addClass('disabled');
+			}
+
+			if ( this.options.restrictToYear !== this.viewDate.getFullYear() || this.viewDate.getMonth() < 11 ) {
+				this.$header.find( '.right' ).on( 'click', $.proxy( this._next, this ) );
+			} else {
+				this.$header.find( '.right' ).addClass('disabled');
+			}
+
 			this.$header.find( '.center' ).on( 'click', $.proxy( this._toggleMonthYearPicker, this ) );
 
 			this.$lastMonthDiv.find( 'div' ).on( 'click', $.proxy( this._previousSet, this ) );

src/less/datepicker.less

@@ -56,6 +56,13 @@
 					-ms-transform: rotate(45deg);
 					transform: rotate(45deg);
 				}
+
+				&.disabled {
+					.leftArrow {
+						border-bottom: 3px solid #cccccc;
+						border-left: 3px solid #cccccc;
+					}
+				}
 			}
 
 			.right {
@@ -82,6 +89,13 @@
 					-ms-transform: rotate(45deg);
 					transform: rotate(45deg);
 				}
+
+				&.disabled {
+					.rightArrow {
+						border-top: 3px solid #cccccc;
+						border-right: 3px solid #cccccc;
+					}
+				}
 			}
 
 			.center {

test/datepicker-test.js

@@ -117,7 +117,7 @@ require(['jquery', 'fuelux/datepicker'], function ($) {
 		var dateFormatted = new Date( $sample.datepicker( 'getFormattedDate' ) );
 		var dateObject    = new Date( $sample.datepicker( 'getDate' ) );
 		var dateUnix      = $sample.datepicker( 'getDate', { unix: true } );
-		
+
 		if( dateFormatted !== 'Invalid Date' ) {
 			dateFormatted = true;
 		}
@@ -387,4 +387,44 @@ require(['jquery', 'fuelux/datepicker'], function ($) {
 		equal( getFormatCodeError, defaultErrorReturned, "getFormatCode is not available for use" );
 		equal( setFormatCodeError, defaultErrorReturned, "setFormatCode is not available for use" );
 	});
+
+	test( 'should restrict navigation to the previous year if option restrictToYear is set to the current year', function() {
+		var currentYear = new Date().getFullYear();
+		var options = {
+			date: new Date( currentYear, 0, 10 ), // January 10th
+			restrictToYear: currentYear
+		};
+		var $sample = $( html ).datepicker( options );
+		var disabledLeftArrow = $sample.find('.left.disabled').length;
+		var previousMonthDaysVisible = $sample.find('.lastmonth div').length;
+		var disabledDaysVisible = $sample.find('.lastmonth .restrict').length;
+		equal( disabledLeftArrow, 1, 'navigation left is disabled' );
+		equal( disabledDaysVisible, previousMonthDaysVisible, 'visible previous month days are disabled' );
+	});
+
+	test( 'should restrict navigation to the next year if option restrictToYear is set to the current year', function() {
+		var currentYear = new Date().getFullYear();
+		var options = {
+			date: new Date( currentYear, 11, 10 ), // December 10th
+			restrictToYear: currentYear
+		};
+		var $sample = $( html ).datepicker( options );
+		var disabledLeftArrow = $sample.find('.right.disabled').length;
+		var nextMonthDaysVisible = $sample.find('.nextmonth div').length;
+		var disabledDaysVisible = $sample.find('.nextmonth .restrict').length;
+		equal( disabledLeftArrow, 1, 'navigation right is disabled' );
+		equal( disabledDaysVisible, nextMonthDaysVisible, 'visible next month days are disabled' );
+	});
+
+	test( 'should disable dates not in the restrictToYear year', function() {
+		var options = {
+			date: new Date( 2010, 11, 10 ),
+			restrictToYear: 2014
+		};
+		var $sample = $( html ).datepicker( options );
+		var daysDisplayed = $sample.find( '.thismonth .weekday' ).length;
+		var daysDisplayedDisabled = $sample.find( '.thismonth .weekday.restrict' ).length;
+		ok( daysDisplayedDisabled > 0, 'some days are disabled' );
+		equal( daysDisplayedDisabled, daysDisplayed, 'all days are disabled' );
+	});
 });