simplepicker 日期时间选择器的翻译 Javascript
Translation of simplepicker datetime picker Javascript
我正在使用这个插件：https://priyank-p.github.io/simplepicker/index.html
例如，当我尝试翻译月份的名称时，它总是在日期上给我“NAN”。
有人试过翻译吗？这是在 javascript.
上执行日期时间选择器的最轻便的插件之一
documentation 没有提到对语言环境的支持。
如果您想添加翻译，您可以尝试以下操作：
const LOCALES = 'es';
t.months = Array.from({ length: 12 }, (x, i) => new Date(0, i).toLocaleString(LOCALES, { month: 'long' })),
t.days = Array.from({ length: 7 }, (x, i) => new Date(0, 0, i).toLocaleString(LOCALES, { weekday: 'long' }))
`<thead>
<tr>
${
Array.from({ length: 7 }, (x, i) =>
`<th>${new Date(0, 0, i).toLocaleString(LOCALES, { weekday: 'short' })}</th>`).join('')
}
</tr>
</thead>
例子
我无法对配置进行逆向工程以传递 locales 参数，所以我暂时将其设为全局。
const LOCALES = 'es';
const main = () => {
const picker = new SimplePicker('#picker');
picker.open();
}
/* https://github.com/priyank-p/simplepicker/blob/master/dist/simplepicker.js */
var SimplePicker = function(e) {
var t = {};
function i(n) {
if (t[n]) return t[n].exports;
var r = t[n] = {
i: n,
l: !1,
exports: {}
};
return e[n].call(r.exports, r, r.exports, i), r.l = !0, r.exports
}
return i.m = e, i.c = t, i.d = function(e, t, n) {
i.o(e, t) || Object.defineProperty(e, t, {
enumerable: !0,
get: n
})
}, i.r = function(e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(e, "__esModule", {
value: !0
})
}, i.t = function(e, t) {
if (1 & t && (e = i(e)), 8 & t) return e;
if (4 & t && "object" == typeof e && e && e.__esModule) return e;
var n = Object.create(null);
if (i.r(n), Object.defineProperty(n, "default", {
enumerable: !0,
value: e
}), 2 & t && "string" != typeof e)
for (var r in e) i.d(n, r, function(t) {
return e[t]
}.bind(null, r));
return n
}, i.n = function(e) {
var t = e && e.__esModule ? function() {
return e.default
} : function() {
return e
};
return i.d(t, "a", t), t
}, i.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}, i.p = "", i(i.s = 0)
}({
0: function(e, t, i) {
i("iyB0"), e.exports = i("TYVf")
},
"0DyV": function(e, t, i) {
"use strict";
function n(e, t) {
e = [].concat(e);
for (var i = 0; i < t; i++) e[i] = void 0;
return e
}
function r(e) {
var i = new Date(e.getTime()),
r = e.getFullYear(),
s = e.getMonth(),
a = {
date: i,
month: void 0
};
if (t.monthTracker.current = new Date(e.getTime()), t.monthTracker.current.setDate(1), t.monthTracker.years[r] = t.monthTracker.years[r] || {}, void 0 !== t.monthTracker.years[r][s]) return a.month = t.monthTracker.years[r][s], a;
(e = new Date(e.getTime())).setDate(1), t.monthTracker.years[r][s] = [];
for (var c = t.monthTracker.years[r][s], o = 0; e.getMonth() === s;) {
var l = e.getDate(),
p = e.getDay();
1 === l && (c[o] = n([], p)), c[o] = c[o] || [], c[o][p] = l, 6 === p && o++, e.setDate(e.getDate() + 1)
}
var d = 5;
void 0 === c[5] && (d = 4, c[5] = n([], 7));
var m = c[d].length;
if (m < 7) {
var u = c[d].concat(n([], 7 - m));
c[d] = u
}
return a.month = c, a
}
Object.defineProperty(t, "__esModule", {
value: !0
}), t.monthTracker = {
years: {}
}, t.months = Array.from({ length: 12 }, (x, i) => new Date(0, i).toLocaleString(LOCALES, { month: 'long' })), t.days = Array.from({ length: 7 }, (x, i) => new Date(0, 0, i).toLocaleString(LOCALES, { weekday: 'long' })), t.scrapeMonth = r, t.scrapePreviousMonth = function() {
var e = t.monthTracker.current;
if (!e) throw Error("scrapePrevoisMonth called without setting monthTracker.current!");
return e.setMonth(e.getMonth() - 1), r(e)
}, t.scrapeNextMonth = function() {
var e = t.monthTracker.current;
if (!e) throw Error("scrapePrevoisMonth called without setting monthTracker.current!");
return e.setMonth(e.getMonth() + 1), r(e)
};
var s = {
st: [1, 21, 31],
nd: [2, 22],
rd: [3, 23]
};
t.getDisplayDate = function(e) {
var t = e.getDate();
return -1 !== s.st.indexOf(t) ? t + "st" : -1 !== s.nd.indexOf(t) ? t + "nd" : -1 !== s.rd.indexOf(t) ? t + "rd" : t + "th"
}, t.formatTimeFromInputElement = function(e) {
var t = "",
i = e.split(":"),
n = i[0],
r = (n = +n) >= 12;
return r && n > 12 && (n -= 12), r || 0 !== n || (n = 12), t += n < 10 ? "0" + n : n, t += ":" + i[1] + " ", t += r ? "PM" : "AM"
}
},
TYVf: function(e, t, i) {
"use strict";
var n = i("0DyV"),
r = i("ht6X"),
s = new Date,
a = function() {
function e(e, t) {
var i = void 0,
n = t;
if ("string" == typeof e) {
var r = document.querySelector(e);
if (null === r) throw new Error("Invalid selector passed to SimplePicker!");
i = r
} else e instanceof HTMLElement ? i = e : "object" == typeof e && (n = e);
i || (i = document.querySelector("body")), n || (n = {}), this.selectedDate = new Date, this.injectTemplate(i), this.init(i, n), this.initListeners(), this._eventHandlers = {}, this._validOnListeners = ["submit", "close"]
}
return e.prototype.initElMethod = function(e) {
this.$ = function(t) {
return e.querySelector(t)
}, this.$$ = function(t) {
return e.querySelectorAll(t)
}
}, e.prototype.init = function(e, t) {
this.$simplepickerWrapper = e.querySelector(".simplepicker-wrapper"), this.initElMethod(this.$simplepickerWrapper);
var i = this.$,
r = this.$$;
this.$simplepicker = i(".simpilepicker-date-picker"), this.$trs = r(".simplepicker-calender tbody tr"), this.$tds = r(".simplepicker-calender tbody td"), this.$headerMonthAndYear = i(".simplepicker-month-and-year"), this.$monthAndYear = i(".simplepicker-selected-date"), this.$date = i(".simplepicker-date"), this.$day = i(".simplepicker-day-header"), this.$time = i(".simplepicker-time"), this.$timeInput = i(".simplepicker-time-section input"), this.$timeSectionIcon = i(".simplepicker-icon-time"), this.$cancel = i(".simplepicker-cancel-btn"), this.$ok = i(".simplepicker-ok-btn"), this.$displayDateElements = [this.$day, this.$headerMonthAndYear, this.$date], this.$time.classList.add("simplepicker-fade"), this.render(n.scrapeMonth(s)), t = t || {}, this.opts = t, this.reset(s), void 0 !== t.zIndex && (this.$simplepickerWrapper.style.zIndex = t.zIndex.toString()), t.disableTimeSection && this.disableTimeSection(), t.compactMode && this.compactMode()
}, e.prototype.reset = function(e) {
var t = e || new Date;
this.render(n.scrapeMonth(t));
var i = t.toTimeString().split(" ")[0].replace(/\:\d\d$/, "");
this.$timeInput.value = i, this.$time.innerText = n.formatTimeFromInputElement(i);
var r = t.getDate().toString(),
s = this.findElementWithDate(r);
s.classList.contains("active") || (this.selectDateElement(s), this.updateDateComponents(t))
}, e.prototype.compactMode = function() {
this.$date.style.display = "none"
}, e.prototype.disableTimeSection = function() {
this.$timeSectionIcon.style.visibility = "hidden"
}, e.prototype.enableTimeSection = function() {
this.$timeSectionIcon.style.visibility = "visible"
}, e.prototype.injectTemplate = function(e) {
var t = document.createElement("template");
t.innerHTML = r.htmlTemplate, e.appendChild(t.content.cloneNode(!0))
}, e.prototype.clearRows = function() {
this.$tds.forEach(function(e) {
e.innerHTML = "", e.classList.remove("active")
})
}, e.prototype.updateDateComponents = function(e) {
var t = n.days[e.getDay()],
i = n.months[e.getMonth()] + " " + e.getFullYear();
this.$headerMonthAndYear.innerHTML = i, this.$monthAndYear.innerHTML = i, this.$day.innerHTML = t, this.$date.innerHTML = n.getDisplayDate(e)
}, e.prototype.render = function(e) {
var t = this.$$,
i = this.$trs,
n = e.month,
r = e.date;
this.clearRows(), n.forEach(function(e, t) {
var n = i[t].children;
e.forEach(function(e, t) {
var i = n[t];
e ? (i.removeAttribute("data-empty"), i.innerHTML = e) : i.setAttribute("data-empty", "")
})
});
var s = t("table tbody tr:last-child td"),
a = !0;
s.forEach(function(e) {
void 0 === e.dataset.empty && (a = !1)
});
var c = s[0].parentElement;
c.style.display = a && c ? "none" : "table-row", this.updateDateComponents(r)
}, e.prototype.updateSelectedDate = function(e) {
var t, i = this.$monthAndYear,
r = this.$time;
this.$date;
t = e ? e.innerHTML.trim() : this.$date.innerHTML.replace(/[a-z]+/, "");
var s = i.innerHTML.split(" "),
a = s[0],
c = s[1],
o = n.months.indexOf(a),
l = r.innerHTML.split(":"),
p = +l[0],
d = l[1].split(" "),
m = d[0],
u = d[1];
"AM" === u && 12 == p && (p = 0), "PM" === u && p < 12 && (p += 12);
var h = new Date(+c, +o, +t, +p, +m);
this.selectedDate = h;
var v = t + " ";
v += i.innerHTML.trim() + " ", v += r.innerHTML.trim(), this.readableDate = v.replace(/^\d+/, h.getDate().toString())
}, e.prototype.selectDateElement = function(e) {
var t = this.$(".simplepicker-calender tbody .active");
e.classList.add("active"), t && t.classList.remove("active"), this.updateSelectedDate(e), this.updateDateComponents(this.selectedDate)
}, e.prototype.findElementWithDate = function(e, t) {
var i, n;
return void 0 === t && (t = !1), this.$tds.forEach(function(t) {
var r = t.innerHTML.trim();
r === e && (i = t), "" !== r && (n = t)
}), void 0 === i && t && (i = n), i
}, e.prototype.handleIconButtonClick = function(e) {
var t, i = this.$;
if (e.classList.contains("simplepicker-icon-calender")) {
var r = i(".simplepicker-icon-time"),
s = i(".simplepicker-time-section");
return (c = i(".simplepicker-calender-section")).style.display = "block", s.style.display = "none", r.classList.remove("active"), e.classList.add("active"), void this.toogleDisplayFade()
}
if (e.classList.contains("simplepicker-icon-time")) {
var a = i(".simplepicker-icon-calender"),
c = i(".simplepicker-calender-section");
return (s = i(".simplepicker-time-section")).style.display = "block", c.style.display = "none", a.classList.remove("active"), e.classList.add("active"), void this.toogleDisplayFade()
}
var o = i(".simplepicker-calender td.active");
if (o && (t = o.innerHTML.trim()), e.classList.contains("simplepicker-icon-next") && this.render(n.scrapeNextMonth()), e.classList.contains("simplepicker-icon-previous") && this.render(n.scrapePreviousMonth()), t) {
var l = this.findElementWithDate(t, !0);
this.selectDateElement(l)
}
}, e.prototype.initListeners = function() {
var e = this,
t = e.$simplepicker,
i = e.$timeInput,
r = e.$ok,
s = e.$cancel,
a = e.$simplepickerWrapper,
c = this;
function o() {
c.close(), c.callEvent("close", function(e) {
e()
})
}
t.addEventListener("click", function(e) {
var t = e.target,
i = t.tagName.toLowerCase();
e.stopPropagation(), "td" !== i ? "button" === i && t.classList.contains("simplepicker-icon") && c.handleIconButtonClick(t) : c.selectDateElement(t)
}), i.addEventListener("input", function(e) {
if ("" !== e.target.value) {
var t = n.formatTimeFromInputElement(e.target.value);
c.$time.innerHTML = t, c.updateSelectedDate()
}
}), r.addEventListener("click", function() {
c.close(), c.callEvent("submit", function(e) {
e(c.selectedDate, c.readableDate)
})
}), s.addEventListener("click", o), a.addEventListener("click", o)
}, e.prototype.callEvent = function(e, t) {
(this._eventHandlers[e] || []).forEach(function(e) {
t(e)
})
}, e.prototype.open = function() {
this.$simplepickerWrapper.classList.add("active")
}, e.prototype.close = function() {
this.$simplepickerWrapper.classList.remove("active")
}, e.prototype.on = function(e, t) {
var i = this._validOnListeners,
n = this._eventHandlers;
if (!i.includes(e)) throw new Error("Not a valid event!");
n[e] = n[e] || [], n[e].push(t)
}, e.prototype.toogleDisplayFade = function() {
this.$time.classList.toggle("simplepicker-fade"), this.$displayDateElements.forEach(function(e) {
e.classList.toggle("simplepicker-fade")
})
}, e
}();
e.exports = a
},
ht6X: function(e, t, i) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
}), t.htmlTemplate = `\n<div class="simplepicker-wrapper">\n <div class="simpilepicker-date-picker">\n <div class="simplepicker-day-header"></div>\n <div class="simplepicker-date-section">\n <div class="simplepicker-month-and-year"></div>\n <div class="simplepicker-date"></div>\n <div class="simplepicker-select-pane">\n <button class="simplepicker-icon simplepicker-icon-calender active" title="Select date from calender!"></button>\n <div class="simplepicker-time">12:00 PM</div>\n <button class="simplepicker-icon simplepicker-icon-time" title="Select time"></button>\n </div>\n </div>\n <div class="simplepicker-picker-section">\n <div class="simplepicker-calender-section">\n <div class="simplepicker-month-switcher simplepicker-select-pane">\n <button class="simplepicker-icon simplepicker-icon-previous"></button>\n <div class="simplepicker-selected-date"></div>\n <button class="simplepicker-icon simplepicker-icon-next"></button>\n </div>\n <div class="simplepicker-calender">\n <table>\n <thead>\n <tr>${Array.from({ length: 7 }, (x, i) => `<th>${new Date(0, 0, i).toLocaleString(LOCALES, { weekday: 'short' })}</th>`).join('')}</tr>\n </thead>\n <tbody>\n ` + function(e, t) {
for (var i = "", n = 1; n <= t; n++) i += e;
return i
}("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>", 6) + '\n </tbody>\n </table>\n </div>\n </div>\n <div class="simplepicker-time-section">\n <input type="time" value="12:00" autofocus="false">\n </div>\n </div>\n <div class="simplepicker-bottom-part">\n <button class="simplepicker-cancel-btn simplepicker-btn" title="Cancel">Cancel</button>\n <button class="simplepicker-ok-btn simplepicker-btn" title="OK">OK</button>\n </div>\n </div>\n</div>\n'
},
iyB0: function(e, t, i) {}
});
//# sourceMappingURL=simplepicker.js.map
main();
/* https://github.com/priyank-p/simplepicker/blob/master/dist/simplepicker.css */
.simplepicker-wrapper {
position: fixed;
top: 0;
left: 0;
overflow: auto;
background-color: #4c4c4c7d;
width: 100vw;
height: 100vh;
display: none
}
.simplepicker-wrapper.active {
display: block
}
.simpilepicker-date-picker {
width: 326px;
cursor: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #fff;
margin: 2% auto;
box-shadow: 1px 2px 4px .5px rgba(0, 0, 0, .22), 1px 2px 4px .5px transparent
}
.simplepicker-day-header {
color: #fff;
background-color: #016565;
text-align: center;
padding: 4px 0
}
.simplepicker-date-section {
text-align: center;
background-color: #078e8e;
color: #fff
}
.simplepicker-date-section .simplepicker-month-and-year {
font-size: 22px;
padding: 14px 0 7px;
font-weight: 200
}
.simplepicker-date-section .simplepicker-date {
font-size: 35px;
padding: 2px;
margin-bottom: 12px
}
.simplepicker-select-pane {
display: flex;
width: 100%
}
.simplepicker-select-pane .simplepicker-time,
.simplepicker-selected-date {
text-align: center;
flex: 2
}
.simplepicker-icon,
.simplepicker-selected-date,
.simplepicker-time {
border: none;
background: transparent;
padding: 2px;
margin: 4px 6px;
width: 25px;
height: 25px;
opacity: .5
}
.simplepicker-selected-date,
.simplepicker-time {
opacity: 1
}
.simplepicker-month-switcher {
margin-top: 5px
}
.simplepicker-icon:hover {
opacity: .8
}
.simplepicker-icon.active,
.simplepicker-icon:active {
opacity: 1
}
.simplepicker-icon:focus {
outline: none
}
.simplepicker-icon-next {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCI+PGxpbmUgeDE9IjUiIHkxPSIxMiIgeDI9IjE5IiB5Mj0iMTIiPjwvbGluZT48cG9seWxpbmUgcG9pbnRzPSIxMiA1IDE5IDEyIDEyIDE5Ij48L3BvbHlsaW5lPjwvc3ZnPg==)
}
.simplepicker-icon-previous {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1sZWZ0Ij48bGluZSB4MT0iMTkiIHkxPSIxMiIgeDI9IjUiIHkyPSIxMiI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjEyIDE5IDUgMTIgMTIgNSI+PC9wb2x5bGluZT48L3N2Zz4=)
}
.simplepicker-icon-calender {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jYWxlbmRhciI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iMTYiIHkxPSIyIiB4Mj0iMTYiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iMyIgeTE9IjEwIiB4Mj0iMjEiIHkyPSIxMCI+PC9saW5lPjwvc3ZnPg==)
}
.simplepicker-icon-time {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jbG9jayI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiPjwvY2lyY2xlPjxwb2x5bGluZSBwb2ludHM9IjEyIDYgMTIgMTIgMTYgMTQiPjwvcG9seWxpbmU+PC9zdmc+)
}
.simplepicker-bottom-part {
padding-top: 6px;
padding-bottom: 12px;
padding-left: 48%
}
.simplepicker-calender table {
width: 100%;
font-size: 13px
}
.simplepicker-calender thead th {
font-weight: 400;
font-size: 15px;
padding-bottom: 6px;
width: 14.28%;
height: 30px;
text-align: center
}
.simplepicker-calender tbody td {
position: relative;
text-align: center;
vertical-align: middle;
padding: 12px;
z-index: 1
}
.simplepicker-calender tbody td:after {
content: " ";
visibility: hidden;
display: block;
position: absolute;
left: 50%;
top: 50%;
height: 35px;
width: 35px;
border-radius: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, .05)
}
.simplepicker-calender tbody td:hover:after {
visibility: visible
}
.simplepicker-calender tbody td.active,
.simplepicker-calender tbody td:active {
color: #fff
}
.simplepicker-calender tbody .active:after,
.simplepicker-calender tbody td:active:after {
visibility: visible;
background-color: teal;
z-index: -1
}
.simplepicker-calender tbody td[data-empty] {
pointer-events: none
}
.simplepicker-time-section {
display: none;
height: 120px
}
.simplepicker-time-section input {
box-sizing: border-box;
width: 120px;
height: 32px;
max-width: 120px;
max-height: 32px;
padding: 4px 3px;
border: none;
border-bottom: 2px solid #ccc;
font-size: 14px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: block;
margin: 25% auto
}
.simplepicker-time-section input:focus {
outline: none;
border-bottom-color: teal
}
.simplepicker-picker-section {
width: 100%;
height: auto
}
.simplepicker-btn {
border: none;
background: transparent;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
padding: 7px 14px;
border: 1px solid #ddd;
margin: 0 5px;
border-color: #016565;
color: #016565;
font-size: 13px
}
.simplepicker-btn:active,
.simplepicker-btn:hover {
color: #fff;
background-color: #016565
}
.simplepicker-fade {
color: hsla(0, 0%, 88%, .95)
}
.simplepicker-btn,
.simplepicker-icon,
.simplepicker-wrapper {
cursor: pointer
}
<script src="https://raw.githubusercontent.com/priyank-p/simplepicker/master/dist/simplepicker.js"></script>
<div id="picker"></div>
我正在使用这个插件：https://priyank-p.github.io/simplepicker/index.html
例如，当我尝试翻译月份的名称时，它总是在日期上给我“NAN”。
有人试过翻译吗？这是在 javascript.
上执行日期时间选择器的最轻便的插件之一documentation 没有提到对语言环境的支持。
如果您想添加翻译，您可以尝试以下操作：
const LOCALES = 'es';
t.months = Array.from({ length: 12 }, (x, i) => new Date(0, i).toLocaleString(LOCALES, { month: 'long' })),
t.days = Array.from({ length: 7 }, (x, i) => new Date(0, 0, i).toLocaleString(LOCALES, { weekday: 'long' }))
`<thead>
<tr>
${
Array.from({ length: 7 }, (x, i) =>
`<th>${new Date(0, 0, i).toLocaleString(LOCALES, { weekday: 'short' })}</th>`).join('')
}
</tr>
</thead>
例子
我无法对配置进行逆向工程以传递 locales 参数，所以我暂时将其设为全局。
const LOCALES = 'es';
const main = () => {
const picker = new SimplePicker('#picker');
picker.open();
}
/* https://github.com/priyank-p/simplepicker/blob/master/dist/simplepicker.js */
var SimplePicker = function(e) {
var t = {};
function i(n) {
if (t[n]) return t[n].exports;
var r = t[n] = {
i: n,
l: !1,
exports: {}
};
return e[n].call(r.exports, r, r.exports, i), r.l = !0, r.exports
}
return i.m = e, i.c = t, i.d = function(e, t, n) {
i.o(e, t) || Object.defineProperty(e, t, {
enumerable: !0,
get: n
})
}, i.r = function(e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(e, "__esModule", {
value: !0
})
}, i.t = function(e, t) {
if (1 & t && (e = i(e)), 8 & t) return e;
if (4 & t && "object" == typeof e && e && e.__esModule) return e;
var n = Object.create(null);
if (i.r(n), Object.defineProperty(n, "default", {
enumerable: !0,
value: e
}), 2 & t && "string" != typeof e)
for (var r in e) i.d(n, r, function(t) {
return e[t]
}.bind(null, r));
return n
}, i.n = function(e) {
var t = e && e.__esModule ? function() {
return e.default
} : function() {
return e
};
return i.d(t, "a", t), t
}, i.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t)
}, i.p = "", i(i.s = 0)
}({
0: function(e, t, i) {
i("iyB0"), e.exports = i("TYVf")
},
"0DyV": function(e, t, i) {
"use strict";
function n(e, t) {
e = [].concat(e);
for (var i = 0; i < t; i++) e[i] = void 0;
return e
}
function r(e) {
var i = new Date(e.getTime()),
r = e.getFullYear(),
s = e.getMonth(),
a = {
date: i,
month: void 0
};
if (t.monthTracker.current = new Date(e.getTime()), t.monthTracker.current.setDate(1), t.monthTracker.years[r] = t.monthTracker.years[r] || {}, void 0 !== t.monthTracker.years[r][s]) return a.month = t.monthTracker.years[r][s], a;
(e = new Date(e.getTime())).setDate(1), t.monthTracker.years[r][s] = [];
for (var c = t.monthTracker.years[r][s], o = 0; e.getMonth() === s;) {
var l = e.getDate(),
p = e.getDay();
1 === l && (c[o] = n([], p)), c[o] = c[o] || [], c[o][p] = l, 6 === p && o++, e.setDate(e.getDate() + 1)
}
var d = 5;
void 0 === c[5] && (d = 4, c[5] = n([], 7));
var m = c[d].length;
if (m < 7) {
var u = c[d].concat(n([], 7 - m));
c[d] = u
}
return a.month = c, a
}
Object.defineProperty(t, "__esModule", {
value: !0
}), t.monthTracker = {
years: {}
}, t.months = Array.from({ length: 12 }, (x, i) => new Date(0, i).toLocaleString(LOCALES, { month: 'long' })), t.days = Array.from({ length: 7 }, (x, i) => new Date(0, 0, i).toLocaleString(LOCALES, { weekday: 'long' })), t.scrapeMonth = r, t.scrapePreviousMonth = function() {
var e = t.monthTracker.current;
if (!e) throw Error("scrapePrevoisMonth called without setting monthTracker.current!");
return e.setMonth(e.getMonth() - 1), r(e)
}, t.scrapeNextMonth = function() {
var e = t.monthTracker.current;
if (!e) throw Error("scrapePrevoisMonth called without setting monthTracker.current!");
return e.setMonth(e.getMonth() + 1), r(e)
};
var s = {
st: [1, 21, 31],
nd: [2, 22],
rd: [3, 23]
};
t.getDisplayDate = function(e) {
var t = e.getDate();
return -1 !== s.st.indexOf(t) ? t + "st" : -1 !== s.nd.indexOf(t) ? t + "nd" : -1 !== s.rd.indexOf(t) ? t + "rd" : t + "th"
}, t.formatTimeFromInputElement = function(e) {
var t = "",
i = e.split(":"),
n = i[0],
r = (n = +n) >= 12;
return r && n > 12 && (n -= 12), r || 0 !== n || (n = 12), t += n < 10 ? "0" + n : n, t += ":" + i[1] + " ", t += r ? "PM" : "AM"
}
},
TYVf: function(e, t, i) {
"use strict";
var n = i("0DyV"),
r = i("ht6X"),
s = new Date,
a = function() {
function e(e, t) {
var i = void 0,
n = t;
if ("string" == typeof e) {
var r = document.querySelector(e);
if (null === r) throw new Error("Invalid selector passed to SimplePicker!");
i = r
} else e instanceof HTMLElement ? i = e : "object" == typeof e && (n = e);
i || (i = document.querySelector("body")), n || (n = {}), this.selectedDate = new Date, this.injectTemplate(i), this.init(i, n), this.initListeners(), this._eventHandlers = {}, this._validOnListeners = ["submit", "close"]
}
return e.prototype.initElMethod = function(e) {
this.$ = function(t) {
return e.querySelector(t)
}, this.$$ = function(t) {
return e.querySelectorAll(t)
}
}, e.prototype.init = function(e, t) {
this.$simplepickerWrapper = e.querySelector(".simplepicker-wrapper"), this.initElMethod(this.$simplepickerWrapper);
var i = this.$,
r = this.$$;
this.$simplepicker = i(".simpilepicker-date-picker"), this.$trs = r(".simplepicker-calender tbody tr"), this.$tds = r(".simplepicker-calender tbody td"), this.$headerMonthAndYear = i(".simplepicker-month-and-year"), this.$monthAndYear = i(".simplepicker-selected-date"), this.$date = i(".simplepicker-date"), this.$day = i(".simplepicker-day-header"), this.$time = i(".simplepicker-time"), this.$timeInput = i(".simplepicker-time-section input"), this.$timeSectionIcon = i(".simplepicker-icon-time"), this.$cancel = i(".simplepicker-cancel-btn"), this.$ok = i(".simplepicker-ok-btn"), this.$displayDateElements = [this.$day, this.$headerMonthAndYear, this.$date], this.$time.classList.add("simplepicker-fade"), this.render(n.scrapeMonth(s)), t = t || {}, this.opts = t, this.reset(s), void 0 !== t.zIndex && (this.$simplepickerWrapper.style.zIndex = t.zIndex.toString()), t.disableTimeSection && this.disableTimeSection(), t.compactMode && this.compactMode()
}, e.prototype.reset = function(e) {
var t = e || new Date;
this.render(n.scrapeMonth(t));
var i = t.toTimeString().split(" ")[0].replace(/\:\d\d$/, "");
this.$timeInput.value = i, this.$time.innerText = n.formatTimeFromInputElement(i);
var r = t.getDate().toString(),
s = this.findElementWithDate(r);
s.classList.contains("active") || (this.selectDateElement(s), this.updateDateComponents(t))
}, e.prototype.compactMode = function() {
this.$date.style.display = "none"
}, e.prototype.disableTimeSection = function() {
this.$timeSectionIcon.style.visibility = "hidden"
}, e.prototype.enableTimeSection = function() {
this.$timeSectionIcon.style.visibility = "visible"
}, e.prototype.injectTemplate = function(e) {
var t = document.createElement("template");
t.innerHTML = r.htmlTemplate, e.appendChild(t.content.cloneNode(!0))
}, e.prototype.clearRows = function() {
this.$tds.forEach(function(e) {
e.innerHTML = "", e.classList.remove("active")
})
}, e.prototype.updateDateComponents = function(e) {
var t = n.days[e.getDay()],
i = n.months[e.getMonth()] + " " + e.getFullYear();
this.$headerMonthAndYear.innerHTML = i, this.$monthAndYear.innerHTML = i, this.$day.innerHTML = t, this.$date.innerHTML = n.getDisplayDate(e)
}, e.prototype.render = function(e) {
var t = this.$$,
i = this.$trs,
n = e.month,
r = e.date;
this.clearRows(), n.forEach(function(e, t) {
var n = i[t].children;
e.forEach(function(e, t) {
var i = n[t];
e ? (i.removeAttribute("data-empty"), i.innerHTML = e) : i.setAttribute("data-empty", "")
})
});
var s = t("table tbody tr:last-child td"),
a = !0;
s.forEach(function(e) {
void 0 === e.dataset.empty && (a = !1)
});
var c = s[0].parentElement;
c.style.display = a && c ? "none" : "table-row", this.updateDateComponents(r)
}, e.prototype.updateSelectedDate = function(e) {
var t, i = this.$monthAndYear,
r = this.$time;
this.$date;
t = e ? e.innerHTML.trim() : this.$date.innerHTML.replace(/[a-z]+/, "");
var s = i.innerHTML.split(" "),
a = s[0],
c = s[1],
o = n.months.indexOf(a),
l = r.innerHTML.split(":"),
p = +l[0],
d = l[1].split(" "),
m = d[0],
u = d[1];
"AM" === u && 12 == p && (p = 0), "PM" === u && p < 12 && (p += 12);
var h = new Date(+c, +o, +t, +p, +m);
this.selectedDate = h;
var v = t + " ";
v += i.innerHTML.trim() + " ", v += r.innerHTML.trim(), this.readableDate = v.replace(/^\d+/, h.getDate().toString())
}, e.prototype.selectDateElement = function(e) {
var t = this.$(".simplepicker-calender tbody .active");
e.classList.add("active"), t && t.classList.remove("active"), this.updateSelectedDate(e), this.updateDateComponents(this.selectedDate)
}, e.prototype.findElementWithDate = function(e, t) {
var i, n;
return void 0 === t && (t = !1), this.$tds.forEach(function(t) {
var r = t.innerHTML.trim();
r === e && (i = t), "" !== r && (n = t)
}), void 0 === i && t && (i = n), i
}, e.prototype.handleIconButtonClick = function(e) {
var t, i = this.$;
if (e.classList.contains("simplepicker-icon-calender")) {
var r = i(".simplepicker-icon-time"),
s = i(".simplepicker-time-section");
return (c = i(".simplepicker-calender-section")).style.display = "block", s.style.display = "none", r.classList.remove("active"), e.classList.add("active"), void this.toogleDisplayFade()
}
if (e.classList.contains("simplepicker-icon-time")) {
var a = i(".simplepicker-icon-calender"),
c = i(".simplepicker-calender-section");
return (s = i(".simplepicker-time-section")).style.display = "block", c.style.display = "none", a.classList.remove("active"), e.classList.add("active"), void this.toogleDisplayFade()
}
var o = i(".simplepicker-calender td.active");
if (o && (t = o.innerHTML.trim()), e.classList.contains("simplepicker-icon-next") && this.render(n.scrapeNextMonth()), e.classList.contains("simplepicker-icon-previous") && this.render(n.scrapePreviousMonth()), t) {
var l = this.findElementWithDate(t, !0);
this.selectDateElement(l)
}
}, e.prototype.initListeners = function() {
var e = this,
t = e.$simplepicker,
i = e.$timeInput,
r = e.$ok,
s = e.$cancel,
a = e.$simplepickerWrapper,
c = this;
function o() {
c.close(), c.callEvent("close", function(e) {
e()
})
}
t.addEventListener("click", function(e) {
var t = e.target,
i = t.tagName.toLowerCase();
e.stopPropagation(), "td" !== i ? "button" === i && t.classList.contains("simplepicker-icon") && c.handleIconButtonClick(t) : c.selectDateElement(t)
}), i.addEventListener("input", function(e) {
if ("" !== e.target.value) {
var t = n.formatTimeFromInputElement(e.target.value);
c.$time.innerHTML = t, c.updateSelectedDate()
}
}), r.addEventListener("click", function() {
c.close(), c.callEvent("submit", function(e) {
e(c.selectedDate, c.readableDate)
})
}), s.addEventListener("click", o), a.addEventListener("click", o)
}, e.prototype.callEvent = function(e, t) {
(this._eventHandlers[e] || []).forEach(function(e) {
t(e)
})
}, e.prototype.open = function() {
this.$simplepickerWrapper.classList.add("active")
}, e.prototype.close = function() {
this.$simplepickerWrapper.classList.remove("active")
}, e.prototype.on = function(e, t) {
var i = this._validOnListeners,
n = this._eventHandlers;
if (!i.includes(e)) throw new Error("Not a valid event!");
n[e] = n[e] || [], n[e].push(t)
}, e.prototype.toogleDisplayFade = function() {
this.$time.classList.toggle("simplepicker-fade"), this.$displayDateElements.forEach(function(e) {
e.classList.toggle("simplepicker-fade")
})
}, e
}();
e.exports = a
},
ht6X: function(e, t, i) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
}), t.htmlTemplate = `\n<div class="simplepicker-wrapper">\n <div class="simpilepicker-date-picker">\n <div class="simplepicker-day-header"></div>\n <div class="simplepicker-date-section">\n <div class="simplepicker-month-and-year"></div>\n <div class="simplepicker-date"></div>\n <div class="simplepicker-select-pane">\n <button class="simplepicker-icon simplepicker-icon-calender active" title="Select date from calender!"></button>\n <div class="simplepicker-time">12:00 PM</div>\n <button class="simplepicker-icon simplepicker-icon-time" title="Select time"></button>\n </div>\n </div>\n <div class="simplepicker-picker-section">\n <div class="simplepicker-calender-section">\n <div class="simplepicker-month-switcher simplepicker-select-pane">\n <button class="simplepicker-icon simplepicker-icon-previous"></button>\n <div class="simplepicker-selected-date"></div>\n <button class="simplepicker-icon simplepicker-icon-next"></button>\n </div>\n <div class="simplepicker-calender">\n <table>\n <thead>\n <tr>${Array.from({ length: 7 }, (x, i) => `<th>${new Date(0, 0, i).toLocaleString(LOCALES, { weekday: 'short' })}</th>`).join('')}</tr>\n </thead>\n <tbody>\n ` + function(e, t) {
for (var i = "", n = 1; n <= t; n++) i += e;
return i
}("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>", 6) + '\n </tbody>\n </table>\n </div>\n </div>\n <div class="simplepicker-time-section">\n <input type="time" value="12:00" autofocus="false">\n </div>\n </div>\n <div class="simplepicker-bottom-part">\n <button class="simplepicker-cancel-btn simplepicker-btn" title="Cancel">Cancel</button>\n <button class="simplepicker-ok-btn simplepicker-btn" title="OK">OK</button>\n </div>\n </div>\n</div>\n'
},
iyB0: function(e, t, i) {}
});
//# sourceMappingURL=simplepicker.js.map
main();
/* https://github.com/priyank-p/simplepicker/blob/master/dist/simplepicker.css */
.simplepicker-wrapper {
position: fixed;
top: 0;
left: 0;
overflow: auto;
background-color: #4c4c4c7d;
width: 100vw;
height: 100vh;
display: none
}
.simplepicker-wrapper.active {
display: block
}
.simpilepicker-date-picker {
width: 326px;
cursor: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #fff;
margin: 2% auto;
box-shadow: 1px 2px 4px .5px rgba(0, 0, 0, .22), 1px 2px 4px .5px transparent
}
.simplepicker-day-header {
color: #fff;
background-color: #016565;
text-align: center;
padding: 4px 0
}
.simplepicker-date-section {
text-align: center;
background-color: #078e8e;
color: #fff
}
.simplepicker-date-section .simplepicker-month-and-year {
font-size: 22px;
padding: 14px 0 7px;
font-weight: 200
}
.simplepicker-date-section .simplepicker-date {
font-size: 35px;
padding: 2px;
margin-bottom: 12px
}
.simplepicker-select-pane {
display: flex;
width: 100%
}
.simplepicker-select-pane .simplepicker-time,
.simplepicker-selected-date {
text-align: center;
flex: 2
}
.simplepicker-icon,
.simplepicker-selected-date,
.simplepicker-time {
border: none;
background: transparent;
padding: 2px;
margin: 4px 6px;
width: 25px;
height: 25px;
opacity: .5
}
.simplepicker-selected-date,
.simplepicker-time {
opacity: 1
}
.simplepicker-month-switcher {
margin-top: 5px
}
.simplepicker-icon:hover {
opacity: .8
}
.simplepicker-icon.active,
.simplepicker-icon:active {
opacity: 1
}
.simplepicker-icon:focus {
outline: none
}
.simplepicker-icon-next {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCI+PGxpbmUgeDE9IjUiIHkxPSIxMiIgeDI9IjE5IiB5Mj0iMTIiPjwvbGluZT48cG9seWxpbmUgcG9pbnRzPSIxMiA1IDE5IDEyIDEyIDE5Ij48L3BvbHlsaW5lPjwvc3ZnPg==)
}
.simplepicker-icon-previous {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1sZWZ0Ij48bGluZSB4MT0iMTkiIHkxPSIxMiIgeDI9IjUiIHkyPSIxMiI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjEyIDE5IDUgMTIgMTIgNSI+PC9wb2x5bGluZT48L3N2Zz4=)
}
.simplepicker-icon-calender {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jYWxlbmRhciI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iMTYiIHkxPSIyIiB4Mj0iMTYiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iMyIgeTE9IjEwIiB4Mj0iMjEiIHkyPSIxMCI+PC9saW5lPjwvc3ZnPg==)
}
.simplepicker-icon-time {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jbG9jayI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiPjwvY2lyY2xlPjxwb2x5bGluZSBwb2ludHM9IjEyIDYgMTIgMTIgMTYgMTQiPjwvcG9seWxpbmU+PC9zdmc+)
}
.simplepicker-bottom-part {
padding-top: 6px;
padding-bottom: 12px;
padding-left: 48%
}
.simplepicker-calender table {
width: 100%;
font-size: 13px
}
.simplepicker-calender thead th {
font-weight: 400;
font-size: 15px;
padding-bottom: 6px;
width: 14.28%;
height: 30px;
text-align: center
}
.simplepicker-calender tbody td {
position: relative;
text-align: center;
vertical-align: middle;
padding: 12px;
z-index: 1
}
.simplepicker-calender tbody td:after {
content: " ";
visibility: hidden;
display: block;
position: absolute;
left: 50%;
top: 50%;
height: 35px;
width: 35px;
border-radius: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, .05)
}
.simplepicker-calender tbody td:hover:after {
visibility: visible
}
.simplepicker-calender tbody td.active,
.simplepicker-calender tbody td:active {
color: #fff
}
.simplepicker-calender tbody .active:after,
.simplepicker-calender tbody td:active:after {
visibility: visible;
background-color: teal;
z-index: -1
}
.simplepicker-calender tbody td[data-empty] {
pointer-events: none
}
.simplepicker-time-section {
display: none;
height: 120px
}
.simplepicker-time-section input {
box-sizing: border-box;
width: 120px;
height: 32px;
max-width: 120px;
max-height: 32px;
padding: 4px 3px;
border: none;
border-bottom: 2px solid #ccc;
font-size: 14px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: block;
margin: 25% auto
}
.simplepicker-time-section input:focus {
outline: none;
border-bottom-color: teal
}
.simplepicker-picker-section {
width: 100%;
height: auto
}
.simplepicker-btn {
border: none;
background: transparent;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
padding: 7px 14px;
border: 1px solid #ddd;
margin: 0 5px;
border-color: #016565;
color: #016565;
font-size: 13px
}
.simplepicker-btn:active,
.simplepicker-btn:hover {
color: #fff;
background-color: #016565
}
.simplepicker-fade {
color: hsla(0, 0%, 88%, .95)
}
.simplepicker-btn,
.simplepicker-icon,
.simplepicker-wrapper {
cursor: pointer
}
<script src="https://raw.githubusercontent.com/priyank-p/simplepicker/master/dist/simplepicker.js"></script>
<div id="picker"></div>