Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Commit

Permalink
Merge pull request #394 from jusle123/datepicker_restrict_year
Browse files Browse the repository at this point in the history 
RestrictToYear option in datepicker
  • Loading branch information
Kevin Parkerson committed Mar 7, 2014
2 parents 9a2c9b7 + 90c6198 commit 335f65a
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 12 deletions.
37 changes: 26 additions & 11 deletions src/datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -23,9 +23,9 @@
}
}(function ($) {
// -- END UMD WRAPPER PREFACE --

// -- BEGIN MODULE CODE HERE --

var old = $.fn.datepicker;
var moment = false;

Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 ) {
Expand All @@ -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 ) {
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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>';
}
Expand Down Expand Up @@ -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' );
}
Expand Down Expand Up @@ -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 ) );
Expand Down
14 changes: 14 additions & 0 deletions src/less/datepicker.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,13 @@
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

&.disabled {
.leftArrow {
border-bottom: 3px solid #cccccc;
border-left: 3px solid #cccccc;
}
}
}

.right {
Expand All @@ -82,6 +89,13 @@
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

&.disabled {
.rightArrow {
border-top: 3px solid #cccccc;
border-right: 3px solid #cccccc;
}
}
}

.center {
Expand Down
42 changes: 41 additions & 1 deletion test/datepicker-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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' );
});
});

0 comments on commit 335f65a

Please sign in to comment.