JavaScript 日期选择器 Pikaday

参考网址：

http://www.jq22.com/jquery-info7564

 

pikaday.css

@charset "UTF-8";

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

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

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

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

.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;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
    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%;
}

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

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

.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;
}

 

pikaday.min.js

(function (e, t) { "use strict"; var n; if (typeof exports == "object") { try { n = require("moment") } catch (r) { } module.exports = t(n) } else typeof define == "function" && define.amd ? define(function (e) { var r = "moment"; return n = e.defined && e.defined(r) ? e(r) : undefined, t(n) }) : e.Pikaday = t(e.moment) })(this, function (e) { "use strict"; var t = typeof e == "function", n = !!window.addEventListener, r = window.document, i = window.setTimeout, s = function (e, t, r, i) { n ? e.addEventListener(t, r, !!i) : e.attachEvent("on" + t, r) }, o = function (e, t, r, i) { n ? e.removeEventListener(t, r, !!i) : e.detachEvent("on" + t, r) }, u = function (e, t, n) { var i; r.createEvent ? (i = r.createEvent("HTMLEvents"), i.initEvent(t, !0, !1), i = y(i, n), e.dispatchEvent(i)) : r.createEventObject && (i = r.createEventObject(), i = y(i, n), e.fireEvent("on" + t, i)) }, a = function (e) { return e.trim ? e.trim() : e.replace(/^\s+|\s+$/g, "") }, f = function (e, t) { return (" " + e.className + " ").indexOf(" " + t + " ") !== -1 }, l = function (e, t) { f(e, t) || (e.className = e.className === "" ? t : e.className + " " + t) }, c = function (e, t) { e.className = a((" " + e.className + " ").replace(" " + t + " ", " ")) }, h = function (e) { return /Array/.test(Object.prototype.toString.call(e)) }, p = function (e) { return /Date/.test(Object.prototype.toString.call(e)) && !isNaN(e.getTime()) }, d = function (e) { return e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 }, v = function (e, t) { return [31, d(e) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][t] }, m = function (e) { p(e) && e.setHours(0, 0, 0, 0) }, g = function (e, t) { return e.getTime() === t.getTime() }, y = function (e, t, n) { var r, i; for (r in t) { i = e[r] !== undefined; if (i && typeof t[r] == "object" && t[r].nodeName === undefined) p(t[r]) ? n && (e[r] = new Date(t[r].getTime())) : h(t[r]) ? n && (e[r] = t[r].slice(0)) : e[r] = y({}, t[r], n); else if (n || !i) e[r] = t[r] } return e }, b = { field: null, bound: undefined, format: "YYYY-MM-DD", defaultDate: null, setDefaultDate: !1, firstDay: 0, minDate: null, maxDate: null, yearRange: 10, minYear: 0, maxYear: 9999, minMonth: undefined, maxMonth: undefined, isRTL: !1, yearSuffix: "", showMonthAfterYear: !1, numberOfMonths: 1, i18n: { previousMonth: "Previous Month", nextMonth: "Next Month", months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], monthsShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], weekdays: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], weekdaysShort: ["日", "一", "二", "三", "四", "五", "六"] }, onSelect: null, onOpen: null, onClose: null, onDraw: null }, w = function (e, t, n) { t += e.firstDay; while (t >= 7) t -= 7; return n ? e.i18n.weekdaysShort[t] : e.i18n.weekdays[t] }, E = function (e, t, n, r, i) { if (i) return '<td class="is-empty"></td>'; var s = []; return r && s.push("is-disabled"), n && s.push("is-today"), t && s.push("is-selected"), '<td data-day="' + e + '" class="' + s.join(" ") + '"><button class="pika-button" type="button">' + e + "</button>" + "</td>" }, S = function (e, t) { return "<tr>" + (t ? e.reverse() : e).join("") + "</tr>" }, x = function (e) { return "<tbody>" + e.join("") + "</tbody>" }, T = function (e) { var t, n = []; for (t = 0; t < 7; t++) n.push('<th scope="col"><abbr title="' + w(e, t) + '">' + w(e, t, !0) + "</abbr></th>"); return "<thead>" + (e.isRTL ? n.reverse() : n).join("") + "</thead>" }, N = function (e) { var t, n, r, i = e._o, s = e._m, o = e._y, u = o === i.minYear, a = o === i.maxYear, f = '<div class="pika-title">', l, c, p = !0, d = !0; for (r = [], t = 0; t < 12; t++) r.push('<option value="' + t + '"' + (t === s ? " selected" : "") + (u && t < i.minMonth || a && t > i.maxMonth ? "disabled" : "") + ">" + i.i18n.months[t] + "</option>"); l = '<div class="pika-label">' + i.i18n.months[s] + '<select class="pika-select pika-select-month">' + r.join("") + "</select></div>", h(i.yearRange) ? (t = i.yearRange[0], n = i.yearRange[1] + 1) : (t = o - i.yearRange, n = 1 + o + i.yearRange); for (r = []; t < n && t <= i.maxYear; t++) t >= i.minYear && r.push('<option value="' + t + '"' + (t === o ? " selected" : "") + ">" + t + "</option>"); return c = '<div class="pika-label">' + o + i.yearSuffix + '&nbsp;&nbsp;年<select class="pika-select pika-select-year">' + r.join("") + "</select></div>", i.showMonthAfterYear ? f += c + l : f += c + l, u && (s === 0 || i.minMonth >= s) && (p = !1), a && (s === 11 || i.maxMonth <= s) && (d = !1), f += '<button class="pika-prev' + (p ? "" : " is-disabled") + '" type="button">' + i.i18n.previousMonth + "</button>", f += '<button class="pika-next' + (d ? "" : " is-disabled") + '" type="button">' + i.i18n.nextMonth + "</button>", f += "</div>" }, C = function (e, t) { return '<table cellpadding="0" cellspacing="0" class="pika-table">' + T(e) + x(t) + "</table>" }, k = function (o) { var u = this, a = u.config(o); u._onMouseDown = function (e) { if (!u._v) return; e = e || window.event; var t = e.target || e.srcElement; if (!t) return; if (!f(t, "is-disabled")) { if (f(t, "pika-button") && !f(t, "is-empty")) { u.setDate(new Date(u._y, u._m, parseInt(t.innerHTML, 10))), a.bound && i(function () { u.hide() }, 100); return } f(t, "pika-prev") ? u.prevMonth() : f(t, "pika-next") && u.nextMonth() } if (!f(t, "pika-select")) { if (!e.preventDefault) return e.returnValue = !1, !1; e.preventDefault() } else u._c = !0 }, u._onChange = function (e) { e = e || window.event; var t = e.target || e.srcElement; if (!t) return; f(t, "pika-select-month") ? u.gotoMonth(t.value) : f(t, "pika-select-year") && u.gotoYear(t.value) }, u._onInputChange = function (n) { var r; if (n.firedBy === u) return; t ? (r = e(a.field.value, a.format), r = r && r.isValid() ? r.toDate() : null) : r = new Date(Date.parse(a.field.value)), u.setDate(p(r) ? r : null), u._v || u.show() }, u._onInputFocus = function () { u.show() }, u._onInputClick = function () { u.show() }, u._onInputBlur = function () { u._c || (u._b = i(function () { u.hide() }, 50)), u._c = !1 }, u._onClick = function (e) { e = e || window.event; var t = e.target || e.srcElement, r = t; if (!t) return; !n && f(t, "pika-select") && (t.onchange || (t.setAttribute("onchange", "return;"), s(t, "change", u._onChange))); do if (f(r, "pika-single")) return; while (r = r.parentNode); u._v && t !== a.trigger && u.hide() }, u.el = r.createElement("div"), u.el.className = "pika-single" + (a.isRTL ? " is-rtl" : ""), s(u.el, "mousedown", u._onMouseDown, !0), s(u.el, "change", u._onChange), a.field && (a.bound ? r.body.appendChild(u.el) : a.field.parentNode.insertBefore(u.el, a.field.nextSibling), s(a.field, "change", u._onInputChange), a.defaultDate || (t && a.field.value ? a.defaultDate = e(a.field.value, a.format).toDate() : a.defaultDate = new Date(Date.parse(a.field.value)), a.setDefaultDate = !0)); var l = a.defaultDate; p(l) ? a.setDefaultDate ? u.setDate(l, !0) : u.gotoDate(l) : u.gotoDate(new Date), a.bound ? (this.hide(), u.el.className += " is-bound", s(a.trigger, "click", u._onInputClick), s(a.trigger, "focus", u._onInputFocus), s(a.trigger, "blur", u._onInputBlur)) : this.show() }; return k.prototype = { config: function (e) { this._o || (this._o = y({}, b, !0)); var t = y(this._o, e, !0); t.isRTL = !!t.isRTL, t.field = t.field && t.field.nodeName ? t.field : null, t.bound = !!(t.bound !== undefined ? t.field && t.bound : t.field), t.trigger = t.trigger && t.trigger.nodeName ? t.trigger : t.field; var n = parseInt(t.numberOfMonths, 10) || 1; t.numberOfMonths = n > 4 ? 4 : n, p(t.minDate) || (t.minDate = !1), p(t.maxDate) || (t.maxDate = !1), t.minDate && t.maxDate && t.maxDate < t.minDate && (t.maxDate = t.minDate = !1), t.minDate && (m(t.minDate), t.minYear = t.minDate.getFullYear(), t.minMonth = t.minDate.getMonth()), t.maxDate && (m(t.maxDate), t.maxYear = t.maxDate.getFullYear(), t.maxMonth = t.maxDate.getMonth()); if (h(t.yearRange)) { var r = (new Date).getFullYear() - 10; t.yearRange[0] = parseInt(t.yearRange[0], 10) || r, t.yearRange[1] = parseInt(t.yearRange[1], 10) || r } else t.yearRange = Math.abs(parseInt(t.yearRange, 10)) || b.yearRange, t.yearRange > 100 && (t.yearRange = 100); return t }, toString: function (e) { if (!p(this._d)) return ""; var n = this._d.getFullYear(), r = this._d.getMonth() + 1, i = this._d.getDate(); return r = r < 10 ? "0" + r : r, i = i < 10 ? "0" + i : i, p(this._d) ? t ? window.moment(this._d).format(e || this._o.format) : n + "-" + r + "-" + i : "" }, getMoment: function () { return t ? e(this._d) : null }, setMoment: function (n) { t && e.isMoment(n) && this.setDate(n.toDate()) }, getDate: function () { return p(this._d) ? new Date(this._d.getTime()) : null }, setDate: function (e, t) { if (!e) return this._d = null, this.draw(); typeof e == "string" && (e = new Date(Date.parse(e))); if (!p(e)) return; var n = this._o.minDate, r = this._o.maxDate; p(n) && e < n ? e = n : p(r) && e > r && (e = r), this._d = new Date(e.getTime()), m(this._d), this.gotoDate(this._d), this._o.field && (this._o.field.value = this.toString(), u(this._o.field, "change", { firedBy: this })), !t && typeof this._o.onSelect == "function" && this._o.onSelect.call(this, this.getDate()) }, gotoDate: function (e) { if (!p(e)) return; this._y = e.getFullYear(), this._m = e.getMonth(), this.draw() }, gotoToday: function () { this.gotoDate(new Date) }, gotoMonth: function (e) { isNaN(e = parseInt(e, 10)) || (this._m = e < 0 ? 0 : e > 11 ? 11 : e, this.draw()) }, nextMonth: function () { ++this._m > 11 && (this._m = 0, this._y++), this.draw() }, prevMonth: function () { --this._m < 0 && (this._m = 11, this._y--), this.draw() }, gotoYear: function (e) { isNaN(e) || (this._y = parseInt(e, 10), this.draw()) }, setMinDate: function (e) { this._o.minDate = e }, setMaxDate: function (e) { this._o.maxDate = e }, draw: function (e) { if (!this._v && !e) return; var t = this._o, n = t.minYear, r = t.maxYear, s = t.minMonth, o = t.maxMonth; this._y <= n && (this._y = n, !isNaN(s) && this._m < s && (this._m = s)), this._y >= r && (this._y = r, !isNaN(o) && this._m > o && (this._m = o)), this.el.innerHTML = N(this) + this.render(this._y, this._m), t.bound && (this.adjustPosition(), t.field.type !== "hidden" && i(function () { t.trigger.focus() }, 1)); if (typeof this._o.onDraw == "function") { var u = this; i(function () { u._o.onDraw.call(u) }, 0) } }, adjustPosition: function () { var e = this._o.trigger, t = e, n = this.el.offsetWidth, i = this.el.offsetHeight, s = window.innerWidth || r.documentElement.clientWidth, o = window.innerHeight || r.documentElement.clientHeight, u = window.pageYOffset || r.body.scrollTop || r.documentElement.scrollTop, a, f, l; if (typeof e.getBoundingClientRect == "function") l = e.getBoundingClientRect(), a = l.left + window.pageXOffset, f = l.bottom + window.pageYOffset; else { a = t.offsetLeft, f = t.offsetTop + t.offsetHeight; while (t = t.offsetParent) a += t.offsetLeft, f += t.offsetTop } a + n > s && (a = a - n + e.offsetWidth), f + i > o + u && (f = f - i - e.offsetHeight), this.el.style.cssText = "position:absolute;left:" + a + "px;top:" + f + "px;" }, render: function (e, t) { var n = this._o, r = new Date, i = v(e, t), s = (new Date(e, t, 1)).getDay(), o = [], u = []; m(r), n.firstDay > 0 && (s -= n.firstDay, s < 0 && (s += 7)); var a = i + s, f = a; while (f > 7) f -= 7; a += 7 - f; for (var l = 0, c = 0; l < a; l++) { var h = new Date(e, t, 1 + (l - s)), d = n.minDate && h < n.minDate || n.maxDate && h > n.maxDate, y = p(this._d) ? g(h, this._d) : !1, b = g(h, r), w = l < s || l >= i + s; u.push(E(1 + (l - s), y, b, d, w)), ++c === 7 && (o.push(S(u, n.isRTL)), u = [], c = 0) } return C(n, o) }, isVisible: function () { return this._v }, show: function () { this._v || (this._o.bound && s(r, "click", this._onClick), c(this.el, "is-hidden"), this._v = !0, this.draw(), typeof this._o.onOpen == "function" && this._o.onOpen.call(this)) }, hide: function () { var e = this._v; e !== !1 && (this._o.bound && o(r, "click", this._onClick), this.el.style.cssText = "", l(this.el, "is-hidden"), this._v = !1, e !== undefined && typeof this._o.onClose == "function" && this._o.onClose.call(this)) }, destroy: function () { this.hide(), o(this.el, "mousedown", this._onMouseDown, !0), o(this.el, "change", this._onChange), this._o.field && (o(this._o.field, "change", this._onInputChange), this._o.bound && (o(this._o.trigger, "click", this._onInputClick), o(this._o.trigger, "focus", this._onInputFocus), o(this._o.trigger, "blur", this._onInputBlur))), this.el.parentNode && this.el.parentNode.removeChild(this.el) } }, k })

 

引用：

<link href="Lib/CalendarPlug/pikaday.css" rel="stylesheet" />
<script src="Lib/CalendarPlug/pikaday.min.js"></script>

 

html

<input type="text" class="text-small" id="txt_ExperimentDate" style="width:178px;padding:7px 10px;border:1px solid #ccc;" />

 

js

            var picker = new Pikaday({
     field: document.getElementById('txt_ExperimentDate'),
     firstDay: 1,
     //minDate: new Date('2010-01-01'),
     //maxDate: new Date('2020-12-31'),
     yearRange: [2000, 2020],

 });