Ember Pikaday Component + PikadayJS and Pikaday CSS

README.md

Ember Pikaday Component

Usage

{{pikaday-input value=yourDateField}}

Configuration

You can change the default format from "DD.MM.YYYY" to any format string supported by Moment.js

{{pikaday-input value=yourDateField format="MM/DD/YYYY"}}

Use i18n language defaults for month and weekday names

For example we need russian localization:

i18n: {
  previousMonth : 'Пред. Месяц',
  nextMonth     : 'След. Месяц',
  months        : ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
  weekdays      : ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
  weekdaysShort : ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"] 
}

All configuration parameters see in pikaday documentation

Thanks to David Bushell for Pikaday

P.S. pikaday.js and pikaday.css is original files (v 1.3.0) from pikaday repository

pikaday-input.js.coffee

App.PikadayInputComponent = Ember.Component.extend
  tagName: 'input'
  classNameBindings: ['class']

  value: ""
  i18n:
    previousMonth : 'Пред. месяц',
    nextMonth     : 'След. месяц',
    months        : ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
    weekdays      : ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
    weekdaysShort : ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"]

  didInsertElement: ->
    options =
      field: @$()[0]
      firstDay: 1
      format: @get('format') or "DD.MM.YYYY"
      defaultDate: moment(@get('value'), @get('format')).toDate()
      setDefaultDate: true

      onSelect: ->
        Ember.run ->
          @userSelectedDate()

    options.i18n = @get('i18n') if @get('i18n')
    pikaday = new Pikaday(options)
    @set 'pikaday', pikaday
    @get('pikaday').setDate @get('value'), true

  willDestroyElement: ->
    @get('pikaday').destroy()

  userSelectedDate: ->
    @set 'value', @get('pikaday').getDate()

  setDate: (->
    @get('pikaday').setDate @get('value'), true
  ).observes 'value'

App.PikaPikaComponent = Caos.PikadayInputComponent.extend
  pikapika: true

pikaday.css

@charset "UTF-8";

/*!
* Pikaday
* Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
*/

