icon and start/end control for Kalendae

kalendae-icon-start-end.js

var DatePicker = (function($, Kalendae) {

  var DatePicker = function(id, format) {
    var $dateField = $('#' + id);
    var $icon = $('<i class="cal"></i>');
    $dateField.after($icon);

    // the blurInProgress flag is needed to handle the various scenarios
    // where the user focuses and blurs the dateField via keyboard or mouse
    // and if it was the mouse, did they click on the icon or elsewhere
    var blurInProgress = false;

    var kal = new Kalendae.Input(id, {
      months: 1,
      titleFormat: 'MMMM YYYY',
      dayOutOfMonthClickable: 'true',
      format: format,
      subscribe: {
        'date-clicked': function() {
          this.input.blur();
          this.hide();
        }
      }
    });

    var iconOpenAction = function() {
      if (!blurInProgress) {
        $dateField.focus();
      }
    }

    $dateField.focus(function() {
      $icon.unbind('mouseup', iconOpenAction);
    });

    $dateField.blur(function(e) {
      blurInProgress = true;
      $icon.bind('mouseup', iconOpenAction);
    });

    $icon.mouseup(iconOpenAction);

    $(document).bind('click keyup', function() {
      blurInProgress = false;
    });

    $(document).keydown(function(event) {
      var ESCAPE_KEY = 27
      if (event.keyCode === ESCAPE_KEY) {
         kal.hide();
      }
    });

    return {
      kal: kal
    };

  }
  return DatePicker;

}(jQuery, Kalendae));

var StartEndDatePickers = (function(Kalendae) {

  var StartEndDatePickers = function(startId, endId, format) {
    var startDatePicker = new DatePicker(startId, format);
    var endDatePicker = new DatePicker(endId, format);

    startDatePicker.kal.subscribe('change', function () {
       updateEndDateRange();
    });

    var updateEndDateRange = function() {
      endDatePicker.kal.blackout = function(date) {
        var firstDay = Kalendae.moment(startDatePicker.kal.getSelected());
        return Kalendae.moment(date) < firstDay;
      };
    };
  }

  return StartEndDatePickers;

}(Kalendae));