Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

RestrictToYear option in datepicker #394

Merged
merged 1 commit into from

2 participants

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 3, 2014
  1. @jusle123
This page is out of date. Refresh to see the latest.
View
37 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 ) );
View
14 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 {
View
42 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' );
+ });
});
Something went wrong with that request. Please try again.