.pika-single {
  z-index: 9999;
  display: block;
  position: relative;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*
clear child float (pika-lendar), using the famous micro clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/
*/
.pika-single:before,
.pika-single:after {
  content: " ";
  display: table;
}
.pika-single:after { clear: both }
.pika-single { *zoom: 1 }

.pika-single.is-hidden {
  display: none;
}

.pika-single.is-bound {
  position: absolute;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
}

.pika-lendar {
  float: left;
  width: 240px;
  margin: 8px;
}

.pika-title {
  position: relative;
  text-align: center;
}

.pika-label {
  display: inline-block;
  *display: inline;
  position: relative;
  z-index: 9999;
  overflow: hidden;
  margin: 0;
  padding: 5px 3px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  background-color: #fff;
}
.pika-title select {
  cursor: pointer;
  position: absolute;
  z-index: 9998;
  margin: 0;
  left: 0;
  top: 5px;
  filter: alpha(opacity=0);
  opacity: 0;
}

.pika-prev,
.pika-next {
  display: block;
  cursor: pointer;
  position: relative;
  outline: none;
  border: 0;
  padding: 0;
  width: 20px;
  height: 30px;
  /* hide text using text-indent trick, using width value (it's enough) */
  text-indent: 20px;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 75% 75%;
  opacity: .5;
  *position: absolute;
  *top: 0;
}

.pika-prev:hover,
.pika-next:hover {
  opacity: 1;
}

.pika-prev,
.is-rtl .pika-next {
  float: left;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
  *left: 0;
}

.pika-next,
.is-rtl .pika-prev {
  float: right;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
  *right: 0;
}

.pika-prev.is-disabled,
.pika-next.is-disabled {
  cursor: default;
  opacity: .2;
}

.pika-select {
  display: inline-block;
  *display: inline;
}

.pika-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

.pika-table th,
.pika-table td {
  width: 14.285714285714286%;
  padding: 0;
}

.pika-table th {
  color: #999;
  font-size: 12px;
  line-height: 25px;
  font-weight: bold;
  text-align: center;
}

.pika-button {
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  border: 0;
  margin: 0;
  width: 100%;
  padding: 5px;
  color: #666;
  font-size: 12px;
  line-height: 15px;
  text-align: right;
  background: #f5f5f5;
}

.pika-week {
  font-size: 11px;
  color: #999;
}

.is-today .pika-button {
  color: #33aaff;
  font-weight: bold;
}

.is-selected .pika-button {
  color: #fff;
  font-weight: bold;
  background: #33aaff;
  box-shadow: inset 0 1px 3px #178fe5;
  border-radius: 3px;
}

.is-disabled .pika-button {
  pointer-events: none;
  cursor: default;
  color: #999;
  opacity: .3;
}

.pika-button:hover {
  color: #fff !important;
  background: #ff8000 !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}

/* styling for abbr */
.pika-table abbr {
  border-bottom: none;
  cursor: help;
}

pikaday.js

/*!
* Pikaday
*
* Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
*/

(function (root, factory)
{
  'use strict';

  var moment;
  if (typeof exports === 'object') {
    // CommonJS module
    // Load moment.js as an optional dependency
    try { moment = require('moment'); } catch (e) {}
    module.exports = factory(moment);
  } else if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(function (req)
  {
    // Load moment.js as an optional dependency
    var id = 'moment';
    try { moment = req(id); } catch (e) {}
    return factory(moment);
  });
} else {
  root.Pikaday = factory(root.moment);
}
}(this, function (moment)
{
  'use strict';

  /**
  * feature detection and helper functions
  */
  var hasMoment = typeof moment === 'function',

  hasEventListeners = !!window.addEventListener,

  document = window.document,

  sto = window.setTimeout,

  addEvent = function(el, e, callback, capture)
{
  if (hasEventListeners) {
    el.addEventListener(e, callback, !!capture);
  } else {
    el.attachEvent('on' + e, callback);
  }
},

removeEvent = function(el, e, callback, capture)
{
  if (hasEventListeners) {
    el.removeEventListener(e, callback, !!capture);
  } else {
    el.detachEvent('on' + e, callback);
  }
},

fireEvent = function(el, eventName, data)
{
  var ev;

  if (document.createEvent) {
    ev = document.createEvent('HTMLEvents');
    ev.initEvent(eventName, true, false);
    ev = extend(ev, data);
    el.dispatchEvent(ev);
  } else if (document.createEventObject) {
    ev = document.createEventObject();
    ev = extend(ev, data);
    el.fireEvent('on' + eventName, ev);
  }
},

trim = function(str)
{
  return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,'');
},

hasClass = function(el, cn)
{
  return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
},

addClass = function(el, cn)
{
  if (!hasClass(el, cn)) {
    el.className = (el.className === '') ? cn : el.className + ' ' + cn;
  }
},

removeClass = function(el, cn)
{
  el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
},

isArray = function(obj)
{
  return (/Array/).test(Object.prototype.toString.call(obj));
},

isDate = function(obj)
{
  return (/Date/).test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
},

isWeekend = function(date)
{
  var day = date.getDay();
  return day === 0 || day === 6;
},

isLeapYear = function(year)
{
  // solution by Matti Virkkunen: http://stackoverflow.com/a/4881951
  return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
},

getDaysInMonth = function(year, month)
{
  return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
},

setToStartOfDay = function(date)
{
  if (isDate(date)) date.setHours(0,0,0,0);
},

compareDates = function(a,b)
{
  // weak date comparison (use setToStartOfDay(date) to ensure correct result)
  return a.getTime() === b.getTime();
},

extend = function(to, from, overwrite)
{
  var prop, hasProp;
  for (prop in from) {
    hasProp = to[prop] !== undefined;
    if (hasProp && typeof from[prop] === 'object' && from[prop] !== null && from[prop].nodeName === undefined) {
      if (isDate(from[prop])) {
        if (overwrite) {
          to[prop] = new Date(from[prop].getTime());
        }
      }
      else if (isArray(from[prop])) {
        if (overwrite) {
          to[prop] = from[prop].slice(0);
        }
      } else {
        to[prop] = extend({}, from[prop], overwrite);
      }
    } else if (overwrite || !hasProp) {
      to[prop] = from[prop];
    }
  }
  return to;
},

adjustCalendar = function(calendar) {
  if (calendar.month < 0) {
    calendar.year -= Math.ceil(Math.abs(calendar.month)/12);
    calendar.month += 12;
  }
  if (calendar.month > 11) {
    calendar.year += Math.floor(Math.abs(calendar.month)/12);
    calendar.month -= 12;
  }
  return calendar;
},

/**
* defaults and localisation
*/
defaults = {

  // bind the picker to a form field
  field: null,

  // automatically show/hide the picker on `field` focus (default `true` if `field` is set)
  bound: undefined,

  // position of the datepicker, relative to the field (default to bottom & left)
  // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
  position: 'bottom left',

  // automatically fit in the viewport even if it means repositioning from the position option
  reposition: true,

  // the default output format for `.toString()` and `field` value
  format: 'YYYY-MM-DD',

  // the initial date to view when first opened
  defaultDate: null,

  // make the `defaultDate` the initial selected value
  setDefaultDate: false,

  // first day of week (0: Sunday, 1: Monday etc)
  firstDay: 0,

  // the minimum/earliest date that can be selected
  minDate: null,
  // the maximum/latest date that can be selected
  maxDate: null,

  // number of years either side, or array of upper/lower range
  yearRange: 10,

  // show week numbers at head of row
  showWeekNumber: false,

  // used internally (don't config outside)
  minYear: 0,
  maxYear: 9999,
  minMonth: undefined,
  maxMonth: undefined,

  isRTL: false,

  // Additional text to append to the year in the calendar title
  yearSuffix: '',

  // Render the month after year in the calendar title
  showMonthAfterYear: false,

  // how many months are visible
  numberOfMonths: 1,

  // when numberOfMonths is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`)
  // only used for the first display or when a selected date is not visible
  mainCalendar: 'left',

  // Specify a DOM element to render the calendar in
  container: undefined,

  // internationalization
  i18n: {
    previousMonth : 'Previous Month',
    nextMonth     : 'Next Month',
    months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
    weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
  },

  // callback function
  onSelect: null,
  onOpen: null,
  onClose: null,
  onDraw: null
},


/**
* templating functions to abstract HTML rendering
*/
renderDayName = function(opts, day, abbr)
{
  day += opts.firstDay;
  while (day >= 7) {
    day -= 7;
  }
  return abbr ? opts.i18n.weekdaysShort[day] : opts.i18n.weekdays[day];
},

renderDay = function(d, m, y, isSelected, isToday, isDisabled, isEmpty)
{
  if (isEmpty) {
    return '<td class="is-empty"></td>';
  }
  var arr = [];
  if (isDisabled) {
    arr.push('is-disabled');
  }
  if (isToday) {
    arr.push('is-today');
  }
  if (isSelected) {
    arr.push('is-selected');
  }
  return '<td data-day="' + d + '" class="' + arr.join(' ') + '">' +
  '<button class="pika-button pika-day" type="button" ' +
  'data-pika-year="' + y + '" data-pika-month="' + m + '" data-pika-day="' + d + '">' +
  d +
  '</button>' +
  '</td>';
},

renderWeek = function (d, m, y) {
  // Lifted from http://javascript.about.com/library/blweekyear.htm, lightly modified.
  var onejan = new Date(y, 0, 1),
  weekNum = Math.ceil((((new Date(y, m, d) - onejan) / 86400000) + onejan.getDay()+1)/7);
  return '<td class="pika-week">' + weekNum + '</td>';
},

renderRow = function(days, isRTL)
{
  return '<tr>' + (isRTL ? days.reverse() : days).join('') + '</tr>';
},

renderBody = function(rows)
{
  return '<tbody>' + rows.join('') + '</tbody>';
},

renderHead = function(opts)
{
  var i, arr = [];
  if (opts.showWeekNumber) {
    arr.push('<th></th>');
  }
  for (i = 0; i < 7; i++) {
    arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
  }
  return '<thead>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</thead>';
},

renderTitle = function(instance, c, year, month, refYear)
{
  var i, j, arr,
  opts = instance._o,
  isMinYear = year === opts.minYear,
  isMaxYear = year === opts.maxYear,
  html = '<div class="pika-title">',
  monthHtml,
  yearHtml,
  prev = true,
  next = true;

  for (arr = [], i = 0; i < 12; i++) {
    arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
    (i === month ? ' selected': '') +
    ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled' : '') + '>' +
    opts.i18n.months[i] + '</option>');
  }
  monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month">' + arr.join('') + '</select></div>';

  if (isArray(opts.yearRange)) {
    i = opts.yearRange[0];
    j = opts.yearRange[1] + 1;
  } else {
    i = year - opts.yearRange;
    j = 1 + year + opts.yearRange;
  }

  for (arr = []; i < j && i <= opts.maxYear; i++) {
    if (i >= opts.minYear) {
      arr.push('<option value="' + i + '"' + (i === year ? ' selected': '') + '>' + (i) + '</option>');
    }
  }
  yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year">' + arr.join('') + '</select></div>';

  if (opts.showMonthAfterYear) {
    html += yearHtml + monthHtml;
  } else {
    html += monthHtml + yearHtml;
  }

  if (isMinYear && (month === 0 || opts.minMonth >= month)) {
    prev = false;
  }

  if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
    next = false;
  }

  if (c === 0) {
    html += '<button class="pika-prev' + (prev ? '' : ' is-disabled') + '" type="button">' + opts.i18n.previousMonth + '</button>';
  }
  if (c === (instance._o.numberOfMonths - 1) ) {
    html += '<button class="pika-next' + (next ? '' : ' is-disabled') + '" type="button">' + opts.i18n.nextMonth + '</button>';
  }

  return html += '</div>';
},

renderTable = function(opts, data)
{
  return '<table cellpadding="0" cellspacing="0" class="pika-table">' + renderHead(opts) + renderBody(data) + '</table>';
},


/**
* Pikaday constructor
*/
Pikaday = function(options)
{
  var self = this,
  opts = self.config(options);

  self._onMouseDown = function(e)
{
  if (!self._v) {
    return;
  }
  e = e || window.event;
  var target = e.target || e.srcElement;
  if (!target) {
    return;
  }

  if (!hasClass(target, 'is-disabled')) {
    if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty')) {
      self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
      if (opts.bound) {
        sto(function() {
          self.hide();
          if (opts.field) {
            opts.field.blur();
          }
        }, 100);
      }
      return;
    }
    else if (hasClass(target, 'pika-prev')) {
      self.prevMonth();
    }
    else if (hasClass(target, 'pika-next')) {
      self.nextMonth();
    }
  }
  if (!hasClass(target, 'pika-select')) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
      return false;
    }
  } else {
    self._c = true;
  }
};

