diff --git a/better-dateinput-polyfill.css b/better-dateinput-polyfill.css index d6bce3c..1c06ff4 100644 --- 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,14 +36,13 @@ .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 { @@ -47,7 +50,7 @@ } .better-dateinput-calendar-prev:before { - content: "<" + content: "\25C4" } .better-dateinput-calendar-next { @@ -55,17 +58,18 @@ } .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,8 +81,11 @@ .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; } @@ -86,6 +93,7 @@ .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 index 1398c1a..83de8f6 100644 --- 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(" " + (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,7 +110,7 @@ } 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; } @@ -88,7 +118,9 @@ 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(" " + (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 index 768f620..a8de18c 100644 --- 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 index a781978..837d16d 100644 --- 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": {