/* -------------------------------------------------------------------------- */
/* DATE PICKER
/* A wrapper around a third party date picker.
/* -------------------------------------------------------------------------- */
(function($) {
  var DatePicker = function(input) {
    this.$input = input;
    this.$wrapper = $('<span class="islay-form-date-picker"></span>');
    this.$display = $('<span class="display"></span>');
    this.$button = $('<i class="icon-calendar button"></i>');
    this.$wrapper.append(this.$display, this.$button);

    this.$wrapper.click($.proxy(this, 'toggle'));
    this.open = false;

    // Check to see if there is a date/time string. Otherwise, default to today.
    var val = this.$input.val().trim();
    if (_.isEmpty(val)) {
      this.update(new Date());
    }
    else {
      this.update(val);
    }

    this.$input.after(this.$wrapper).hide();
  };

  DatePicker.prototype = {
    toggle: function() {
      if (this.open) {
        this.$picker.hide();
        this.open = false;
      }
      else {
        if (!this.picker) {
          this.picker = new Kalendae(this.$wrapper[0], {selected: this.current});
          this.picker.subscribe('change', $.proxy(this, 'updateFromPicker'));
          this.$picker = $(this.picker.container);
        }
        this.$picker.show();
        this.open = true;
      }
    },

    update: function(date) {
      var val = moment(date);
      this.current = val;
      this.$display.text(val.format('DD/MM/YYYY'));
      this.$input.val(val.format('YYYY-MM-DD'))
    },

    updateFromPicker: function() {
      var date = this.picker.getSelectedRaw()[0];
      this.update(date);
      this.toggle();
    }
  };

  $.fn.islayDatePicker = function() {
    this.each(function() {
      var $this = $(this);
      if (!$this.data('islayDatePicker')) {
        $this.data('islayDatePicker', new DatePicker($this));
      }
    });
    return this;
  };
})(jQuery);

@@ -839,16 +839,71 @@
 %0A    %7D%0A%0A
+    $(document).click($.proxy(this, 'clickOutside'));%0A%0A
     this
@@ -985,32 +985,33 @@
 oggle: function(
+e
 ) %7B%0A      if (th
@@ -1017,16 +1017,59 @@
 his.open
+ && this.$picker.has(e.target).length === 0
 ) %7B%0A    
@@ -1453,32 +1453,234 @@
       %7D%0A    %7D,%0A%0A
+    clickOutside: function(e) %7B%0A      if (this.open && !this.$wrapper.is(e.target) && this.$wrapper.has(e.target).length === 0) %7B%0A        this.$picker.hide();%0A        this.open = false;%0A      %7D%0A    %7D,%0A%0A
     update: func
@@ -1981,16 +1981,47 @@
 his.
-toggle()
+$picker.hide();%0A      this.open = false
 ;%0A  

Make the date pickers a bit less horrible.