version 1.1.0

chemerisuk · Jul 21, 2013 · 892362f · 892362f
1 parent 6bc7677
commit 892362f
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 60 deletions.
diff --git a/better-dateinput-polyfill.css b/better-dateinput-polyfill.css
@@ -1,6 +1,6 @@
 /**
  * @file better-dateinput-polyfill.css
- * @version 1.0.8 2013-07-08T11:17:38
+ * @version 1.1.0 2013-07-21T12:03:38
  * @overview input[type=date] polyfill for better-dom
  * @copyright Maksim Chemerisuk 2013
  * @license MIT
@@ -16,9 +16,13 @@
     -ms-user-select: none;
     user-select: none;
 
-    border: 1px solid #CCC;
+    color: #333;
     background: #FFF;
-    box-shadow: 0 0 1em #CCC;
+    border: 1px solid #CCC;
+    border-radius: 5px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .better-dateinput-calendar-header {
@@ -32,40 +36,40 @@
 .better-dateinput-calendar-next {
     position: absolute;
     top: 0.5em;
-    background: #498CE2;
-    color: white;
+
     text-decoration: none;
     text-align: center;
     line-height: 1.5em;
     width: 1.5em;
 
-    border-radius: 1em;
+    border-radius: 5px;
 }
 
 .better-dateinput-calendar-prev {
     left: 0.5em;
 }
 
 .better-dateinput-calendar-prev:before {
-    content: "<"
+    content: "\25C4"
 }
 
 .better-dateinput-calendar-next {
     right: 0.5em;
 }
 
 .better-dateinput-calendar-next:before {
-    content: ">"
+    content: "\25BA"
 }
 
 .better-dateinput-calendar-days {
     table-layout: fixed;
     border-spacing: 0;
+    border-bottom: 1px solid #DDD;
 }
 
 .better-dateinput-calendar-days td, 
 .better-dateinput-calendar-days th {
-    width: 3em;
+    width: 2.5em;
     height: 2em;
     border: 1px solid #DDD;
     text-indent: 0.5em;
@@ -77,15 +81,19 @@
 .better-dateinput-calendar-days th {
     font-weight: bold;
     background: #DDD;
+    text-shadow: 1px 1px 0 #EEE;
 }
 
+.better-dateinput-calendar-prev:hover,
+.better-dateinput-calendar-next:hover,
 .better-dateinput-calendar-days td:hover {
     background: #EEE;
 }
 
 .better-dateinput-calendar-days .current-calendar-day {
     background: #498CE2 !important;
     color: #FFF;
+    text-shadow: 1px 1px 0 #333;
 }
 
 .better-dateinput-calendar-days .prev-calendar-day,

diff --git a/better-dateinput-polyfill.js b/better-dateinput-polyfill.js
@@ -1,6 +1,6 @@
 /**
  * @file better-dateinput-polyfill.js
- * @version 1.0.8 2013-07-08T11:17:38
+ * @version 1.1.0 2013-07-21T12:03:38
  * @overview input[type=date] polyfill for better-dom
  * @copyright Maksim Chemerisuk 2013
  * @license MIT
@@ -9,40 +9,71 @@
 (function(DOM) {
     "use strict";
 
+    if ("orientation" in window) return; // skip mobile and tablet browsers
+
     DOM.extend("input[type=date]", [
         "div[hidden].%CLS%>p.%CLS%-header+a.%CLS%-prev+a.%CLS%-next+table.%CLS%-days>thead>tr>th[data-i18n=calendar.weekday.$]*7+tbody>tr*6>td*7".replace(/%CLS%/g, "better-dateinput-calendar")
     ], {
         constructor: function(calendar) {
             this
                 // remove legacy dateinput if it exists
-                .set("type", "text")
+                .set({type: "text", autocomplete: "off"})
+                .addClass("better-dateinput")
                 // sync value on click
-                .on("click", this, "_syncInputWithCalendar", [calendar])
+                .on("focus", this, "_syncInputWithCalendar", [calendar])
                 // handle arrow keys, esc etc.
-                .on("keydown(keyCode,ctrlKey)", this, "_handleCalendarKeyDown", [calendar]);
+                .on("keydown(keyCode,shiftKey)", this, "_handleCalendarKeyDown", [calendar]);
 
-            calendar.findAll("a").invoke("on", "click(target)", this, "_handleCalendarNavClick");
+            calendar.findAll("a").on("click(target)", this, "_handleCalendarNavClick", [calendar]);
             calendar.on("click(target) td", this, "_handleCalendarDayClick", [calendar]);
 
             // hide calendar when a user clicks somewhere outside
             DOM.on("click", this, "_handleDocumentClick", [calendar]);
 
             // cache access to some elements
-            this.bind("_refreshCalendar",
+            this.bind("setCalendarDate",
                 calendar.find(".better-dateinput-calendar-header"),
                 calendar.findAll("td")
             );
 
             this.after(calendar);
 
-            // show calendar for autofocused elements
+            // display calendar for autofocused elements
             if (this.isFocused()) this.fire("focus");
         },
         getCalendarDate: function() {
             return this.getData("calendarDate");
         },
-        setCalendarDate: function(value) {
-            this._refreshCalendar(value);
+        setCalendarDate: function(/*INTERNAL*/calendarCaption, /*INTERNAL*/calendarDays, value) {
+            var iterDate = new Date(value.getFullYear(), value.getMonth(), 0);
+            // update caption
+            calendarCaption.set("<span data-i18n='calendar.month." + value.getMonth() + "'> " + (isNaN(value.getFullYear()) ? "" : value.getFullYear()));
+
+            if (!isNaN(iterDate.getTime())) {
+                // move to begin of the start week
+                iterDate.setDate(iterDate.getDate() - iterDate.getDay());
+
+                calendarDays.each(function(day) {
+                    iterDate.setDate(iterDate.getDate() + 1);
+
+                    var mDiff = value.getMonth() - iterDate.getMonth(),
+                        dDiff = value.getDate() - iterDate.getDate();
+
+                    if (value.getFullYear() !== iterDate.getFullYear()) {
+                        mDiff *= -1;
+                    }
+
+                    day.set("className", mDiff ?
+                        (mDiff > 0 ? "prev-calendar-day" : "next-calendar-day") :
+                        (dDiff ? "calendar-day" : "current-calendar-day")
+                    );
+
+                    day.set(iterDate.getDate().toString());
+                });
+
+                // update current date
+                this.setData("calendarDate", value);
+            }
 
             return this;
         },
