diff --git a/app/assets/javascripts/discourse/components/date-picker.js.es6 b/app/assets/javascripts/discourse/components/date-picker.js.es6 new file mode 100644 index 00000000000..c3e92ad4747 --- /dev/null +++ b/app/assets/javascripts/discourse/components/date-picker.js.es6 @@ -0,0 +1,30 @@ +/* global Pikaday:true */ +import loadScript from "discourse/lib/load-script"; + +export default Em.Component.extend({ + tagName: "input", + classNames: ["date-picker"], + _picker: null, + + _loadDatePicker: function() { + const self = this, + input = this.$()[0]; + + loadScript("/javascripts/pikaday.js").then(function() { + self._picker = new Pikaday({ + field: input, + format: "YYYY-MM-DD", + defaultDate: moment().add(1, "day").toDate(), + minDate: new Date(), + onSelect: function(date) { + self.set("value", moment(date).format("YYYY-MM-DD")); + }, + }); + }); + }.on("didInsertElement"), + + _destroy: function() { + this._picker = null; + }.on("willDestroyElement"), + +}); diff --git a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs index 07b64307953..d6360b86de8 100644 --- a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs +++ b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs @@ -35,7 +35,7 @@

{{{pinMessage}}} {{fa-icon "clock-o"}} - {{input type="date" value=model.pinnedInCategoryUntil}} + {{date-picker value=model.pinnedInCategoryUntil}}

{{d-button action="pin" icon="thumb-tack" label="topic.feature.pin" class="btn-primary" disabled=pinDisabled}} @@ -56,7 +56,7 @@

{{i18n "topic.feature_topic.pin_globally"}} {{fa-icon "clock-o"}} - {{input type="date" value=model.pinnedGloballyUntil}} + {{date-picker value=model.pinnedGloballyUntil}}

