javascript - 如何在我的日历中写下所选日期的文本？
问题描述
我刚开始学习 Javascript，所以我提前为我的无知道歉。我已将日历复制粘贴到我的网站中，并且我想制作一个文本来写下已在日历中选择的日期。我真的不知道从哪里开始，或者是否有一个简单的解决方案。我希望我不要太雄心勃勃:)
这是日历的代码（从 js 文件导入）：
return function(t) {
function e(t, e, a) {
t && (t.attachEvent ? t.attachEvent("on" + e, a) : t.addEventListener(e, a))
}
function a(t, e, a) {
t && (t.detachEvent ? t.detachEvent("on" + e, a) : t.removeEventListener(e, a))
}
let n = {
selector: null,
datesFilter: !1,
pastDates: !0,
availableWeekDays: [],
availableDates: [],
date: new Date,
todaysDate: new Date,
button_prev: null,
button_next: null,
month: null,
month_label: null,
onSelect: (t, e) => {},
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
shortWeekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
};
for (let e in t) n.hasOwnProperty(e) && (n[e] = t[e]);
let l = document.querySelector(n.selector);
if (!l) return;
const d = function(t) {
let e = document.createElement("div"),
a = document.createElement("span");
a.innerHTML = t.getDate(), e.className = "vanilla-calendar-date", e.setAttribute("data-calendar-date", t);
let l = n.availableWeekDays.filter(e => e.day === t.getDay() || e.day === function(t) {
return ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"][t]
}(t.getDay())),
d = n.availableDates.filter(e => e.date === t.getFullYear() + "-" + String(t.getMonth() + 1).padStart("2", 0) + "-" + String(t.getDate()).padStart("2", 0));
1 === t.getDate() && (e.style.marginLeft = 14.28 * t.getDay() + "%"), n.date.getTime() <= n.todaysDate.getTime() - 1 && !n.pastDates ? e.classList.add("vanilla-calendar-date--disabled") : n.datesFilter ? l.length ? (e.classList.add("vanilla-calendar-date--active"), e.setAttribute("data-calendar-data", JSON.stringify(l[0])), e.setAttribute("data-calendar-status", "active")) : d.length ? (e.classList.add("vanilla-calendar-date--active"), e.setAttribute("data-calendar-data", JSON.stringify(d[0])), e.setAttribute("data-calendar-status", "active")) : e.classList.add("vanilla-calendar-date--disabled") : (e.classList.add("vanilla-calendar-date--active"), e.setAttribute("data-calendar-status", "active")), t.toString() === n.todaysDate.toString() && e.classList.add("vanilla-calendar-date--today"), e.appendChild(a), n.month.appendChild(e)
},
r = function() {
l.querySelectorAll("[data-calendar-status=active]").forEach(t => {
t.addEventListener("click", function() {
document.querySelectorAll(".vanilla-calendar-date--selected").forEach(t => {
t.classList.remove("vanilla-calendar-date--selected")
});
let t = this.dataset,
e = {};
t.calendarDate && (e.date = t.calendarDate), t.calendarData && (e.data = JSON.parse(t.calendarData)), n.onSelect(e, this), this.classList.add("vanilla-calendar-date--selected")
})
})
},
s = function() {
o();
let t = n.date.getMonth();
for (; n.date.getMonth() === t;) d(n.date), n.date.setDate(n.date.getDate() + 1);
n.date.setDate(1), n.date.setMonth(n.date.getMonth() - 1), n.month_label.innerHTML = n.months[n.date.getMonth()] + " " + n.date.getFullYear(), r()
},
i = function() {
n.date.setMonth(n.date.getMonth() - 1), s()
},
c = function() {
n.date.setMonth(n.date.getMonth() + 1), s()
},
o = function() {
n.month.innerHTML = ""
};
this.init = function() {
document.querySelector(n.selector).innerHTML = '\n <div class="vanilla-calendar-header">\n <button type="button" class="vanilla-calendar-btn" data-calendar-toggle="previous"><svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></button>\n <div class="vanilla-calendar-header__label" data-calendar-label="month"></div>\n <button type="button" class="vanilla-calendar-btn" data-calendar-toggle="next"><svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></button>\n </div>\n <div class="vanilla-calendar-week"></div>\n <div class="vanilla-calendar-body" data-calendar-area="month"></div>\n ', n.button_prev = document.querySelector(n.selector + " [data-calendar-toggle=previous]"), n.button_next = document.querySelector(n.selector + " [data-calendar-toggle=next]"), n.month = document.querySelector(n.selector + " [data-calendar-area=month]"), n.month_label = document.querySelector(n.selector + " [data-calendar-label=month]"), n.date.setDate(1), s(), document.querySelector(`${n.selector} .vanilla-calendar-week`).innerHTML = `\n <span>${n.shortWeekday[0]}</span>\n <span>${n.shortWeekday[1]}</span>\n <span>${n.shortWeekday[2]}</span>\n <span>${n.shortWeekday[3]}</span>\n <span>${n.shortWeekday[4]}</span>\n <span>${n.shortWeekday[5]}</span>\n <span>${n.shortWeekday[6]}</span>\n `, e(n.button_prev, "click", i), e(n.button_next, "click", c)
}, this.destroy = function() {
a(n.button_prev, "click", i), a(n.button_next, "click", c), o(), document.querySelector(n.selector).innerHTML = ""
}, this.reset = function() {
this.destroy(), this.init()
}, this.set = function(t) {
for (let e in t) n.hasOwnProperty(e) && (n[e] = t[e]);
s()
}, this.init()
}
}();
window.VanillaCalendar = VanillaCalendar;
这是html文件中的jscode：
<script>
let pastDates = true, availableDates = false, availableWeekDays = false
let calendar = new VanillaCalendar({
selector: "#myCalendar",
months: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
shortWeekday: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
onSelect: (data, elem) => {
console.log(data, elem)
}
})
let btnPastDates = document.querySelector('[name=pastDates]')
btnPastDates.addEventListener('click', () => {
pastDates = !pastDates
calendar.set({pastDates: pastDates})
btnPastDates.innerText = `${(pastDates ? 'Disable' : 'Enable')} past dates`
})
let btnAvailableDates = document.querySelector('[name=availableDates]')
btnAvailableDates.addEventListener('click', () => {
availableDates = !availableDates
btnAvailableDates.innerText = `${(availableDates ? 'Clear available dates' : 'Set available dates')}`
if (!availableDates) {
calendar.set({availableDates: [], datesFilter: false})
return
}
let dates = () => {
let result = []
for (let i = 1; i < 15; ++i) {
if (i % 2) continue
let date = new Date(new Date().getTime() + (60 * 60 * 24 * 1000) * i)
result.push({date: `${String(date.getFullYear())}-${String(date.getMonth() + 1).padStart(2, 0)}-${String(date.getDate()).padStart(2, 0)}`})
}
return result
}
calendar.set({availableDates: dates(), availableWeekDays: [], datesFilter: true})
})
let btnAvailableWeekDays = document.querySelector('[name=availableWeekDays]')
btnAvailableWeekDays.addEventListener('click', () => {
availableWeekDays = !availableWeekDays
btnAvailableWeekDays.innerText = `${(availableWeekDays ? 'Clear available weekdays' : 'Set available weekdays')}`
if (!availableWeekDays) {
calendar.set({availableWeekDays: [], datesFilter: false})
return
}
let days = [{
day: 'monday'
}, {
day: 'tuesday'
}, {
day: 'wednesday'
}, {
day: 'friday'
}]
calendar.set({availableWeekDays: days, availableDates: [], datesFilter: true})
})
</script>
解决方案
推荐阅读
- flutter - Unwanted animation while scrolling down the ListView.builder in Flutter
- html - Display Ninja Tables meta data at the top of the table? Or is there a way to hide the table completely until fully loaded?
- javascript - Reactjs 状态不渲染以更新 DOM
- botframework - Teams 应用程序未显示在我的移动设备上
- google-cloud-platform - 需要使用 gcloud 或 shell 脚本从 excel 中读取值
- python - 如何抑制 QWebEngineView 错误的控制台输出？
- java - IntelliJ 无法识别 Scala 中的 TypeTag
- node.js - 在 MERN 堆栈中以 base64 格式存储图像
- php - 未定义索引：用户名、密码 PHP
- linux - 如何在没有 STDIN 和 STDOUT 的情况下从 c 执行 bash 脚本