self._onChange = function(e)
{
  e = e || window.event;
  var target = e.target || e.srcElement;
  if (!target) {
    return;
  }
  if (hasClass(target, 'pika-select-month')) {
    self.gotoMonth(target.value);
  }
  else if (hasClass(target, 'pika-select-year')) {
    self.gotoYear(target.value);
  }
};

self._onInputChange = function(e)
{
  var date;

  if (e.firedBy === self) {
    return;
  }
  if (hasMoment) {
    date = moment(opts.field.value, opts.format);
    date = (date && date.isValid()) ? date.toDate() : null;
  }
  else {
    date = new Date(Date.parse(opts.field.value));
  }
  self.setDate(isDate(date) ? date : null);
  if (!self._v) {
    self.show();
  }
};

self._onInputFocus = function()
{
  self.show();
};

self._onInputClick = function()
{
  self.show();
};

self._onInputBlur = function()
{
  // IE allows pika div to gain focus; catch blur the input field
  var pEl = document.activeElement;
  do {
    if (hasClass(pEl, 'pika-single')) {
      return;
    }
  }
  while ((pEl = pEl.parentNode));

  if (!self._c) {
    self._b = sto(function() {
      self.hide();
    }, 50);
  }
  self._c = false;
};

self._onClick = function(e)
{
  e = e || window.event;
  var target = e.target || e.srcElement,
  pEl = target;
  if (!target) {
    return;
  }
  if (!hasEventListeners && hasClass(target, 'pika-select')) {
    if (!target.onchange) {
      target.setAttribute('onchange', 'return;');
      addEvent(target, 'change', self._onChange);
    }
  }
  do {
    if (hasClass(pEl, 'pika-single') || pEl === opts.trigger) {
      return;
    }
  }
  while ((pEl = pEl.parentNode));
  if (self._v && target !== opts.trigger && pEl !== opts.trigger) {
    self.hide();
  }
};