@@ -60,18 +91,17 @@
             // prevent focusing after click if the input is inside of a label
             return false;
         },
-        _handleCalendarNavClick: function(target) {
+        _handleCalendarNavClick: function(target, calendar) {
             var isNext = target.hasClass("better-dateinput-calendar-next"),
                 calendarDate = this.getCalendarDate(),
                 targetDate = new Date(calendarDate.getFullYear(), calendarDate.getMonth() + (isNext ? 1 : -1), 1);
 
-            this.setCalendarDate(targetDate).fire("focus");
+            this.setCalendarDate(targetDate)._syncCalendarWithInput(calendar, true);
+            this.fire("focus");
 
             return false;
         },
-        _handleCalendarKeyDown: function(keyCode, ctrlKey, calendar) {
-            if (keyCode === 9) return; // skip TAB key
-
+        _handleCalendarKeyDown: function(keyCode, shiftKey, calendar) {
             var currentDate = this.getCalendarDate(),
                 delta = 0;
 
@@ -80,15 +110,17 @@
             } else if (keyCode === 27 || keyCode === 9) {
                 calendar.hide(); // esc or tab key hides calendar
             } else if (keyCode === 8 || keyCode === 46) {
-                this.set(""); // backspace or delete clears the value
+                this.set("")._syncInputWithCalendar(calendar, true); // backspace or delete clears the value
             } else {
                 if (keyCode === 74 || keyCode === 40) { delta = 7; }
                 else if (keyCode === 75 || keyCode === 38) { delta = -7; }
                 else if (keyCode === 76 || keyCode === 39) { delta = 1; }
                 else if (keyCode === 72 || keyCode === 37) { delta = -1; }
 
                 if (delta) {
-                    if (ctrlKey) {
+                    if (shiftKey && (keyCode === 40 || keyCode === 38)) {
+                        currentDate.setFullYear(currentDate.getFullYear() + (delta > 0 ? 1 : -1));
+                    } else if (shiftKey && (keyCode === 37 || keyCode === 39)) {
                         currentDate.setMonth(currentDate.getMonth() + (delta > 0 ? 1 : -1));
                     } else {
                         currentDate.setDate(currentDate.getDate() + delta);
@@ -97,8 +129,10 @@
                     this.setCalendarDate(currentDate)._syncCalendarWithInput(calendar, true);
                 }
             }
-            // do not allow to change the value via manual input
-            return false;
+
+            // prevent default action except if it was a TAB key
+            // so do not allow to change the value via manual input
+            return keyCode === 9;
         },
         _syncInputWithCalendar: function(calendar, skipCalendar) {
             var value = (this.get("value") || "").split("-");
@@ -116,37 +150,6 @@
 
             if (!skipCalendar) calendar.hide();
         },
-        _refreshCalendar: function(calendarCaption, calendarDays, value) {
-            var iterDate = new Date(value.getFullYear(), value.getMonth(), 0);
-            // update caption
-            calendarCaption.set("<span data-i18n='calendar.month." + value.getMonth() + "'> " + (isNaN(value.getFullYear()) ? "" : value.getFullYear()));
-
-            if (!isNaN(iterDate.getTime())) {
-                // move to begin of the start week
-                iterDate.setDate(iterDate.getDate() - iterDate.getDay());
-
-                calendarDays.each(function(day) {
-                    iterDate.setDate(iterDate.getDate() + 1);
-
-                    var mDiff = value.getMonth() - iterDate.getMonth(),
-                        dDiff = value.getDate() - iterDate.getDate();
-
-                    if (value.getFullYear() !== iterDate.getFullYear()) {
-                        mDiff *= -1;
-                    }
-
-                    day.set("className", mDiff ?
-                        (mDiff > 0 ? "prev-calendar-day" : "next-calendar-day") :
-                        (dDiff ? "calendar-day" : "current-calendar-day")
-                    );
-
-                    day.set(iterDate.getDate().toString());
-                });
-
-                // update current date
-                this.setData("calendarDate", value);
-            }
-        },
         _handleDocumentClick: function(calendar) {
             if (!this.isFocused()) calendar.hide();
         }

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "better-dateinput-polyfill",
-    "version": "1.0.8",
+    "version": "1.1.0",
     "main": [
         "better-dateinput-polyfill.js",
         "better-dateinput-polyfill.css",

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "better-dateinput-polyfill",
     "description": "input[type=date] polyfill for better-dom",
-    "version": "1.0.8",
+    "version": "1.1.0",
     "author": "Maksim Chemerisuk",
     "license": "MIT",
     "repository": {