{{d-button action="pinGlobally" icon="thumb-tack" label="topic.feature.pin_globally" class="btn-primary" disabled=pinGloballyDisabled}} diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 3f87f8fb9de..771ff63a379 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -10,3 +10,4 @@ @import "common/topic-entrance"; @import "common/printer-friendly"; @import "common/base/*"; +@import "vendor/pikaday"; diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss index 79cb3cbbdba..2589ad8d8a8 100644 --- a/app/assets/stylesheets/common/base/topic-admin-menu.scss +++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss @@ -41,8 +41,9 @@ .badge-wrapper { margin-right: 0; } - input[type="date"] { - width: 120px; + .date-picker { + text-align: center; + width: 80px; margin: 0; } .desc { diff --git a/app/assets/stylesheets/vendor/pikaday.scss b/app/assets/stylesheets/vendor/pikaday.scss new file mode 100644 index 00000000000..3b2a3c0a80b --- /dev/null +++ b/app/assets/stylesheets/vendor/pikaday.scss @@ -0,0 +1,217 @@ +/*! + * 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; + + &.is-hidden { + display: none; + } + + &.is-bound { + position: absolute; + box-shadow: 0 5px 15px -5px rgba(0,0,0,.5); + } +} + +// clear child float (pika-lendar), using the famous micro clearfix hack +// http://nicolasgallagher.com/micro-clearfix-hack/ +.pika-single { + *zoom: 1; + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { clear: both } +} + +.pika-lendar { + float: left; + width: 240px; + margin: 8px; +} + +.pika-title { + position: relative; + text-align: center; + + select { + cursor: pointer; + position: absolute; + z-index: 9998; + margin: 0; + left: 0; + top: 5px; + filter: alpha(opacity=0); + opacity: 0; + } +} + +.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-prev, +.pika-next { + display: block; + cursor: pointer; + position: relative; + outline: none; + border: 0; + padding: 0; + width: 20px; + height: 30px; + text-indent: 20px; // hide text using text-indent trick, using width value (it's enough) + 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; + + &:hover { + opacity: 1; + } + + &.is-disabled { + cursor: default; + opacity: .2; + } +} + +.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-select { + display: inline-block; + *display: inline; +} + +.pika-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + border: 0; + + th, + td { + width: 14.285714285714286%; + padding: 0; + } + + th { + color: #999; + font-size: 12px; + line-height: 25px; + font-weight: bold; + text-align: center; + } + + abbr { + border-bottom: none; + cursor: help; + } +} + +.pika-button { + cursor: pointer; + display: block; + -moz-box-sizing: border-box; + 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; + + .is-today & { + color: #33aaff; + font-weight: bold; + } + + .is-selected & { + color: #fff; + font-weight: bold; + background: #33aaff; + box-shadow: inset 0 1px 3px #178fe5; + border-radius: 3px; + } + + .is-disabled & { + pointer-events: none; + cursor: default; + color: #999; + opacity: .3; + } + + &:hover { + color: #fff; + background: #ff8000; + box-shadow: none; + border-radius: 3px; + } +} + +.pika-week { + font-size: 11px; + color: #999; +} + +.is-inrange .pika-button { + background: #D5E9F7; +} + +.is-startrange .pika-button { + color: #fff; + background: #6CB31D; + box-shadow: none; + border-radius: 3px; +} + +.is-endrange .pika-button { + color: #fff; + background: #33aaff; + box-shadow: none; + border-radius: 3px; +} diff --git a/public/javascripts/pikaday.js b/public/javascripts/pikaday.js new file mode 100644 index 00000000000..dc2b5e11f5c --- /dev/null +++ b/public/javascripts/pikaday.js @@ -0,0 +1,1079 @@ +/*! + * 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, + + startRange: null, + endRange: null, + + 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'] + }, + + // Theme Classname + theme: null, + + // 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(opts) + { + if (opts.isEmpty) { + return ''; + } + var arr = []; + if (opts.isDisabled) { + arr.push('is-disabled'); + } + if (opts.isToday) { + arr.push('is-today'); + } + if (opts.isSelected) { + arr.push('is-selected'); + } + if (opts.isInRange) { + arr.push('is-inrange'); + } + if (opts.isStartRange) { + arr.push('is-startrange'); + } + if (opts.isEndRange) { + arr.push('is-endrange'); + } + return '' + + '' + + ''; + }, + + 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 '' + weekNum + ''; + }, + + renderRow = function(days, isRTL) + { + return '' + (isRTL ? days.reverse() : days).join('') + ''; + }, + + renderBody = function(rows) + { + return '' + rows.join('') + ''; + }, + + renderHead = function(opts) + { + var i, arr = []; + if (opts.showWeekNumber) { + arr.push(''); + } + for (i = 0; i < 7; i++) { + arr.push('' + renderDayName(opts, i, true) + ''); + } + return '' + (opts.isRTL ? arr.reverse() : arr).join('') + ''; + }, + + renderTitle = function(instance, c, year, month, refYear) + { + var i, j, arr, + opts = instance._o, + isMinYear = year === opts.minYear, + isMaxYear = year === opts.maxYear, + html = '

', + monthHtml, + yearHtml, + prev = true, + next = true; + + for (arr = [], i = 0; i < 12; i++) { + arr.push(''); + } + monthHtml = '
' + opts.i18n.months[month] + '
'; + + 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(''); + } + } + yearHtml = '
' + year + opts.yearSuffix + '
'; + + 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 += ''; + } + if (c === (instance._o.numberOfMonths - 1) ) { + html += ''; + } + + return html += '
'; + }, + + renderTable = function(opts, data) + { + return '' + renderHead(opts) + renderBody(data) + '
'; + }, + + + /** + * 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.parentNode, '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)); + } + if (isDate(date)) { + self.setDate(date); + } + 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' : '') + (opts.theme ? ' ' + opts.theme : ''); + + addEvent(self.el, 'ontouchend' in document ? 'touchend' : '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.theme = (typeof opts.theme) === 'string' && opts.theme ? opts.theme : 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) { + this.setMinDate(opts.minDate); + } + 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) + { + setToStartOfDay(value); + this._o.minDate = value; + this._o.minYear = value.getFullYear(); + this._o.minMonth = value.getMonth(); + }, + + /** + * change the maxDate + */ + setMaxDate: function(value) + { + this._o.maxDate = value; + }, + + setStartRange: function(value) + { + this._o.startRange = value; + }, + + setEndRange: function(value) + { + this._o.endRange = 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 += '
' + 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) + '
'; + } + + 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() + { + var field, pEl, width, height, viewportWidth, viewportHeight, scrollTop, left, top, clientRect; + + if (this._o.container) return; + + this.el.style.position = 'absolute'; + + 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; + + 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.left = left + 'px'; + this.el.style.top = top + 'px'; + }, + + /** + * 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), + isStartRange = opts.startRange && compareDates(opts.startRange, day), + isEndRange = opts.endRange && compareDates(opts.endRange, day), + isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange, + isDisabled = (opts.minDate && day < opts.minDate) || + (opts.maxDate && day > opts.maxDate) || + (opts.disableWeekends && isWeekend(day)) || + (opts.disableDayFn && opts.disableDayFn(day)), + dayConfig = { + day: 1 + (i - before), + month: month, + year: year, + isSelected: isSelected, + isToday: isToday, + isDisabled: isDisabled, + isEmpty: isEmpty, + isStartRange: isStartRange, + isEndRange: isEndRange, + isInRange: isInRange + }; + + row.push(renderDay(dayConfig)); + + 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.position = 'static'; // reset + this.el.style.left = 'auto'; + this.el.style.top = 'auto'; + 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; + +}));