self.el = document.createElement('div');
self.el.className = 'pika-single' + (opts.isRTL ? ' is-rtl' : '');

addEvent(self.el, 'mousedown', self._onMouseDown, true);
addEvent(self.el, 'change', self._onChange);

if (opts.field) {
  if (opts.container) {
    opts.container.appendChild(self.el);
  } else if (opts.bound) {
    document.body.appendChild(self.el);
  } else {
    opts.field.parentNode.insertBefore(self.el, opts.field.nextSibling);
  }
  addEvent(opts.field, 'change', self._onInputChange);

  if (!opts.defaultDate) {
    if (hasMoment && opts.field.value) {
      opts.defaultDate = moment(opts.field.value, opts.format).toDate();
    } else {
      opts.defaultDate = new Date(Date.parse(opts.field.value));
    }
    opts.setDefaultDate = true;
  }
}

var defDate = opts.defaultDate;

if (isDate(defDate)) {
  if (opts.setDefaultDate) {
    self.setDate(defDate, true);
  } else {
    self.gotoDate(defDate);
  }
} else {
  self.gotoDate(new Date());
}

if (opts.bound) {
  this.hide();
  self.el.className += ' is-bound';
  addEvent(opts.trigger, 'click', self._onInputClick);
  addEvent(opts.trigger, 'focus', self._onInputFocus);
  addEvent(opts.trigger, 'blur', self._onInputBlur);
} else {
  this.show();
}
};


