From 36292ae8bbbc50f5f2cc54651047deaac26bcf92 Mon Sep 17 00:00:00 2001 From: Evan Broder Date: Mon, 1 Feb 2010 10:27:21 -0500 Subject: [PATCH] Use jqueryui instead of some non-core date picker module. --- bluechips/public/js/admin.js | 26 +- bluechips/public/js/jquery.date_input.css | 111 ------- bluechips/public/js/jquery.date_input.js | 344 ---------------------- bluechips/templates/base.mako | 4 +- 4 files changed, 8 insertions(+), 477 deletions(-) delete mode 100644 bluechips/public/js/jquery.date_input.css delete mode 100644 bluechips/public/js/jquery.date_input.js diff --git a/bluechips/public/js/admin.js b/bluechips/public/js/admin.js index 00b2e3d..4a11501 100644 --- a/bluechips/public/js/admin.js +++ b/bluechips/public/js/admin.js @@ -7,27 +7,13 @@ try { $(function() { console.log("ready()"); - /* Update date_input plugin so that MM/DD/YYYY format is used. */ - $.extend(DateInput.DEFAULT_OPTS, { - stringToDate: function(string) { - var matches; - if(matches = string.match(/^(\d{2,2})\/(\d{2,2})\/(\d{4,4})$/)) { - return new Date(matches[3], matches[1] - 1, matches[2]); - } else { - return null; - } - }, - dateToString: function(date) { - var month = (date.getMonth() + 1).toString(); - var dom = date.getDate().toString(); - if(month.length == 1) month = "0" + month; - if(dom.length == 1) dom = "0" + dom; - return month + "/" + dom + "/" + date.getFullYear(); - } - }); - /* Attach datepickers to fields! */ - $('input.datepicker').date_input(); + $('input.datepicker').datepicker({ + changeMonth: true, + changeYear: true, + duration: '', + showButtonPanel: true, + }); console.log("ready() done"); }); diff --git a/bluechips/public/js/jquery.date_input.css b/bluechips/public/js/jquery.date_input.css deleted file mode 100644 index 9c6ca6d..0000000 --- a/bluechips/public/js/jquery.date_input.css +++ /dev/null @@ -1,111 +0,0 @@ -/* Some resets for compatibility with existing CSS */ -.date_selector, .date_selector * { - width: auto; - height: auto; - border: none; - background: none; - margin: 0; - padding: 0; - text-align: left; - text-decoration: none; -} -.date_selector { - background: #F2F2F2; - border: 1px solid #bbb; - padding: 5px; - margin: -1px 0 0 0; - position: absolute; - z-index: 100000; - display: none; -} -.date_selector_ieframe { - position: absolute; - z-index: 99999; - display: none; -} - .date_selector .nav { - width: 17.5em; /* 7 * 2.5em */ - } - .date_selector .month_nav, .date_selector .year_nav { - margin: 0 0 3px 0; - padding: 0; - display: block; - position: relative; - text-align: center; - } - .date_selector .month_nav { - float: left; - width: 55%; - } - .date_selector .year_nav { - float: right; - width: 35%; - margin-right: -8px; /* Compensates for cell borders */ - } - .date_selector .month_name, .date_selector .year_name { - font-weight: bold; - line-height: 20px; - } - .date_selector .button { - display: block; - position: absolute; - top: 0; - width: 18px; - height: 18px; - line-height: 17px; - font-weight: bold; - color: #003C78; - text-align: center; - font-size: 120%; - overflow: hidden; - border: 1px solid #F2F2F2; - } - .date_selector .button:hover, .date_selector .button.hover { - background: none; - color: #003C78; - cursor: pointer; - border-color: #ccc; - } - .date_selector .prev { - left: 0; - } - .date_selector .next { - right: 0; - } - .date_selector table { - border-spacing: 0; - border-collapse: collapse; - clear: both; - } - .date_selector th, .date_selector td { - width: 2.5em; - height: 2em; - padding: 0; - text-align: center; - color: black; - } - .date_selector td { - border: 1px solid #ccc; - line-height: 2em; - text-align: center; - white-space: nowrap; - color: #003C78; - background: white; - } - .date_selector td.today { - background: #FFFEB3; - } - .date_selector td.unselected_month { - color: #ccc; - } - .date_selector td.selectable_day { - cursor: pointer; - } - .date_selector td.selected { - background: #D8DFE5; - font-weight: bold; - } - .date_selector td.selectable_day:hover, .date_selector td.selectable_day.hover { - background: #003C78; - color: white; - } diff --git a/bluechips/public/js/jquery.date_input.js b/bluechips/public/js/jquery.date_input.js deleted file mode 100644 index 7323441..0000000 --- a/bluechips/public/js/jquery.date_input.js +++ /dev/null @@ -1,344 +0,0 @@ -/* -Date Input 1.2.1 -Requires jQuery version: >= 1.2.6 - -Copyright (c) 2007-2008 Jonathan Leighton & Torchbox Ltd - -Permission is hereby granted, free of charge, to any person -obtaining a copy of this software and associated documentation -files (the "Software"), to deal in the Software without -restriction, including without limitation the rights to use, -copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the -Software is furnished to do so, subject to the following -conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -OTHER DEALINGS IN THE SOFTWARE. -*/ - -DateInput = (function($) { - -function DateInput(el, opts) { - if (typeof(opts) != "object") opts = {}; - $.extend(this, DateInput.DEFAULT_OPTS, opts); - - this.input = $(el); - this.bindMethodsToObj("show", "hide", "hideIfClickOutside", "keydownHandler", "selectDate"); - - this.build(); - this.selectDate(); - this.hide(); -}; -DateInput.DEFAULT_OPTS = { - month_names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], - short_month_names: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], - short_day_names: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], - start_of_week: 1 -}; -DateInput.prototype = { - build: function() { - var monthNav = $('

' + - '«' + - ' ' + - '»' + - '

'); - this.monthNameSpan = $(".month_name", monthNav); - $(".prev", monthNav).click(this.bindToObj(function() { this.moveMonthBy(-1); })); - $(".next", monthNav).click(this.bindToObj(function() { this.moveMonthBy(1); })); - - var yearNav = $('

' + - '«' + - ' ' + - '»' + - '

'); - this.yearNameSpan = $(".year_name", yearNav); - $(".prev", yearNav).click(this.bindToObj(function() { this.moveMonthBy(-12); })); - $(".next", yearNav).click(this.bindToObj(function() { this.moveMonthBy(12); })); - - var nav = $('
').append(monthNav, yearNav); - - var tableShell = ""; - $(this.adjustDays(this.short_day_names)).each(function() { - tableShell += ""; - }); - tableShell += "
" + this + "
"; - - this.dateSelector = this.rootLayers = $('
').append(nav, tableShell).insertAfter(this.input); - - if ($.browser.msie && $.browser.version < 7) { - - this.ieframe = $('').insertBefore(this.dateSelector); - this.rootLayers = this.rootLayers.add(this.ieframe); - - $(".button", nav).mouseover(function() { $(this).addClass("hover") }); - $(".button", nav).mouseout(function() { $(this).removeClass("hover") }); - }; - - this.tbody = $("tbody", this.dateSelector); - - this.input.change(this.bindToObj(function() { this.selectDate(); })); - this.selectDate(); - }, - - selectMonth: function(date) { - var newMonth = new Date(date.getFullYear(), date.getMonth(), 1); - - if (!this.currentMonth || !(this.currentMonth.getFullYear() == newMonth.getFullYear() && - this.currentMonth.getMonth() == newMonth.getMonth())) { - - this.currentMonth = newMonth; - - var rangeStart = this.rangeStart(date), rangeEnd = this.rangeEnd(date); - var numDays = this.daysBetween(rangeStart, rangeEnd); - var dayCells = ""; - - for (var i = 0; i <= numDays; i++) { - var currentDay = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), rangeStart.getDate() + i, 12, 00); - - if (this.isFirstDayOfWeek(currentDay)) dayCells += ""; - - if (currentDay.getMonth() == date.getMonth()) { - dayCells += '' + currentDay.getDate() + ''; - } else { - dayCells += '' + currentDay.getDate() + ''; - }; - - if (this.isLastDayOfWeek(currentDay)) dayCells += ""; - }; - this.tbody.empty().append(dayCells); - - this.monthNameSpan.empty().append(this.monthName(date)); - this.yearNameSpan.empty().append(this.currentMonth.getFullYear()); - - $(".selectable_day", this.tbody).click(this.bindToObj(function(event) { - this.changeInput($(event.target).attr("date")); - })); - - $("td[date=" + this.dateToString(new Date()) + "]", this.tbody).addClass("today"); - - $("td.selectable_day", this.tbody).mouseover(function() { $(this).addClass("hover") }); - $("td.selectable_day", this.tbody).mouseout(function() { $(this).removeClass("hover") }); - }; - - $('.selected', this.tbody).removeClass("selected"); - $('td[date=' + this.selectedDateString + ']', this.tbody).addClass("selected"); - }, - - selectDate: function(date) { - if (typeof(date) == "undefined") { - date = this.stringToDate(this.input.val()); - }; - if (!date) date = new Date(); - - this.selectedDate = date; - this.selectedDateString = this.dateToString(this.selectedDate); - this.selectMonth(this.selectedDate); - }, - - changeInput: function(dateString) { - this.input.val(dateString).change(); - this.hide(); - }, - - show: function() { - this.rootLayers.css("display", "block"); - $([window, document.body]).click(this.hideIfClickOutside); - this.input.unbind("focus", this.show); - $(document.body).keydown(this.keydownHandler); - this.setPosition(); - }, - - hide: function() { - this.rootLayers.css("display", "none"); - $([window, document.body]).unbind("click", this.hideIfClickOutside); - this.input.focus(this.show); - $(document.body).unbind("keydown", this.keydownHandler); - }, - - hideIfClickOutside: function(event) { - if (event.target != this.input[0] && !this.insideSelector(event)) { - this.hide(); - }; - }, - - insideSelector: function(event) { - var offset = this.dateSelector.position(); - offset.right = offset.left + this.dateSelector.outerWidth(); - offset.bottom = offset.top + this.dateSelector.outerHeight(); - - return event.pageY < offset.bottom && - event.pageY > offset.top && - event.pageX < offset.right && - event.pageX > offset.left; - }, - - keydownHandler: function(event) { - switch (event.keyCode) - { - case 9: - case 27: - this.hide(); - return; - break; - case 13: - this.changeInput(this.selectedDateString); - break; - case 33: - this.moveDateMonthBy(event.ctrlKey ? -12 : -1); - break; - case 34: - this.moveDateMonthBy(event.ctrlKey ? 12 : 1); - break; - case 38: - this.moveDateBy(-7); - break; - case 40: - this.moveDateBy(7); - break; - case 37: - this.moveDateBy(-1); - break; - case 39: - this.moveDateBy(1); - break; - default: - return; - } - event.preventDefault(); - }, - - stringToDate: function(string) { - var matches; - if (matches = string.match(/^(\d{1,2}) ([^\s]+) (\d{4,4})$/)) { - return new Date(matches[3], this.shortMonthNum(matches[2]), matches[1], 12, 00); - } else { - return null; - }; - }, - - dateToString: function(date) { - return date.getDate() + " " + this.short_month_names[date.getMonth()] + " " + date.getFullYear(); - }, - - setPosition: function() { - var offset = this.input.offset(); - this.rootLayers.css({ - top: offset.top + this.input.outerHeight(), - left: offset.left - }); - - if (this.ieframe) { - this.ieframe.css({ - width: this.dateSelector.outerWidth(), - height: this.dateSelector.outerHeight() - }); - }; - }, - - moveDateBy: function(amount) { - var newDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate() + amount); - this.selectDate(newDate); - }, - - moveDateMonthBy: function(amount) { - var newDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth() + amount, this.selectedDate.getDate()); - if (newDate.getMonth() == this.selectedDate.getMonth() + amount + 1) { - - newDate.setDate(0); - }; - this.selectDate(newDate); - }, - - moveMonthBy: function(amount) { - var newMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + amount, this.currentMonth.getDate()); - this.selectMonth(newMonth); - }, - - monthName: function(date) { - return this.month_names[date.getMonth()]; - }, - - bindToObj: function(fn) { - var self = this; - return function() { return fn.apply(self, arguments) }; - }, - - bindMethodsToObj: function() { - for (var i = 0; i < arguments.length; i++) { - this[arguments[i]] = this.bindToObj(this[arguments[i]]); - }; - }, - - indexFor: function(array, value) { - for (var i = 0; i < array.length; i++) { - if (value == array[i]) return i; - }; - }, - - monthNum: function(month_name) { - return this.indexFor(this.month_names, month_name); - }, - - shortMonthNum: function(month_name) { - return this.indexFor(this.short_month_names, month_name); - }, - - shortDayNum: function(day_name) { - return this.indexFor(this.short_day_names, day_name); - }, - - daysBetween: function(start, end) { - start = Date.UTC(start.getFullYear(), start.getMonth(), start.getDate()); - end = Date.UTC(end.getFullYear(), end.getMonth(), end.getDate()); - return (end - start) / 86400000; - }, - - changeDayTo: function(dayOfWeek, date, direction) { - var difference = direction * (Math.abs(date.getDay() - dayOfWeek - (direction * 7)) % 7); - return new Date(date.getFullYear(), date.getMonth(), date.getDate() + difference); - }, - - rangeStart: function(date) { - return this.changeDayTo(this.start_of_week, new Date(date.getFullYear(), date.getMonth()), -1); - }, - - rangeEnd: function(date) { - return this.changeDayTo((this.start_of_week - 1) % 7, new Date(date.getFullYear(), date.getMonth() + 1, 0), 1); - }, - - isFirstDayOfWeek: function(date) { - return date.getDay() == this.start_of_week; - }, - - isLastDayOfWeek: function(date) { - return date.getDay() == (this.start_of_week - 1) % 7; - }, - - adjustDays: function(days) { - var newDays = []; - for (var i = 0; i < days.length; i++) { - newDays[i] = days[(i + this.start_of_week) % 7]; - }; - return newDays; - } -}; - -$.fn.date_input = function(opts) { - return this.each(function() { new DateInput(this, opts); }); -}; -$.date_input = { initialize: function(opts) { - $("input.date_input").date_input(opts); -} }; - -return DateInput; -})(jQuery); diff --git a/bluechips/templates/base.mako b/bluechips/templates/base.mako index f50824c..d3ab6f2 100644 --- a/bluechips/templates/base.mako +++ b/bluechips/templates/base.mako @@ -5,9 +5,9 @@ ${self.title()} ${h.stylesheet_link('/css/main.css')} - ${h.stylesheet_link('/js/jquery.date_input.css')} + ${h.stylesheet_link('//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css')} ${h.javascript_link('//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js')} - ${h.javascript_link('/js/jquery.date_input.js')} + ${h.javascript_link('//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js')} ${h.javascript_link('/js/admin.js')} -- 2.45.2