页面代码:
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>    <link href="/static/css/main.css" rel="stylesheet" type="text/css"/><script src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><!--<script type="text/javascript" src="/static/js/jquery-1.7.2.js"></script>--><script language="javascript" type="text/javascript" src="/static/js/nav.js"></script><script language="javascript" type="text/javascript" src="/static/seg/js/report.js"></script><script type="text/javascript">   $(function(){    $( ".datepicker").datepicker({dateFormat: 'yy-mm-dd'}); //$.iniNav("engagement");           });</script>

  

最终效果如图所示:

但是放在engagement页面里的时候,点击选择每天的时候,不能自动更新到input里面去。单步调试代码,发现,input能够定位到,而且代码执行的过程中有获取到点击的按钮对应的当天的日期。
在jqueryUI里对应的代码块儿如下:
  /* Update the input field with the selected date. */_selectDate: function(id, dateStr) {var target = $(id);var inst = this._getInst(target[0]);dateStr = (dateStr != null ? dateStr : this._formatDate(inst));if (inst.input)inst.input.val(dateStr);this._updateAlternate(inst);var onSelect = this._get(inst, 'onSelect');if (onSelect)onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callbackelse if (inst.input)inst.input.trigger('change'); // fire the change eventif (inst.inline)this._updateDatepicker(inst);else {this._hideDatepicker();this._lastInput = inst.input[0];if (typeof(inst.input[0]) != 'object')inst.input.focus(); // restore focusthis._lastInput = null;}},

  关键的赋值代码在  inst.input.val(dateStr);而且这句执行结束的时候,input的value的确被改掉了成为最新的,但是input里看不到任何效果。

原因在哪?
我只能查看返回的input的context哪里不同,进行对比:
能正常显示点击的最新日期的input:

                                            

                                                                   

区别:

  baseURL:

  1. clientHeight: 20
  2. clientLeft: 1
  3. clientTop: 1
  4. clientWidth: 165

  jQuery183017439375561662018

  1. offsetHeight: 22
  2. offsetLeft: 81
  3. offsetParent: <li>
  4. offsetTop: 1
  5. offsetWidth: 167
但是我手动给input指定宽高不能解决问题,还是逐步调试,发现我每次clone的demo其实不是页面里的那个demo,而是绑定了datepicker以后的,或者说经过”修改“的demo-div。
于是将demo移到content_wrapper的外面(因为我每次重新绘图要把原来的div),用$('.demo')直接找到用来被克隆的div。
然后新的问题出现了,每次我点击新生成图表上的日历控件都会定位到我的demo上面的input.... 见网上有说是因为focus的缘故....

后来发现,其实这个问题是由我的代码自己造成的,每次clone过去的代码是包含了datepicker的事件的,也就是说如果我在创建新的graphBox,(执行graphBox.prototype._createBox以后)再去绑定datepicker事件就不会出现这样的情况了。。。改成现在这样:

graphBox = function(opt){this.content_wrapper = opt.content_wrapper;this.demo_graph_body = opt.demo_graph_body;this.bookmarkID = opt.bookmarkID;this._createBox(); this._createDatePicker();           this._handleActions();  this._drawChart();}

  其中this._createDatePicker();   的代码如下:

graphBox.prototype._createDatePicker = function(){$(this.graph_body).find(".datepicker").datepicker({dateFormat: 'yy-mm-dd'});
}

  这里只设置了datepicker的dateFormat: 'yy-mm-dd',未做其他任何设定。

通过测试,ok了。。。。

转载于:https://www.cnblogs.com/xiami303/archive/2012/12/21/2828416.html

jquery datepicker 点击日期控件不会自动更新input的值相关推荐

  1. javaFX学习之DatePicker日期控件

    附送我自定义的日期格式化工具类: import java.text.DateFormat; import java.text.ParseException; import java.text.Simp ...

  2. python 日历控件_python selenium 处理时间日期控件(十六)

    测试过程中经常遇到时间控件,需要我们来选择日期,一般处理时间控件通过层级定位来操作或者通过调用js来实现. 1.首先我们看一下如何通过层级定位来操作时间控件. 通过示例图可以看到,日期控件是无法输入日 ...

  3. Java+Selenium自动化对非输入框的日历或日期控件的处理

    如图:          1.问题描述: 在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这 ...

  4. python选择日期控件_selenium + python 定位日期控件(处理iframe)两种方法

    对于日期控件的处理用了两个办法. 1.由于日期控件输入框是只读属性的如 其中readonly的意思就是只读.所以方法1就是调用js把这个只读属性删了,之后在send_keys值进去如例: js = ' ...

  5. MiniUI日期控件设置不可手动输入

    如何设置MiniUI的日期控件不可手动输入 设置MiniUI日期控件不可手动输入的方式和其他js日期控件一样,有两种方式: 设置控件为只读.设置只读后,控件不可被修改. <input class ...

  6. html日期控件默认设置为当天日期

    最近在制作html+css+js的网站时,需要制作一个留言模块,在制作功能时有一个日期控件,需要实现对input里的value赋值当天日期.先前在各个网站找了许多相关说明.最初采用的方式是 html代 ...

  7. jQuery里面的datepicker日期控件默认是显示英文的,如何显示中文或其他语言呢?...

    jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...

  8. Datepicker日期控件“今天”按钮点击没反应

    今天在测试过程中,遇到一个问题: 日期控件中的"今天"点击后没反应: 看js代码也设置了"todayBtn:true" 后来看到一篇博客(点击查看原文)上讲,原 ...

  9. 精确到秒的JQuery日期控件,jquery日历插件,jquery日期插件

    2019独角兽企业重金招聘Python工程师标准>>> 效果图如下: 首先在页面中引用一下库: <link type="text/css" href=&qu ...

最新文章

  1. docker run redis
  2. 程序员之工具杂烩(一)
  3. RabbitMQ三种订阅模式
  4. java swftools linux_swftools linux下安装
  5. linux缓存文件用户权限错误,CVE-2019-11244漏洞到底该如何修复?--关于缓存文件权限设置...
  6. sdut 数据结构实验之排序三:bucket sort
  7. Amazon S3数据一致性模型
  8. Pure公司发布机架规模FlashBlade对象与文件存储方案
  9. HTML5线性图表 图表数据区域可着色
  10. 手机 android.downloader病毒,Android手机出现史上最强木马 感染后无法删除
  11. 【图像去噪】基于butterworth滤波器、中值、维纳、小波算法实现图像去噪含GUI
  12. python 运行报错 Process finished with exit code -1073740791 (0xC0000409)
  13. [日常] [Python] 批量将某个文件夹下的.ppt/.pptx/.pptm转换为.pdf文件,并且将其移入/ppt文件夹中
  14. Deepin系统navicat15安装
  15. 计算机动画的基础知识是什么,计算机动画历史基础知识介绍课件
  16. 【学习笔记】stm32+ESP8266+阿里云+云智能APP
  17. Mybatis - xml文件标签中写注释
  18. echarts 矩阵图用法
  19. 天道酬勤系列之C++ 循环介绍
  20. 【目录】从苏宁电器到卡巴斯基

热门文章

  1. 联想平板刷机机器人_消费终端年出货量破1.2亿,杨元庆:联想是智能化转型的赋能者...
  2. python嵩天课后题及答案第二章_课后参考答案-第二章部分习题参考答案
  3. 计算机网络又称为分时多用户,7计算机网络原理期末复习试卷A卷.doc
  4. 《springcloud超级入门》Spring Cloud和Dubbo的区别及各自的优缺点《三》
  5. 微机原理换行代码_微机原理课程设计——汇编输出杨辉三角
  6. java static方法
  7. java项目如何单元测试_大家java web项目开发做单元测试吗?
  8. IDEA Servlet页面报错
  9. 程序设计基础——c语言篇,C语言程序设计基础篇.ppt
  10. mxnet安装(Jetson)