设置点击文本框或图片弹出日历控件的实现代码

前端技术 2023/09/09 JavaScript 
<input id=\"startDate\" value=\"\" readonly=\"true\" type=\"text\" style=\"cursor: pointer\" class=\"user_datepicker \">
<input class=\"canlderImg\" data-tag=\"start\" type=\"image\" src=\"../../i/canlder1.png\">
<span>结束:</span>
<input id=\"endDate\" value=\"\" readonly=\"true\" type=\"text\" style=\"cursor:pointer;\" class=\"user_datepicker\">
<input class=\"canlderImg\" data-tag=\"end\" type=\"image\" src=\"../../i/canlder1.png\" >

// js代码

$(\"#startDate\").datepicker();

$(\"#endDate\").datepicker();

//点击图片弹出日历控件则需要给图片绑定点击事件
$(.canlderImg).on(\"click\",function(e){

var tag=$(e.target).attr(\"data-tag\");
if(tag==\"start\"){
  $(\"#startDate\").datepicker( \"show\" );
}else if(tag==\"end\"){
  $(\"#endDate\").datepicker( \"show\" );
}

});

以上这篇设置点击文本框或图片弹出日历控件的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/24745

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案