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


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禁止回车提交表单的示例代码
Dec 23 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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 无法载入mysql扩展
2010/03/12 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python2与Python3的区别详解
2020/02/09 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
django API 中接口的互相调用实例
2020/04/01 Python
python实现图片转字符画的完整代码
2021/02/21 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
优秀求职信范文分享
2013/12/19 职场文书
大学自我鉴定
2013/12/20 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server