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


Posted in Javascript onMay 12, 2016
<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" );
}

});

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

Javascript 相关文章推荐
JS调试必备的5个debug技巧
Mar 07 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
vue观察模式浅析
Sep 25 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
Bootstrap3制作图片轮播效果
May 12 #Javascript
JS创建事件的三种方法(实例代码)
May 12 #Javascript
jQuery判断checkbox选中状态
May 12 #Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
You might like
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP模块化安装教程
2016/06/01 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
PHP chr()函数讲解
2019/02/11 PHP
javascript引导程序
2008/10/26 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
js转html实体的方法
2016/09/27 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
vue实现简单的MVVM框架
2018/08/05 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
基于python内置函数与匿名函数详解
2018/01/09 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python3的socket使用方法详解
2020/02/18 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
街道党风廉政建设调研报告
2015/01/01 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL