【js】日期控件的实现

需求:通过日期控件实现只显示年月

效果如下图:
在这里插入图片描述

日期控件使用的是My97DatePicker
可以从官网下载:http://www.my97.net/,或者:
链接:https://pan.baidu.com/s/1KRXSjfqpyguZ67vBrOWM8g
提取码:aq18

使用步骤:

1、解压后将其复制到项目中,在jsp中进行引用
注:src="My97DatePicker/WdatePicker.js"需要根据实际情况改变路径。

<script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>

2、之后只需要在input中加入WdatePicker({dateFmt:‘yyyy-MM’}),即可正常使用 例:

 <input id="test"   onclick="WdatePicker({dateFmt:'yyyy-MM'})" placeholder="点击选择年月">

3、对月份添加限制,只能选择前12个月,增加如下属性:

<input id="report_date" onclick="WdatePicker({dateFmt:'yyyy-MM', minDate:'{%y-1}-%M',maxDate:'%y-%M' })" placeholder="点击选择年月">

minDate:‘{%y-1}-%M’设置最小日期只能向前选择12个月
maxDate:’%y-%M’设置最大日期只能到今天,再往前就无法选择了。

参考链接:https://blog.csdn.net/qq_43948440/article/details/110439071

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP 中实现日期控件,可以使用第三方框架或者自己编写 JavaScript 实现。以下是一个简单的示例代码: 1. 借助第三方框架 使用第三方框架可以简化日期控件实现过程,常见的框架有 jQuery UI、Bootstrap Datepicker 等。以 jQuery UI 为例: 首先,在 jsp 页面中引入 jQuery 库和 jQuery UI 库: ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> ``` 然后,在需要使用日期控件的 input 标签中添加以下代码: ``` <input type="text" id="datepicker"> ``` 最后,在 JavaScript实现日期控件: ``` $( function() { $( "#datepicker" ).datepicker(); } ); ``` 2. 自己编写 JavaScript 实现 如果不想使用第三方框架,也可以自己编写 JavaScript 实现。以下是一个简单的示例代码: 在 jsp 页面中添加以下代码: ``` <input type="text" id="datepicker"> ``` 在 JavaScript实现日期控件: ``` var datepicker = document.getElementById("datepicker"); datepicker.addEventListener("focus", function() { var datePickerDiv = document.createElement("div"); datePickerDiv.setAttribute("id", "datePickerDiv"); var currentDate = new Date(); var currentYear = currentDate.getFullYear(); var currentMonth = currentDate.getMonth() + 1; var currentDay = currentDate.getDate(); var yearSelect = "<select id='yearSelect'>"; for (var i = currentYear - 10; i <= currentYear + 10; i++) { yearSelect += "<option value='" + i + "'>" + i + "</option>"; } yearSelect += "</select>"; var monthSelect = "<select id='monthSelect'>"; for (var i = 1; i <= 12; i++) { var monthText = i < 10 ? "0" + i : i; monthSelect += "<option value='" + i + "'>" + monthText + "</option>"; } monthSelect += "</select>"; var daySelect = "<select id='daySelect'>"; for (var i = 1; i <= 31; i++) { var dayText = i < 10 ? "0" + i : i; daySelect += "<option value='" + i + "'>" + dayText + "</option>"; } daySelect += "</select>"; datePickerDiv.innerHTML = yearSelect + monthSelect + daySelect; datePickerDiv.style.position = "absolute"; datePickerDiv.style.left = datepicker.offsetLeft + "px"; datePickerDiv.style.top = datepicker.offsetTop + datepicker.offsetHeight + "px"; datePickerDiv.style.backgroundColor = "#fff"; datePickerDiv.style.border = "1px solid #ccc"; datePickerDiv.style.padding = "5px"; document.body.appendChild(datePickerDiv); var yearSelect = document.getElementById("yearSelect"); var monthSelect = document.getElementById("monthSelect"); var daySelect = document.getElementById("daySelect"); yearSelect.value = currentYear; monthSelect.value = currentMonth; daySelect.value = currentDay; yearSelect.addEventListener("change", function() { setDays(); }); monthSelect.addEventListener("change", function() { setDays(); }); function setDays() { var year = yearSelect.value; var month = monthSelect.value; var day = daySelect.value; var daysInMonth = new Date(year, month, 0).getDate(); daySelect.innerHTML = ""; for (var i = 1; i <= daysInMonth; i++) { var dayText = i < 10 ? "0" + i : i; daySelect.innerHTML += "<option value='" + i + "'>" + dayText + "</option>"; } if (day > daysInMonth) { daySelect.value = daysInMonth; } else { daySelect.value = day; } } function hideDatePicker() { datePickerDiv.parentNode.removeChild(datePickerDiv); } yearSelect.focus(); yearSelect.select(); yearSelect.addEventListener("blur", function() { hideDatePicker(); }); monthSelect.addEventListener("blur", function() { hideDatePicker(); }); daySelect.addEventListener("blur", function() { hideDatePicker(); }); }); ``` 以上代码实现了一个简单的日期控件,包含年、月、日三个下拉框,用户选择日期后会自动填充到 input 标签中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值