查询百度多天无果,大脑灵光一现,可以给日期输入框下面的今天按钮添加点击事件,手动赋值给日期输入框,这样可以实现点击今天自动填充日期
当存在多个日期输入框,点击之后的赋值就会成为问题,官方文档中也没有什么好的事件可以解决,下面是官方给出的日期输入框事件,只有一个,就很离谱。
突然看到方法是扩展自combo(自定义下拉框),哪事件是不是也是扩展自combo(自定义下拉框)(也不知道为什么文档中没有写)。下面是combo(自定义下拉框)的事件,下拉面板显示的时候触发(这个事件刚好可以配合点击事件来完成日期输入框分辨功能)。下面来实现
问题展示:点击今天没有反应,日期不自动填充(点击今天没有反应,日期不自动填充。自己傻傻的以为是bug,实际上是点击今天只是跳转到日期上来,翻到其他月份点击今天就会跳转到当前月份选中今天,如下图一样今天是20211203)
第一步
声明全局变量
var dateBox;
第二步
给需要点击今天自动填充的日期输入框添加onShowPanel事件(当下拉面板显示的时候触发)
下代码为前端页面
<div style="margin-bottom: 15px;">
<label for="startTime">计划下达起止日期</label>
<input id="startTime" name="startTime" class="easyui-datebox" editable="false" style="height:22px;width: 152px;">
<span style="display: inline-block;"></span>
<label for="endTime">----</label>
<input id="endTime" name="endTime" class="easyui-datebox" editable="false" style="height:22px;width: 152px;">
</div>
下代码为前端js
$("#endTime").datebox({
onShowPanel: function () {
dateBox = $("#endTime")
}
})
$("#startTime").datebox({
onShowPanel: function () {
dateBox = $("#startTime")
}
})
第三步
给日期输入框今天按钮添加点击事件
所用事件如下图(第一张事件来自combo事件,第二张事件来自datebox事件)
$(".datebox-current").click(function (param) {
var date=_this.formatTime();
dateBox.datebox("setValue",date);
dateBox.datebox("hidePanel");
});
第四步
上效果图
点击今天
完成自动填充,也不影响其他日期输入框
如觉得有用,请点个赞,谢谢支持