fixed #126, fixed #127, fixed #129

README.md

@@ -1,4 +1,4 @@
-# pickadate v3.0.2 [![pickadate build status](https://travis-ci.org/amsul/pickadate.js.png?branch=gh-pages)](https://travis-ci.org/amsul/pickadate.js)
+# pickadate v3.0.3 [![pickadate build status](https://travis-ci.org/amsul/pickadate.js.png?branch=gh-pages)](https://travis-ci.org/amsul/pickadate.js)
 
 The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
 
@@ -11,7 +11,7 @@ The mobile-friendly, responsive, and lightweight jQuery date & time input picker
 
 #### To get it:
 
-[Download v3.0.2](https://github.com/amsul/pickadate.js/archive/3.0.2.zip) or `git clone git://github.com/amsul/pickadate.js.git` or `bower install pickadate`
+[Download v3.0.3](https://github.com/amsul/pickadate.js/archive/3.0.3.zip) or `git clone git://github.com/amsul/pickadate.js.git` or `bower install pickadate`
 
 
 
@@ -36,8 +36,8 @@ There are currently two pickers: **date** and **time**.
 
 File                    | Contents                 | Size (min & gzip)
 ----------------------- | ------------------------ | ----------------------
-`picker.js`             | __Base *__               | 1.24kb
-`picker.date.js`        | Date picker              | 1.87kb
+`picker.js`             | __Base *__               | 1.26kb
+`picker.date.js`        | Date picker              | 1.88kb
 `picker.time.js`        | Time picker              | 1.30kb
 
 __*__ The base script is **required** for any of the pickers to function.
@@ -62,7 +62,7 @@ __*__ One and only one base stylesheet is **required**. [Choose a theme](http://
 
 ### Translations
 
-The translations are copied into the `lib/translations` folder. There are currently [30 languages](https://github.com/amsul/pickadate.js/blob/v3.0.2/lib/translations) included.
+The translations are copied into the `lib/translations` folder. There are currently [30 languages](https://github.com/amsul/pickadate.js/blob/v3.0.3/lib/translations) included.
 
 
 <br>

_raw/lib/picker.date.js

@@ -216,9 +216,10 @@ DatePicker.prototype.navigate = function( type, value, options ) {
 
     if ( Picker._.isObject( value ) ) {
 
-        var year = value.year,
-            date = value.date,
-            month = new Date( year, value.month + ( options && options.nav ? options.nav : 0 ), 1 ).getMonth()
+        var targetDateObject = new Date( value.year, value.month + ( options && options.nav ? options.nav : 0 ), 1 ),
+            year = targetDateObject.getFullYear(),
+            month = targetDateObject.getMonth(),
+            date = value.date
 
         // If the month we’re going to doesn’t have enough days,
         // keep decreasing the date until we reach the month’s last date.
@@ -272,120 +273,134 @@ DatePicker.prototype.viewset = function( type, dateObject/*, options*/ ) {
 
 
 /**
- * Validate a date as enabled.
+ * Validate a date as enabled and shift if needed.
  */
 DatePicker.prototype.validate = function( type, dateObject, options ) {
 
     var calendar = this,
-        interval = options && options.interval ? options.interval : 1
 
-    // Check if the object is disabled.
-    if ( calendar.disabled( dateObject ) ) {
+        // Keep a reference to the original date.
+        originalDateObject = dateObject,
 
-        // Shift with the interval until we reach an enabled time.
-        dateObject = calendar.shift( dateObject, interval )
-    }
-
-    // Scope the object into range.
-    dateObject = calendar.scope( dateObject )
-
-    // Do a second check to see if we landed on a disabled min/max.
-    // In that case, shift using the opposite interval direction as before.
-    if ( calendar.disabled( dateObject ) ) {
-        dateObject = calendar.shift( dateObject, dateObject.pick <= calendar.item.min.pick ? 1 : dateObject.pick >= calendar.item.max.pick ? -1 : interval )
-    }
+        // Make sure we have an interval.
+        interval = options && options.interval ? options.interval : 1,
 
-    return dateObject
-} //DatePicker.prototype.validate
+        // Check if we have any enabled dates after/before now.
+        hasEnabledBeforeTarget, hasEnabledAfterTarget,
 
+        // The min & max limits.
+        minLimitObject = calendar.item.min,
+        maxLimitObject = calendar.item.max,
 
-/**
- * Check if an object is disabled.
- */
-DatePicker.prototype.disabled = function( dateObject ) {
-
-    var
-        calendar = this,
+        // Check if we’ve reached the limit during shifting.
+        reachedMin, reachedMax,
 
-        // Filter through the disabled dates to check if this is one.
-        isDisabledTime = calendar.item.disable.filter( function( dateToDisable ) {
+        // Check if the calendar is flipped and at least one weekday is enabled.
+        hasEnabledWeekdays = calendar.item.enable === -1 && calendar.item.disable.filter( function( value ) {
 
-            // If the date is a number, match the weekday with 0index and `firstDay` check.
-            if ( Picker._.isInteger( dateToDisable ) ) {
-                return dateObject.day === ( calendar.settings.firstDay ? dateToDisable : dateToDisable - 1 ) % 7
+            // If there’s a date, check where it is relative to the target.
+            if ( Array.isArray( value ) ) {
+                var dateTime = calendar.create( value ).pick
+                if ( dateTime < dateObject.pick ) hasEnabledBeforeTarget = true
+                else if ( dateTime > dateObject.pick ) hasEnabledAfterTarget = true
             }
 
-            // If it's an array, create the object and match the exact date.
-            if ( Array.isArray( dateToDisable ) ) {
-                return dateObject.pick === calendar.create( dateToDisable ).pick
-            }
+            // Return only integers for enabled weekdays.
+            return Picker._.isInteger( value )
         }).length
 
-    // If the calendar is "enabled" flag is flipped, flip the condition.
-    return calendar.item.enable === -1 ? !isDisabledTime : isDisabledTime
-} //DatePicker.prototype.disabled
 
 
-/**
- * Shift an object by an interval until we reach an enabled object.
- */
-DatePicker.prototype.shift = function( dateObject, interval ) {
+    // No need to validate if we’re navigating months or there are no enabled days.
+    if (
+        ( !( options && options.nav ) && !( !hasEnabledWeekdays && !hasEnabledBeforeTarget && !hasEnabledAfterTarget ) ) ||
+        ( dateObject.pick <= minLimitObject.pick || dateObject.pick >= maxLimitObject.pick )
+    ) {
 
-    var calendar = this,
-        originalDateObject = dateObject
 
-    interval = interval || 1
+        // Flip the direction if there aren’t any enabled weekdays
+        // and there are no enabled dates in the direction of the interval.
+        if ( !hasEnabledWeekdays && ( ( !hasEnabledAfterTarget && interval > 0 ) || ( !hasEnabledBeforeTarget && interval < 0 ) ) ) {
+            interval *= -1
+        }
 
-    // Keep looping as long as the time is disabled.
-    while ( calendar.disabled( dateObject ) ) {
 
-        // Increase/decrease the date by the key movement and keep looping.
-        dateObject = calendar.create([ dateObject.year, dateObject.month, dateObject.date + interval ])
+        // Keep looping until we reach an enabled date.
+        while ( calendar.disabled( dateObject ) ) {
 
-        // Check if we've looped through over 2 months in either direction.
-        if ( Math.abs( dateObject.month - originalDateObject.month ) > 2 ) {
 
-            // Reset the date object to the original date.
-            dateObject = originalDateObject
+            // If we’ve looped into the next/prev month, return to the original date and flatten the interval.
+            if ( Math.abs( interval ) > 1 && ( dateObject.month < originalDateObject.month || dateObject.month > originalDateObject.month ) ) {
+                dateObject = originalDateObject
+                interval = Math.abs( interval ) / interval
+            }
+
 
-            // If the calendar is flipped, go in the opposite direction.
-            if ( calendar.item.enable === -1 ) {
-                interval = interval < 0 ? 1 : -1
+            // If we’ve reached the min/max limit, reverse the direction and flatten the interval.
+            if ( dateObject.pick <= minLimitObject.pick ) {
+                reachedMin = true
+                interval = 1
             }
-            // Otherwise go in the same direction.
-            else {
-                interval = interval < 0 ? -1 : 1
+            else if ( dateObject.pick >= maxLimitObject.pick ) {
+                reachedMax = true
+                interval = -1
             }
-        }
 
-        // If we've gone beyond the limits, break out of the loop.
-        if ( dateObject.pick <= calendar.item.min.pick || dateObject.pick >= calendar.item.max.pick ) {
-            break
+
+            // If we’ve reached both limits, just break out of the loop.
+            if ( reachedMin && reachedMax ) {
+                break
+            }
+
+
+            // Finally, create the shifted date using the interval and keep looping.
+            dateObject = calendar.create([ dateObject.year, dateObject.month, dateObject.date + interval ])
         }
-    }
 
-    // Return the final object.
+    } //endif
+
+
+    // Return the date object settled on.
     return dateObject
-} //DatePicker.prototype.shift
+} //DatePicker.prototype.validate
 
 
 /**
- * Scope an object into range of min and max.
+ * Check if an object is disabled.
  */
-DatePicker.prototype.scope = function( dateObject ) {
-    var minTime = this.item.min.pick,
-        maxTime = this.item.max.pick
-    return this.create( dateObject.pick > maxTime ? maxTime : dateObject.pick < minTime ? minTime : dateObject )
-} //DatePicker.prototype.scope
+DatePicker.prototype.disabled = function( dateObject ) {
+
+    var calendar = this,
+
+        // Filter through the disabled dates to check if this is one.
+        isDisabledDate = calendar.item.disable.filter( function( dateToDisable ) {
+
+            // If the date is a number, match the weekday with 0index and `firstDay` check.
+            if ( Picker._.isInteger( dateToDisable ) ) {
+                return dateObject.day === ( calendar.settings.firstDay ? dateToDisable : dateToDisable - 1 ) % 7
+            }
+
+            // If it's an array, create the object and match the exact date.
+            if ( Array.isArray( dateToDisable ) ) {
+                return dateObject.pick === calendar.create( dateToDisable ).pick
+            }
+        }).length
+
+
+    // It’s disabled beyond the min/max limits. If within the limits, check the
+    // calendar “enabled” flag is flipped and respectively flip the condition.
+    return dateObject.pick < calendar.item.min.pick ||
+        dateObject.pick > calendar.item.max.pick ||
+        calendar.item.enable === -1 ? !isDisabledDate : isDisabledDate
+} //DatePicker.prototype.disabled
 
 
 /**
  * Parse a string into a usable type.
  */
 DatePicker.prototype.parse = function( type, value, options ) {
 
-    var
-        calendar = this,
+    var calendar = this,
         parsingObject = {}
 
     if ( !value || Picker._.isInteger( value ) || Array.isArray( value ) || Picker._.isDate( value ) || Picker._.isObject( value ) && Picker._.isInteger( value.pick ) ) {

_raw/lib/picker.js

@@ -18,7 +18,7 @@
 
 
 // Create a global scope.
-window.Picker = (function( $document, undefined ) {
+window.Picker = (function( $, $document, undefined ) {
 
 
 /**
@@ -342,8 +342,8 @@ function PickerConstructor( ELEMENT, NAME, COMPONENT, OPTIONS ) {
                                 PickerConstructor._.trigger( P.component.key.go, P, [ keycodeToMove ] )
                             }
 
-                            // Or on “enter”, set the value and close.
-                            else {
+                            // On “enter”, if the highlighted item isn’t disabled, set the value and close.
+                            else if ( !P.$root.find( '.' + CLASSES.highlighted ).hasClass( CLASSES.disabled ) ) {
                                 P.set( 'select', P.component.item.highlight ).close()
                             }
                         }
@@ -779,7 +779,7 @@ return PickerConstructor
 
 
 // Close the global scope.
-})( $( document ) );
+})( jQuery, jQuery( document ) );
 
 
 

_raw/lib/themes/_variables.less

@@ -84,6 +84,7 @@
 // Disabled things.. such as days, month nav, etc.
 @disabled-things-bg: #f5f5f5;
 @disabled-things-text: #ddd;
+@disabled-highlighted-things-bg: #bbb;
 
 
 
@@ -156,7 +157,6 @@
  */
 .opacity( @decimal ) {
     @percent: @decimal * 100;
-    // @args: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{percent})";
     filter: ~"alpha(opacity=@{percent})";
     -moz-opacity: @decimal;

_raw/lib/themes/base.date.less

@@ -226,11 +226,17 @@
 }
 
 // Disabled dates.
-.picker__day--disabled,
-.picker__day--disabled:hover {
+.picker__day--disabled:hover,
+.picker--focused .picker__day--disabled {
     .picker-item-disabled;
 }
 
+// Disabled and highlighted dates.
+.picker__day--highlighted.picker__day--disabled:hover,
+.picker--focused .picker__day--highlighted.picker__day--disabled {
+    background: @disabled-highlighted-things-bg;
+}
+
 
 /**
  * The footer containing the "today" and "clear" buttons.

api.htm

@@ -265,7 +265,7 @@ <h2 class="heading heading--divide"><span class="heading__text">Clear<a class="h
 
         <pre class="pre--demo"><code data-language="javascript">picker.clear()</code></pre>
 
-        <fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><button id=button__api-clear class="fieldset__button button button--small">Clear</button><input id="demo__api-clear" class="fieldset__input " type=text value="20 May, 2013" placeholder="Try me&hellip;"></div></fieldset>
+        <fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><button id=button__api-clear class="fieldset__button button button--small">Clear</button><input id="demo__api-clear" class="fieldset__input " type=text value="23 May, 2013" placeholder="Try me&hellip;"></div></fieldset>
 
         <p>This is a shorthand that uses <a href="#method-set">the <code class="function">set</code> method</a> behind the scenes.</p>
 
@@ -307,7 +307,7 @@ <h3 class="heading heading--divide"><span class="heading__text"><b>*</b> Item Ob
 
         <p>Each “date” or “time” within the picker has an item object accompanying it behind the scenes.</p>
 
-        <p>Here’s a <b>date picker item object</b> for <u>20 May, 2013</u>:</p>
+        <p>Here’s a <b>date picker item object</b> for <u>23 May, 2013</u>:</p>
         <pre><code data-language="javascript">{
     // The full year.
     year: 2013,
@@ -328,16 +328,16 @@ <h3 class="heading heading--divide"><span class="heading__text"><b>*</b> Item Ob
     pick: 1366430400000
 }</code></pre>
 
-        <p>Here’s a <b>time picker item object</b> for <u>3:42 AM</u>:</p>
+        <p>Here’s a <b>time picker item object</b> for <u>4:35 AM</u>:</p>
         <pre><code data-language="javascript">{
     // Hour of the day from 0 to 23.
-    hour: 3,
+    hour: 4,
 
     // The minutes of the hour from 0 to 59 (based on the interval).
     mins: 60,
 
     // The “pick” value used for comparisons.
-    pick: 240
+    pick: 300
 }</code></pre>
 
     </div> <!-- .section__block -->
@@ -355,7 +355,7 @@ <h2 class="heading heading--divide"><span class="heading__text">Get <code class=
 
         <pre class="pre--demo"><code data-language="javascript">picker.get() // Short for `picker.get('value')`.</code></pre>
 
-        <fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><button id=button__api-get--value class="fieldset__button button button--small">Log the value</button><input id="demo__api-get--value" class="fieldset__input " type=text value="20 May, 2013" placeholder="Open your console and try me&hellip;"></div></fieldset>
+        <fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><button id=button__api-get--value class="fieldset__button button button--small">Log the value</button><input id="demo__api-get--value" class="fieldset__input " type=text value="23 May, 2013" placeholder="Open your console and try me&hellip;"></div></fieldset>
 
     </div> <!-- .section__block -->
 
@@ -522,7 +522,7 @@ <h2 class="heading heading--divide"><span class="heading__text">Set <code class=
 
         <pre class="pre--demo"><code data-language="javascript">picker.set('clear')</code></pre>
 
-        <fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><button id=button__api-set-clear class="fieldset__button button button--small">Clear</button><input id="demo__api-set-clear" class="fieldset__input " type=text value="20 May, 2013" placeholder="Try me&hellip;"></div></fieldset>
+        <fieldset class="fieldset fieldset--demo js__fieldset"><div class="fieldset__wrapper"><button id=button__api-set-clear class="fieldset__button button button--small">Clear</button><input id="demo__api-set-clear" class="fieldset__input " type=text value="23 May, 2013" placeholder="Try me&hellip;"></div></fieldset>
 
         <p>This is the full form of <a href="#method-clear">the <code class="function">clear</code> method</a>.</p>
 

index.htm

@@ -52,7 +52,7 @@
 <div class="section__block text-center">
     <h1 class="heading heading--splash"><img src="demo/images/logo.png" alt="pickadate.js" width="478" height="90"></h1>
     <h2 class="heading heading--thin">The mobile-friendly, responsive, and&nbsp;lightweight<br>jQuery date <span class="ampersand">&amp;</span> time input picker.</h2>
-    <h3 class="heading heading--thin"><a class="button" href="https://github.com/amsul/pickadate.js/archive/3.0.2.zip">Download pickadate.js v3.0.2</a></h3>
+    <h3 class="heading heading--thin"><a class="button" href="https://github.com/amsul/pickadate.js/archive/3.0.3.zip">Download pickadate.js v3.0.3</a></h3>
     <div class="groupset groupset--splash">
         <span class="groupset__item"><iframe src="http://ghbtns.com/github-btn.html?user=amsul&repo=pickadate.js&size=large&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="145" height="30"></iframe></span>
         <span class="groupset__item"><iframe src="http://ghbtns.com/github-btn.html?user=amsul&repo=pickadate.js&size=large&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="135" height="30"></iframe></span>