romo 0.19.10 → 0.20.0

data/assets/js/romo/datepicker.js

@@ -1,280 +1,195 @@
-$.fn.romoDatepicker = function() {
-  return $.map(this, function(element) {
-    return new RomoDatepicker(element);
-  });
-}
-
-var RomoDatepicker = function(element) {
-  this.elem = $(element);
+var RomoDatepicker = RomoComponent(function(elem) {
+  this.elem = elem;
 
   this.defaultFormat    = 'yyyy-mm-dd'
   this.defaultPrevClass = undefined;
   this.defaultNextClass = undefined;
   this.itemSelector     = 'TD.romo-datepicker-day:not(.disabled)';
-  this.calTable         = $();
+  this.calTable         = undefined;
   this.date             = undefined;
   this.today            = RomoDate.today();
   this.prevValue        = undefined;
 
   this.doInit();
-  this.doBindElem();
-  this.doSetFormat();
-  this.doSetDate(this.elem.val());
-  this.doBindDropdown();
-  this.doBuildUI();
+  this._bindElem();
 
-  this.elem.trigger('datepicker:ready', [this]);
+  Romo.trigger(this.elem, 'romoDatepicker:ready', [this]);
+});
+
+RomoDatepicker.prototype.formatString = function() {
+  return Romo.data(this.elem, 'romo-datepicker-format') || this.defaultFormat;
 }
 
-RomoDatepicker.prototype.doInit = function() {
-  // override as needed
+RomoDatepicker.prototype.doSetDate = function(value) {
+  this.date = RomoDate.parse(value);
+  if (this.date !== undefined) {
+    this.elem.value = RomoDate.format(this.date, this.formatString());
+  } else {
+    this.elem.value = value;
+  }
 }
 
-RomoDatepicker.prototype.doBindElem = function() {
-  this.elem.attr('autocomplete', 'off');
-  this.elem.attr('data-romo-indicator-text-input-indicator-position', "right");
+RomoDatepicker.prototype.doRefreshUI = function(date) {
+  var rDate = date || this.date || this.today;
+  this._refreshCalendar(rDate);
+  Romo.trigger(this.elem, 'romoDatepicker:refresh', [rDate, this]);
+
+  var itemElems = Romo.find(this.calTable, this.itemSelector);
+  Romo.on(itemElems, 'mouseenter', Romo.proxy(this._onItemEnter, this));
+  Romo.on(itemElems, 'click',      Romo.proxy(this._onItemClick, this));
+
+  Romo.on(this.romoDropdown.popupElem, 'mousedown', Romo.proxy(this._onPopupMouseDown, this));
+  Romo.on(this.romoDropdown.popupElem, 'mouseup',   Romo.proxy(this._onPopupMouseUp, this));
+}
+
+// private
+
+RomoDatepicker.prototype._bindElem = function() {
+  Romo.setAttr(this.elem, 'autocomplete', 'off');
+  Romo.setData(this.elem, 'romo-indicator-text-input-indicator-position', "right");
 
-  if (this.elem.data('romo-datepicker-indicator') !== undefined) {
-    this.elem.attr('data-romo-indicator-text-input-indicator', this.elem.data('romo-datepicker-indicator'));
+  if (Romo.data(this.elem, 'romo-datepicker-indicator') !== undefined) {
+    Romo.setData(this.elem, 'romo-indicator-text-input-indicator', Romo.data(this.elem, 'romo-datepicker-indicator'));
   }
-  if (this.elem.data('romo-datepicker-indicator-width-px') !== undefined) {
-    this.elem.attr('data-romo-indicator-text-input-indicator-width-px', this.elem.data('romo-datepicker-indicator-width-px'));
+  if (Romo.data(this.elem, 'romo-datepicker-indicator-width-px') !== undefined) {
+    Romo.setData(this.elem, 'romo-indicator-text-input-indicator-width-px', Romo.data(this.elem, 'romo-datepicker-indicator-width-px'));
   }
-  if (this.elem.data('romo-datepicker-btn-group') === true) {
-    this.elem.attr('data-romo-indicator-text-input-btn-group', this.elem.data('romo-datepicker-btn-group'));
+  if (Romo.data(this.elem, 'romo-datepicker-btn-group') === true) {
+    Romo.setData(this.elem, 'romo-indicator-text-input-btn-group', Romo.data(this.elem, 'romo-datepicker-btn-group'));
   }
-  if (this.elem.data('romo-datepicker-elem-display') !== undefined) {
-    this.elem.attr('data-romo-indicator-text-input-elem-display', this.elem.data('romo-datepicker-elem-display'));
+  if (Romo.data(this.elem, 'romo-datepicker-elem-display') !== undefined) {
+    Romo.setData(this.elem, 'romo-indicator-text-input-elem-display', Romo.data(this.elem, 'romo-datepicker-elem-display'));
   }
 
-  this.elem.romoIndicatorTextInput();
+  new RomoIndicatorTextInput(this.elem);
 
-  this.prevValue = this.elem.val();
-  this.elem.on('change', $.proxy(function(e) {
-    var newValue = this.elem.val();
-    this.elem.trigger('datepicker:change', [newValue, this.prevValue, this]);
+  this.prevValue = this.elem.value;
+  Romo.on(this.elem, 'change', Romo.proxy(function(e) {
+    var newValue = this.elem.value;
+    Romo.trigger(this.elem, 'romoDatepicker:change', [newValue, this.prevValue, this]);
     this.prevValue = newValue;
   }, this));
 
-  this.elem.on('indicatorTextInput:indicatorClick', $.proxy(function(e) {
+  Romo.on(this.elem, 'romoIndicatorTextInput:indicatorClick', Romo.proxy(function(e) {
     this._clearBlurTimeout();
-    this.elem.trigger('datepicker:triggerPopupOpen');
+    Romo.trigger(this.elem, 'romoDatepicker:triggerPopupOpen');
   }, this));
 
-  this.elem.on('datepicker:triggerEnable', $.proxy(function(e) {
-    this.elem.trigger('indicatorTextInput:triggerEnable', []);
+  Romo.on(this.elem, 'romoDatepicker:triggerEnable', Romo.proxy(function(e) {
+    Romo.trigger(this.elem, 'romoIndicatorTextInput:triggerEnable', []);
   }, this));
-  this.elem.on('datepicker:triggerDisable', $.proxy(function(e) {
-    this.elem.trigger('indicatorTextInput:triggerDisable', []);
+  Romo.on(this.elem, 'romoDatepicker:triggerDisable', Romo.proxy(function(e) {
+    Romo.trigger(this.elem, 'romoIndicatorTextInput:triggerDisable', []);
   }, this));
-  this.elem.on('datepicker:triggerShow', $.proxy(function(e) {
-    this.elem.trigger('indicatorTextInput:triggerShow', []);
+  Romo.on(this.elem, 'romoDatepicker:triggerShow', Romo.proxy(function(e) {
+    Romo.trigger(this.elem, 'romoIndicatorTextInput:triggerShow', []);
   }, this));
-  this.elem.on('datepicker:triggerHide', $.proxy(function(e) {
-    this.elem.trigger('indicatorTextInput:triggerHide', []);
+  Romo.on(this.elem, 'romoDatepicker:triggerHide', Romo.proxy(function(e) {
+    Romo.trigger(this.elem, 'romoIndicatorTextInput:triggerHide', []);
   }, this));
 
-  this.elem.on('datepicker:triggerSetFormat', $.proxy(function(e) {
-    this.doSetFormat();
-  }, this));
-  this.elem.on('datepicker:triggerSetDate', $.proxy(this.onTriggerSetDate, this));
-}
+  Romo.on(this.elem, 'romoDatepicker:triggerSetDate', Romo.proxy(this._onTriggerSetDate, this));
 
-RomoDatepicker.prototype.doSetFormat = function() {
-  this.formatString = this.elem.data('romo-datepicker-format') || this.defaultFormat;
+  this._bindDropdown();
+  this.doSetDate(this.elem.value);
+  this._buildUI();
 }
 
-RomoDatepicker.prototype.doSetDate = function(value) {
-  this.date = RomoDate.parse(value);
-  if (this.date !== undefined) {
-    this.elem.val(RomoDate.format(this.date, this.formatString));
-  } else {
-    this.elem.val(value);
+RomoDatepicker.prototype._bindDropdown = function() {
+  Romo.setData(this.elem, 'romo-dropdown-disable-toggle', 'true');
+  if (Romo.data(this.elem, 'romo-dropdown-width') === undefined) {
+    Romo.setData(this.elem, 'romo-dropdown-width', 'elem');
   }
-}
-
-RomoDatepicker.prototype.doBindDropdown = function() {
-  this.elem.attr('data-romo-dropdown-disable-toggle', 'true');
-  if (this.elem.data('romo-dropdown-width') === undefined) {
-    this.elem.attr('data-romo-dropdown-width', 'elem');
+  if (parseInt(Romo.css(this.elem, 'width'), 10) < 175) {
+    Romo.setData(this.elem, 'romo-dropdown-width', '175px');
   }
-  if (this.elem.width() < 175) {
-    this.elem.attr('data-romo-dropdown-width', '175px');
-  }
-  this.romoDropdown = this.elem.romoDropdown()[0];
+  this.romoDropdown = new RomoDropdown(this.elem);
 
   this.romoDropdown.doSetPopupZIndex(this.elem);
-  this.romoDropdown.bodyElem.addClass('romo-datepicker-calendar');
-  this.romoDropdown.elem.on('dropdown:popupOpen', $.proxy(this.onPopupOpen, this));
-  this.romoDropdown.elem.on('dropdown:popupClose', $.proxy(this.onPopupClose, this));
-  this.romoDropdown.elem.on('blur', $.proxy(function(e) {
-    this.blurTimeoutId = setTimeout($.proxy(function() {
+  Romo.addClass(this.romoDropdown.bodyElem, 'romo-datepicker-calendar');
+  Romo.on(this.romoDropdown.elem, 'romoDropdown:popupOpen', Romo.proxy(this._onPopupOpen, this));
+  Romo.on(this.romoDropdown.elem, 'romoDropdown:popupClose', Romo.proxy(this._onPopupClose, this));
+  Romo.on(this.romoDropdown.elem, 'blur', Romo.proxy(function(e) {
+    this.blurTimeoutId = setTimeout(Romo.proxy(function() {
       if (this.popupMouseDown !== true) {
-        this.romoDropdown.elem.trigger('dropdown:triggerPopupClose', []);
+        Romo.trigger(this.romoDropdown.elem, 'romoDropdown:triggerPopupClose', []);
       }
     }, this), 10);
   }, this));
-  this.romoDropdown.elem.on('keydown', $.proxy(this.onElemKeyDown, this));
+  Romo.on(this.romoDropdown.elem, 'keydown', Romo.proxy(this._onElemKeyDown, this));
 
-  this.romoDropdown.elem.on('dropdown:toggle', $.proxy(function(e, dropdown) {
-    this.elem.trigger('datepicker:dropdown:toggle', [dropdown, this]);
+  Romo.on(this.romoDropdown.elem, 'romoDropdown:toggle', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDatepicker:romoDropdown:toggle', [romoDropdown, this]);
   }, this));
-  this.romoDropdown.elem.on('dropdown:popupOpen', $.proxy(function(e, dropdown) {
-    this.elem.trigger('datepicker:dropdown:popupOpen', [dropdown, this]);
+  Romo.on(this.romoDropdown.elem, 'romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDatepicker:romoDropdown:popupOpen', [romoDropdown, this]);
   }, this));
-  this.romoDropdown.elem.on('dropdown:popupClose', $.proxy(function(e, dropdown) {
-    this.elem.trigger('datepicker:dropdown:popupClose', [dropdown, this]);
+  Romo.on(this.romoDropdown.elem, 'romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown) {
+    Romo.trigger(this.elem, 'romoDatepicker:romoDropdown:popupClose', [romoDropdown, this]);
   }, this));
 
-  this.elem.on('datepicker:triggerToggle', $.proxy(function(e) {
-    this.romoDropdown.elem.trigger('dropdown:triggerToggle', []);
+  Romo.on(this.elem, 'romoDatepicker:triggerToggle', Romo.proxy(function(e) {
+    Romo.trigger(this.romoDropdown.elem, 'romoDropdown:triggerToggle', []);
   }, this));
-  this.elem.on('datepicker:triggerPopupOpen', $.proxy(function(e) {
-    this.romoDropdown.elem.trigger('dropdown:triggerPopupOpen', []);
+  Romo.on(this.elem, 'romoDatepicker:triggerPopupOpen', Romo.proxy(function(e) {
+    Romo.trigger(this.romoDropdown.elem, 'romoDropdown:triggerPopupOpen', []);
   }, this));
-  this.elem.on('datepicker:triggerPopupClose', $.proxy(function(e) {
-    this.romoDropdown.elem.trigger('dropdown:triggerPopupClose', []);
+  Romo.on(this.elem, 'romoDatepicker:triggerPopupClose', Romo.proxy(function(e) {
+    Romo.trigger(this.romoDropdown.elem, 'romoDropdown:triggerPopupClose', []);
   }, this));
 }
 
-RomoDatepicker.prototype.doBuildUI = function() {
+RomoDatepicker.prototype._buildUI = function() {
   this.calTable = this._buildCalendar();
-  this.romoDropdown.bodyElem.html('');
-  this.romoDropdown.bodyElem.append(this.calTable);
-
-  this.calTable.find('.romo-datepicker-prev').on('click', $.proxy(this.onPrevClick, this));
-  this.calTable.find('.romo-datepicker-next').on('click', $.proxy(this.onNextClick, this));
-}
-
-RomoDatepicker.prototype.doRefreshUI = function(date) {
-  var rDate = date || this.date || this.today;
-  this._refreshCalendar(rDate);
-  this.elem.trigger('datepicker:refresh', [rDate, this]);
-
-  this.calTable.find(this.itemSelector).on('mouseenter', $.proxy(this.onItemEnter, this));
-  this.calTable.find(this.itemSelector).on('click', $.proxy(this.onItemClick, this));
+  Romo.updateHtml(this.romoDropdown.bodyElem, '');
+  Romo.append(this.romoDropdown.bodyElem, this.calTable);
 
-  this.romoDropdown.popupElem.on('mousedown', $.proxy(this.onPopupMouseDown, this));
-  this.romoDropdown.popupElem.on('mouseup',   $.proxy(this.onPopupMouseUp, this));
+  var prevElem = Romo.find(this.calTable, '.romo-datepicker-prev')[0];
+  Romo.on(prevElem, 'click', Romo.proxy(this._onPrevClick, this));
+  var nextElem = Romo.find(this.calTable, '.romo-datepicker-next')[0];
+  Romo.on(nextElem, 'click', Romo.proxy(this._onNextClick, this));
 }
 
-RomoDatepicker.prototype.doRefreshToPrevMonth = function() {
+RomoDatepicker.prototype._refreshToPrevMonth = function() {
   var date  = this.refreshDate || this.date || (new Date);
   var pDate = RomoDate.lastDateOfPrevMonth(date);
   this.doRefreshUI(pDate);
-  this.elem.trigger('datepicker:prevRefresh', [pDate, this]);
+  Romo.trigger(this.elem, 'romoDatepicker:prevRefresh', [pDate, this]);
 }
 
-RomoDatepicker.prototype.doRefreshToNextMonth = function() {
+RomoDatepicker.prototype._refreshToNextMonth = function() {
   var date  = this.refreshDate || this.date || (new Date);
   var nDate = RomoDate.firstDateOfNextMonth(date);
   this.doRefreshUI(nDate);
-  this.elem.trigger('datepicker:nextRefresh', [nDate, this]);
+  Romo.trigger(this.elem, 'romoDatepicker:nextRefresh', [nDate, this]);
 }
 
-RomoDatepicker.prototype.doSelectHighlightedItem = function() {
-  var newValue  = this.calTable.find('TD.romo-datepicker-highlight').data('romo-datepicker-value');
+RomoDatepicker.prototype._selectHighlightedItem = function() {
+  var highlightElem = Romo.find(this.calTable, 'TD.romo-datepicker-highlight')[0];
+  var newValue      = Romo.data(highlightElem, 'romo-datepicker-value');
 
   this.romoDropdown.doPopupClose();
   this.doSetDate(newValue);
   this.elem.focus();
-  this.elem.trigger('datepicker:itemSelected', [newValue, this]);
+  Romo.trigger(this.elem, 'romoDatepicker:itemSelected', [newValue, this]);
   if (newValue !== this.prevValue) {
-    this.elem.trigger('datepicker:newItemSelected', [newValue, this]);
+    Romo.trigger(this.elem, 'romoDatepicker:newItemSelected', [newValue, this]);
   }
   // always publish the item selected events before publishing any change events
   this._triggerSetDateChangeEvent();
 }
 
-RomoDatepicker.prototype.onTriggerSetDate = function(e, value) {
-  this.doSetDate(value);
-  this._triggerSetDateChangeEvent();
-}
-
-RomoDatepicker.prototype.onElemKeyDown = function(e) {
-  if (this.elem.hasClass('disabled') === false) {
-    if (this.romoDropdown.popupOpen()) {
-      return true;
-    } else {
-      if(e.keyCode === 40 /* Down */ ) {
-        this.romoDropdown.doPopupOpen();
-        this.romoDropdown.popupElem.focus();
-        return false;
-      } else {
-        return true;
-      }
-    }
-  }
-  return true;
-}
-
-RomoDatepicker.prototype.onPopupOpen = function(e) {
-  if (this.elem.hasClass('disabled') === false) {
-    this.doSetDate(this.elem.val());
-    this.doRefreshUI();
-  }
-}
-
-RomoDatepicker.prototype.onPopupClose = function(e) {
-  this._highlightItem($());
-}
-
-RomoDatepicker.prototype.onItemEnter = function(e) {
-  if (e !== undefined) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  this._highlightItem($(e.target));
-}
-
-RomoDatepicker.prototype.onItemClick = function(e) {
-  this._clearBlurTimeout();
-  if (e !== undefined) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  this.doSelectHighlightedItem();
-}
-
-RomoDatepicker.prototype.onPrevClick = function(e) {
-  this._clearBlurTimeout();
-  if (e !== undefined) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  this.doRefreshToPrevMonth();
-}
-
-RomoDatepicker.prototype.onNextClick = function(e) {
-  this._clearBlurTimeout();
-  if (e !== undefined) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  this.doRefreshToNextMonth();
-}
-
-RomoDatepicker.prototype.onPopupMouseDown = function(e) {
-  this.popupMouseDown = true;
-}
-
-RomoDatepicker.prototype.onPopupMouseUp = function(e) {
-  this.popupMouseDown = false;
-}
-
-// private
-
 RomoDatepicker.prototype._show = function(elem) {
-  elem.css('display', '');
+  Romo.show(elem);
 }
 
 RomoDatepicker.prototype._hide = function(elem) {
-  elem.css('display', 'none');
+  Romo.hide(elem);
 }
 
 RomoDatepicker.prototype._triggerSetDateChangeEvent = function() {
-  if (this.elem.val() !== this.prevValue) {
-    this.elem.trigger('change');
+  if (this.elem.value !== this.prevValue) {
+    Romo.trigger(this.elem, 'change');
   }
 }
 
@@ -286,59 +201,66 @@ RomoDatepicker.prototype._clearBlurTimeout = function() {
 }
 
 RomoDatepicker.prototype._refreshCalendar = function(date) {
-  this.calTable.find('.romo-datepicker-title').html(this._buildCalendarTitle(date));
-  this.calTable.find('tbody').empty().append(this._buildCalendarBody(date));
+  var titleElem = Romo.find(this.calTable, '.romo-datepicker-title')[0];
+  Romo.updateText(titleElem, this._buildCalendarTitle(date));
+
+  var tableBodyElem = Romo.find(this.calTable, 'tbody')[0];
+  Romo.updateHtml(tableBodyElem, '');
+  var rowElems = this._buildCalendarBodyRows(date);
+  Romo.append(tableBodyElem, rowElems);
+
   this.refreshDate = date;
 }
 
 RomoDatepicker.prototype._buildCalendar = function() {
-  var table = $('<table></table>');
-  table.append(this._buildCalendarHeader());
-  table.append($('<tbody></tbody>'));
-  return table;
+  var tableElem = Romo.elems('<table></table>')[0];
+  Romo.append(tableElem, this._buildCalendarHeader());
+  Romo.appendHtml(tableElem, '<tbody></tbody>');
+  return tableElem;
 }
 
 RomoDatepicker.prototype._buildCalendarHeader = function() {
-  var prevClass = this.elem.data('romo-datepicker-prev') || this.defaultPrevClass;
-  var nextClass = this.elem.data('romo-datepicker-next') || this.defaultNextClass;
-  var header = $('<thead></thead');
-
-  var row = $('<tr></tr>');
-  var th = $('<th class="romo-datepicker-prev" title="Previous Month"></th>');
+  var prevClass    = Romo.data(this.elem, 'romo-datepicker-prev') || this.defaultPrevClass;
+  var nextClass    = Romo.data(this.elem, 'romo-datepicker-next') || this.defaultNextClass;
+  var headerElem   = Romo.elems('<thead></thead')[0];
+  var titleRowElem = Romo.elems('<tr></tr>')[0];
+  var thPrevElem   = Romo.elems('<th class="romo-datepicker-prev" title="Previous Month"></th>')[0];
   if (prevClass) {
-    th.append('<i class="'+prevClass+'"></i>');
+    Romo.updateHtml(thPrevElem, '<i class="'+prevClass+'"></i>');
   } else {
-    th.text('<<');
+    Romo.updateText(thPrevElem, '<<');
   }
-  row.append(th);
-  row.append($('<th class="romo-datepicker-title" colspan="5"></th>'));
-  var th = $('<th class="romo-datepicker-next" title="Next Month"></th>');
+  Romo.append(titleRowElem, thPrevElem);
+
+  Romo.appendHtml(titleRowElem, '<th class="romo-datepicker-title" colspan="5"></th>');
+
+  var thNextElem = Romo.elems('<th class="romo-datepicker-next" title="Next Month"></th>')[0];
   if (nextClass) {
-    th.append('<i class="'+nextClass+'"></i>');
+    Romo.updateHtml(thNextElem, '<i class="'+nextClass+'"></i>');
   } else {
-    th.text('>>');
+    Romo.updateText(thNextElem, '>>');
   }
-  row.append(th);
-  header.append(row);
-
-  row = $('<tr></tr>');
-  row.append($('<th class="romo-datepicker-day">S</th>'));
-  row.append($('<th class="romo-datepicker-day">M</th>'));
-  row.append($('<th class="romo-datepicker-day">T</th>'));
-  row.append($('<th class="romo-datepicker-day">W</th>'));
-  row.append($('<th class="romo-datepicker-day">T</th>'));
-  row.append($('<th class="romo-datepicker-day">F</th>'));
-  row.append($('<th class="romo-datepicker-day">S</th>'));
-  header.append(row);
-
-  return header;
+  Romo.append(titleRowElem, thNextElem);
+  Romo.append(headerElem, titleRowElem);
+
+  var daysRowElem = Romo.elems('<tr></tr>')[0];
+  Romo.appendHtml(daysRowElem, '<th class="romo-datepicker-day">S</th>');
+  Romo.appendHtml(daysRowElem, '<th class="romo-datepicker-day">M</th>');
+  Romo.appendHtml(daysRowElem, '<th class="romo-datepicker-day">T</th>');
+  Romo.appendHtml(daysRowElem, '<th class="romo-datepicker-day">W</th>');
+  Romo.appendHtml(daysRowElem, '<th class="romo-datepicker-day">T</th>');
+  Romo.appendHtml(daysRowElem, '<th class="romo-datepicker-day">F</th>');
+  Romo.appendHtml(daysRowElem, '<th class="romo-datepicker-day">S</th>');
+  Romo.append(headerElem, daysRowElem);
+
+  return headerElem;
 }
 
 RomoDatepicker.prototype._buildCalendarTitle = function(date) {
   return RomoDate.format(date, 'MM yyyy');
 }
 
-RomoDatepicker.prototype._buildCalendarBody = function(date) {
+RomoDatepicker.prototype._buildCalendarBodyRows = function(date) {
   var html = [];
 
   // prefer showing as many past dates in each month as possible
@@ -378,7 +300,7 @@ RomoDatepicker.prototype._buildCalendarBody = function(date) {
 
     html.push('<td');
     html.push(' class="'+cls.join(' ')+'"');
-    var dt = RomoDate.format(iDate, this.formatString);
+    var dt = RomoDate.format(iDate, this.formatString());
     html.push(' title="'+dt+'"');
     html.push(' data-romo-datepicker-value="'+dt+'"');
     html.push('>');
@@ -392,14 +314,85 @@ RomoDatepicker.prototype._buildCalendarBody = function(date) {
     iDate = RomoDate.next(iDate);
   }
 
-  return $(html.join(''));
+  return Romo.elems(html.join(''));
 }
 
-RomoDatepicker.prototype._highlightItem = function(item) {
-  this.calTable.find('TD.romo-datepicker-highlight').removeClass('romo-datepicker-highlight');
-  item.addClass('romo-datepicker-highlight');
+RomoDatepicker.prototype._highlightItem = function(itemElem) {
+  var highlightElem = Romo.find(this.calTable, 'TD.romo-datepicker-highlight')[0];
+  if(highlightElem !== undefined) {
+    Romo.removeClass(highlightElem, 'romo-datepicker-highlight');
+  }
+  if(itemElem !== undefined) {
+    Romo.addClass(itemElem, 'romo-datepicker-highlight');
+  }
 }
 
-Romo.onInitUI(function(e) {
-  Romo.initUIElems(e, '[data-romo-datepicker-auto="true"]').romoDatepicker();
-});
+// event functions
+
+RomoDatepicker.prototype.romoEvFn._onTriggerSetDate = function(e, value) {
+  this.doSetDate(value);
+  this._triggerSetDateChangeEvent();
+}
+
+RomoDatepicker.prototype.romoEvFn._onElemKeyDown = function(e) {
+  if (Romo.hasClass(this.elem, 'disabled') === false) {
+    if (this.romoDropdown.popupOpen()) {
+      return true;
+    } else {
+      if(e.keyCode === 40 /* Down */ ) {
+        this.romoDropdown.doPopupOpen();
+        this.romoDropdown.popupElem.focus();
+        return false;
+      } else {
+        return true;
+      }
+    }
+  }
+  return true;
+}
+
+RomoDatepicker.prototype.romoEvFn._onPopupOpen = function(e) {
+  if (Romo.hasClass(this.elem, 'disabled') === false) {
+    this.doSetDate(this.elem.value);
+    this.doRefreshUI();
+  }
+}
+
+RomoDatepicker.prototype.romoEvFn._onPopupClose = function(e) {
+  this._highlightItem(undefined);
+}
+
+RomoDatepicker.prototype.romoEvFn._onItemEnter = function(e) {
+  this._highlightItem(e.target);
+  return false
+}
+
+RomoDatepicker.prototype.romoEvFn._onItemClick = function(e) {
+  this._clearBlurTimeout();
+  this._selectHighlightedItem();
+  return false;
+}
+
+RomoDatepicker.prototype.romoEvFn._onPrevClick = function(e) {
+  this._clearBlurTimeout();
+  this._refreshToPrevMonth();
+  return false;
+}
+
+RomoDatepicker.prototype.romoEvFn._onNextClick = function(e) {
+  this._clearBlurTimeout();
+  this._refreshToNextMonth();
+  return false;
+}
+
+RomoDatepicker.prototype.romoEvFn._onPopupMouseDown = function(e) {
+  this.popupMouseDown = true;
+}
+
+RomoDatepicker.prototype.romoEvFn._onPopupMouseUp = function(e) {
+  this.popupMouseDown = false;
+}
+
+// init
+
+Romo.addElemsInitSelector('[data-romo-datepicker-auto="true"]', RomoDatepicker);