/**
* public Pikaday API
*/
Pikaday.prototype = {


  /**
  * configure functionality
  */
  config: function(options)
{
  if (!this._o) {
    this._o = extend({}, defaults, true);
  }

  var opts = extend(this._o, options, true);

  opts.isRTL = !!opts.isRTL;

  opts.field = (opts.field && opts.field.nodeName) ? opts.field : null;

  opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);

  opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;

  opts.disableWeekends = !!opts.disableWeekends;

  opts.disableDayFn = (typeof opts.disableDayFn) == "function" ? opts.disableDayFn : null;

  var nom = parseInt(opts.numberOfMonths, 10) || 1;
  opts.numberOfMonths = nom > 4 ? 4 : nom;

  if (!isDate(opts.minDate)) {
    opts.minDate = false;
  }
  if (!isDate(opts.maxDate)) {
    opts.maxDate = false;
  }
  if ((opts.minDate && opts.maxDate) && opts.maxDate < opts.minDate) {
    opts.maxDate = opts.minDate = false;
  }
  if (opts.minDate) {
    setToStartOfDay(opts.minDate);
    opts.minYear  = opts.minDate.getFullYear();
    opts.minMonth = opts.minDate.getMonth();
  }
  if (opts.maxDate) {
    setToStartOfDay(opts.maxDate);
    opts.maxYear  = opts.maxDate.getFullYear();
    opts.maxMonth = opts.maxDate.getMonth();
  }

  if (isArray(opts.yearRange)) {
    var fallback = new Date().getFullYear() - 10;
    opts.yearRange[0] = parseInt(opts.yearRange[0], 10) || fallback;
    opts.yearRange[1] = parseInt(opts.yearRange[1], 10) || fallback;
  } else {
    opts.yearRange = Math.abs(parseInt(opts.yearRange, 10)) || defaults.yearRange;
    if (opts.yearRange > 100) {
      opts.yearRange = 100;
    }
  }

  return opts;
},

/**
* return a formatted string of the current selection (using Moment.js if available)
*/
toString: function(format)
{
  return !isDate(this._d) ? '' : hasMoment ? moment(this._d).format(format || this._o.format) : this._d.toDateString();
},

/**
* return a Moment.js object of the current selection (if available)
*/
getMoment: function()
{
  return hasMoment ? moment(this._d) : null;
},

/**
* set the current selection from a Moment.js object (if available)
*/
setMoment: function(date, preventOnSelect)
{
  if (hasMoment && moment.isMoment(date)) {
    this.setDate(date.toDate(), preventOnSelect);
  }
},

/**
* return a Date object of the current selection
*/
getDate: function()
{
  return isDate(this._d) ? new Date(this._d.getTime()) : null;
},

