]> asedeno.scripts.mit.edu Git - bluechips.git/commitdiff
Use jqueryui instead of some non-core date picker module.
authorEvan Broder <broder@mit.edu>
Mon, 1 Feb 2010 15:27:21 +0000 (10:27 -0500)
committerEvan Broder <broder@mit.edu>
Mon, 1 Feb 2010 15:39:01 +0000 (10:39 -0500)
bluechips/public/js/admin.js
bluechips/public/js/jquery.date_input.css [deleted file]
bluechips/public/js/jquery.date_input.js [deleted file]
bluechips/templates/base.mako

index 00b2e3df98cab300cc53a6f6da3e67fd25c7ee89..4a115015402d328b0baccf9f05303ed3099bcb9c 100644 (file)
@@ -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 (file)
index 9c6ca6d..0000000
+++ /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 (file)
index 7323441..0000000
+++ /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 = $('<p class="month_nav">' +
-      '<span class="button prev" title="[Page-Up]">&#171;</span>' +
-      ' <span class="month_name"></span> ' +
-      '<span class="button next" title="[Page-Down]">&#187;</span>' +
-      '</p>');
-    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 = $('<p class="year_nav">' +
-      '<span class="button prev" title="[Ctrl+Page-Up]">&#171;</span>' +
-      ' <span class="year_name"></span> ' +
-      '<span class="button next" title="[Ctrl+Page-Down]">&#187;</span>' +
-      '</p>');
-    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 = $('<div class="nav"></div>').append(monthNav, yearNav);
-    
-    var tableShell = "<table><thead><tr>";
-    $(this.adjustDays(this.short_day_names)).each(function() {
-      tableShell += "<th>" + this + "</th>";
-    });
-    tableShell += "</tr></thead><tbody></tbody></table>";
-    
-    this.dateSelector = this.rootLayers = $('<div class="date_selector"></div>').append(nav, tableShell).insertAfter(this.input);
-    
-    if ($.browser.msie && $.browser.version < 7) {
-      
-      this.ieframe = $('<iframe class="date_selector_ieframe" frameborder="0" src="#"></iframe>').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 += "<tr>";
-        
-        if (currentDay.getMonth() == date.getMonth()) {
-          dayCells += '<td class="selectable_day" date="' + this.dateToString(currentDay) + '">' + currentDay.getDate() + '</td>';
-        } else {
-          dayCells += '<td class="unselected_month" date="' + this.dateToString(currentDay) + '">' + currentDay.getDate() + '</td>';
-        };
-        
-        if (this.isLastDayOfWeek(currentDay)) dayCells += "</tr>";
-      };
-      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); 
index f50824c5308b049589e5549f4c460684f20d9be9..d3ab6f2503bdea4e2950a879d2f555310e9f0ddf 100644 (file)
@@ -5,9 +5,9 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <title>${self.title()}</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')}
   </head>
   <body>