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


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 相关文章推荐
Jquery中对数组的操作代码
Aug 12 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
php报错502badgateway解决方法
2019/10/11 PHP
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Django实现表单验证
2018/09/08 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
WxPython实现无边框界面
2019/11/18 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
java executor包参数处理功能 
2022/02/15 Java/Android