/**
* set the current selection
*/
setDate: function(date, preventOnSelect)
{
  if (!date) {
    this._d = null;

    if (this._o.field) {
      this._o.field.value = '';
      fireEvent(this._o.field, 'change', { firedBy: this });
    }

    return this.draw();
  }
  if (typeof date === 'string') {
    date = new Date(Date.parse(date));
  }
  if (!isDate(date)) {
    return;
  }

  var min = this._o.minDate,
  max = this._o.maxDate;

  if (isDate(min) && date < min) {
    date = min;
  } else if (isDate(max) && date > max) {
    date = max;
  }

  this._d = new Date(date.getTime());
  setToStartOfDay(this._d);
  this.gotoDate(this._d);

  if (this._o.field) {
    this._o.field.value = this.toString();
    fireEvent(this._o.field, 'change', { firedBy: this });
  }
  if (!preventOnSelect && typeof this._o.onSelect === 'function') {
    this._o.onSelect.call(this, this.getDate());
  }
},

/**
* change view to a specific date
*/
gotoDate: function(date)
{
  var newCalendar = true;

  if (!isDate(date)) {
    return;
  }

  if (this.calendars) {
    var firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1),
    lastVisibleDate = new Date(this.calendars[this.calendars.length-1].year, this.calendars[this.calendars.length-1].month, 1),
    visibleDate = date.getTime();
    // get the end of the month
    lastVisibleDate.setMonth(lastVisibleDate.getMonth()+1);
    lastVisibleDate.setDate(lastVisibleDate.getDate()-1);
    newCalendar = (visibleDate < firstVisibleDate.getTime() || lastVisibleDate.getTime() < visibleDate);
  }

  if (newCalendar) {
    this.calendars = [{
      month: date.getMonth(),
      year: date.getFullYear()
    }];
    if (this._o.mainCalendar === 'right') {
      this.calendars[0].month += 1 - this._o.numberOfMonths;
    }
  }

  this.adjustCalendars();
},

adjustCalendars: function() {
  this.calendars[0] = adjustCalendar(this.calendars[0]);
  for (var c = 1; c < this._o.numberOfMonths; c++) {
    this.calendars[c] = adjustCalendar({
      month: this.calendars[0].month + c,
      year: this.calendars[0].year
    });
  }
  this.draw();
},

gotoToday: function()
{
  this.gotoDate(new Date());
},

/**
* change view to a specific month (zero-index, e.g. 0: January)
*/
gotoMonth: function(month)
{
  if (!isNaN(month)) {
    this.calendars[0].month = parseInt(month, 10);
    this.adjustCalendars();
  }
},

nextMonth: function()
{
  this.calendars[0].month++;
  this.adjustCalendars();
},

prevMonth: function()
{
  this.calendars[0].month--;
  this.adjustCalendars();
},

/**
* change view to a specific full year (e.g. "2012")
*/
gotoYear: function(year)
{
  if (!isNaN(year)) {
    this.calendars[0].year = parseInt(year, 10);
    this.adjustCalendars();
  }
},

/**
* change the minDate
*/
setMinDate: function(value)
{
  this._o.minDate = value;
},

/**
* change the maxDate
*/
setMaxDate: function(value)
{
  this._o.maxDate = value;
},

/**
* refresh the HTML
*/
draw: function(force)
{
  if (!this._v && !force) {
    return;
  }
  var opts = this._o,
  minYear = opts.minYear,
  maxYear = opts.maxYear,
  minMonth = opts.minMonth,
  maxMonth = opts.maxMonth,
  html = '';

  if (this._y <= minYear) {
    this._y = minYear;
    if (!isNaN(minMonth) && this._m < minMonth) {
      this._m = minMonth;
    }
  }
  if (this._y >= maxYear) {
    this._y = maxYear;
    if (!isNaN(maxMonth) && this._m > maxMonth) {
      this._m = maxMonth;
    }
  }

  for (var c = 0; c < opts.numberOfMonths; c++) {
    html += '<div class="pika-lendar">' + renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year) + this.render(this.calendars[c].year, this.calendars[c].month) + '</div>';
  }

  this.el.innerHTML = html;

  if (opts.bound) {
    if(opts.field.type !== 'hidden') {
      sto(function() {
        opts.trigger.focus();
      }, 1);
    }
  }

  if (typeof this._o.onDraw === 'function') {
    var self = this;
    sto(function() {
      self._o.onDraw.call(self);
    }, 0);
  }
},

adjustPosition: function()
{
  if (this._o.container) return;
  var field = this._o.trigger, pEl = field,
  width = this.el.offsetWidth, height = this.el.offsetHeight,
  viewportWidth = window.innerWidth || document.documentElement.clientWidth,
  viewportHeight = window.innerHeight || document.documentElement.clientHeight,
  scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
  left, top, clientRect;

  if (typeof field.getBoundingClientRect === 'function') {
    clientRect = field.getBoundingClientRect();
    left = clientRect.left + window.pageXOffset;
    top = clientRect.bottom + window.pageYOffset;
  } else {
    left = pEl.offsetLeft;
    top  = pEl.offsetTop + pEl.offsetHeight;
    while((pEl = pEl.offsetParent)) {
      left += pEl.offsetLeft;
      top  += pEl.offsetTop;
    }
  }

  // default position is bottom & left
  if ((this._o.reposition && left + width > viewportWidth) ||
    (
      this._o.position.indexOf('right') > -1 &&
      left - width + field.offsetWidth > 0
    )
  ) {
    left = left - width + field.offsetWidth;
  }
  if ((this._o.reposition && top + height > viewportHeight + scrollTop) ||
    (
      this._o.position.indexOf('top') > -1 &&
      top - height - field.offsetHeight > 0
    )
  ) {
    top = top - height - field.offsetHeight;
  }

  this.el.style.cssText = [
  'position: absolute',
  'left: ' + left + 'px',
  'top: ' + top + 'px'
  ].join(';');
},

/**
* render HTML for a particular month
*/
render: function(year, month)
{
  var opts   = this._o,
  now    = new Date(),
  days   = getDaysInMonth(year, month),
  before = new Date(year, month, 1).getDay(),
  data   = [],
  row    = [];
  setToStartOfDay(now);
  if (opts.firstDay > 0) {
    before -= opts.firstDay;
    if (before < 0) {
      before += 7;
    }
  }
  var cells = days + before,
  after = cells;
  while(after > 7) {
    after -= 7;
  }
  cells += 7 - after;
  for (var i = 0, r = 0; i < cells; i++)
  {
    var day = new Date(year, month, 1 + (i - before)),
    isSelected = isDate(this._d) ? compareDates(day, this._d) : false,
    isToday = compareDates(day, now),
    isEmpty = i < before || i >= (days + before),
    isDisabled = (opts.minDate && day < opts.minDate) ||
    (opts.maxDate && day > opts.maxDate) ||
    (opts.disableWeekends && isWeekend(day)) ||
    (opts.disableDayFn && opts.disableDayFn(day));

    row.push(renderDay(1 + (i - before), month, year, isSelected, isToday, isDisabled, isEmpty));

    if (++r === 7) {
      if (opts.showWeekNumber) {
        row.unshift(renderWeek(i - before, month, year));
      }
      data.push(renderRow(row, opts.isRTL));
      row = [];
      r = 0;
    }
  }
  return renderTable(opts, data);
},

isVisible: function()
{
  return this._v;
},

show: function()
{
  if (!this._v) {
    removeClass(this.el, 'is-hidden');
    this._v = true;
    this.draw();
    if (this._o.bound) {
      addEvent(document, 'click', this._onClick);
      this.adjustPosition();
    }
    if (typeof this._o.onOpen === 'function') {
      this._o.onOpen.call(this);
    }
  }
},

hide: function()
{
  var v = this._v;
  if (v !== false) {
    if (this._o.bound) {
      removeEvent(document, 'click', this._onClick);
    }
    this.el.style.cssText = '';
    addClass(this.el, 'is-hidden');
    this._v = false;
    if (v !== undefined && typeof this._o.onClose === 'function') {
      this._o.onClose.call(this);
    }
  }
},

/**
* GAME OVER
*/
destroy: function()
{
  this.hide();
  removeEvent(this.el, 'mousedown', this._onMouseDown, true);
  removeEvent(this.el, 'change', this._onChange);
  if (this._o.field) {
    removeEvent(this._o.field, 'change', this._onInputChange);
    if (this._o.bound) {
      removeEvent(this._o.trigger, 'click', this._onInputClick);
      removeEvent(this._o.trigger, 'focus', this._onInputFocus);
      removeEvent(this._o.trigger, 'blur', this._onInputBlur);
    }
  }
  if (this.el.parentNode) {
    this.el.parentNode.removeChild(this.el);
  }
}

};

return Pikaday;

}));