### 回答1：
你可以使用 JavaScript 和 HTML 来创建一个只显示
年月选项的
日历选择器。以下是一个简单的示例：
HTML:
```html
<input type="text" id="datePicker" placeholder="Select Month and Year"/>
<div id="calendar" style="display:none"></div>
```
JavaScript:
```javascript
// 获取日期
选择器和
日历元素
const datePicker = document.getElementById("datePicker");
const calendar = document.getElementById("calendar");
// 添加点击事件监听器
datePicker.addEventListener("click", () => {
// 显示
日历元素
calendar.style.display = "block";
});
// 创建
日历元素
const createCalendar = () => {
const today = new Date();
let year = today.getFullYear();
let month = today.getMonth() + 1;
// 创建年份和月份下拉列表
const yearSelect = document.createElement("select");
const monthSelect = document.createElement("select");
// 添加选项到年份和月份下拉列表中
for (let i = year - 10; i <= year + 10; i++) {
const option = document.createElement("option");
option.value = i;
option.text = i;
yearSelect.appendChild(option);
}
for (let i = 1; i <= 12; i++) {
const option = document.createElement("option");
option.value = i;
option.text = i;
monthSelect.appendChild(option);
}
// 设置默认选中的年份和月份
yearSelect.value = year;
monthSelect.value = month;
// 添加年份和月份下拉列表到
日历元素中
calendar.appendChild(yearSelect);
calendar.appendChild(monthSelect);
// 添加年份和月份下拉列表的 change 事件监听器
yearSelect.addEventListener("change", () => {
year = yearSelect.value;
updateCalendar();
});
monthSelect.addEventListener("change", () => {
month = monthSelect.value;
updateCalendar();
});
// 更新
日历元素中的年份和月份
const updateCalendar = () => {
const date = new Date(year, month - 1);
yearSelect.value = year;
monthSelect.value = month;
datePicker.value = date.toLocaleString("default", { month: "long", year: "numeric" });
};
// 更新
日历元素中的年份和月份
updateCalendar();
};
// 创建
日历元素
createCalendar();
```
这个示例会创建一个文本框和一个隐藏的
日历元素。当用户点击文本框时，
日历元素会显示出来，用户可以
选择年份和月份。选中后，文本框中会显示出
选择的年份和月份。
### 回答2：
js日历选择只显示
年月选项可以通过以下步骤
实现。
1. 首先，在HTML中创建一个文本框作为
日历选择的输入框。例如：
```html
<input type="text" id="calendarInput" readonly="readonly">
```
2. 接下来，在JavaScript中获取该输入框元素，并为其添加点击事件处理程序。例如：
```javascript
var input = document.getElementById("calendarInput");
input.addEventListener("click", function() {
// 打开
日历选择器
});
```
3. 在点击事件处理程序中，创建一个自定义的
日历选择器，并使其只显示
年月选项。这可以通过创建一个包含年份和月份下拉列表的弹出框来
实现。
4. 弹出框的布局可以通过动态创建HTML元素来
实现。例如，使用document.createElement方法创建div和select元素，然后将它们添加到页面中。例如：
```javascript
var popup = document.createElement("div");
popup.classList.add("calendar-popup");
var yearSelect = document.createElement("select");
// 添加年份选项
var monthSelect = document.createElement("select");
// 添加月份选项
// 将select元素添加到弹出框中
// 将弹出框添加到页面中
```
5. 设置年份和月份的选项值。通过循环添加选项到年份和月份下拉列表中，这里需要使用for循环或者forEach方法来遍历年份和月份的数据。例如：
```javascript
for (var i = startYear; i <= endYear; i++) {
var option = new Option(i, i);
yearSelect.appendChild(option);
}
```
6. 最后，在点击年份和月份选项后更新输入框的值，并关闭弹出框。可以使用change事件来监听年份和月份
选择的变化。例如：
```javascript
yearSelect.addEventListener("change", function() {
// 更新输入框的值
// 关闭弹出框
});
```
7. 完成上述步骤后，用户点击输入框后将会弹出自定义的
日历选择器，其中只显示年份和月份选项。用户
选择年份和月份后，输入框的值将会更新为
选择的年份和月份，弹出框也会关闭。
### 回答3：
JS 日历选择只显示
年月选项可以通过以下方式
实现：
1.
选择一个合适的
日历插件：可以使用一些开源插件，比如DatePicker或者Flatpickr等。这些插件通常支持自定义设置，可以满足我们只显示
年月选项的需求。
2. 设置插件选项：在设置插件的选项时，根据需求
选择只显示
年月选项。具体的设置方法可以查看插件的官方文档或者示例代码。
3. 调用插件生成
日历：在网页中调用插件的相关方法或者函数，生成只显示
年月选项的
日历。通常可以通过在输入框中绑定插件的函数来
实现，当用户点击输入框时弹出
日历。
4. 处理用户
选择：当用户在
日历中
选择年月后，可以通过插件提供的回调函数来获取用户
选择的值。根据需要，可以将用户
选择的值进行进一步处理。
需要注意的是，具体的
实现方式可能会根据所选用的插件有所不同。部分插件可能会提供特定的设置选项来
实现只显示
年月选项。因此，在具体使用某个插件时，还需要参考该插件的官方文档或示例代码，根据插件的特性进行相应的设置和调用。
这篇博客介绍了如何使用纯JavaScript实现单独的年月日历选择功能。作者分享了一个简单的Demo，虽然代码基础，但希望能对初学者有所帮助。内容包括HTML和JS代码示例。
最低0.47元/天 解锁文章
1178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
