应用场景:

  页面上有一些现有的输入框,需要调用日期插件,同时还要clone一份,动态添加到页面中,动态生成的输入框在调用datepicker的时候,click事件有效,但是选择的时间无法回显到对应的输入框中。

问题分析:

  ui.datepicker.js  添加断点,发现datepicker.js 对 input 控件会自动生成一个id

/* Attach the date picker to a <a href="http://lib.csdn.net/base/jquery" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery</a> selection.
@param target element - the target input field or division or span
@param settings object - the new settings to use for this date picker instance (anonymous) */
_attachDatepicker: function(target, settings) {
// check for settings on the control itself - in namespace 'date:'
var inlineSettings = null;
for (var attrName in this._defaults) {
var attrValue = target.getAttribute('date:' + attrName);
if (attrValue) {
inlineSettings = inlineSettings || {};
try {
inlineSettings[attrName] = eval(attrValue);
} catch (err) {
inlineSettings[attrName] = attrValue;
}
}
}
var nodeName = target.nodeName.toLowerCase();
var inline = (nodeName == 'div' || nodeName == 'span');
if (!target.id)
target.id = 'dp' + (++this.uuid);

同时,在将 datepicker 附加到 input 控件的时候,如果发现input 控件有this.markerClassName 样式 ( markerClassName: 'hasDatepicker', 109行),则跳出function,不再进行附加。

/* Attach the date picker to an input field. */
_connectDatepicker: function(target, inst) {
var input = $(target);
inst.trigger = $([]);
if (input.hasClass(this.markerClassName))
return; ....
}

解决:

首先,将input 控件的id 自增1;然后,去掉 input 控件的'hasDatepicker' 样式:

$("input.clonedp").attr("id", ++$.datepicker.uuid).removeClass("hasDatepicker").datepicker({
showOn : "both"
//,appendText : "(yyyy-mm-dd)"
,clearText : "Erase"
,mandatory : true
//,closeText : "X"
,closeAtTop : false
,prevText : "Earlier"
,nextText : "Later"
,currentStatus: '<a href="http://lib.csdn.net/base/go" class='replace_word' title="Go知识库" target='_blank' style='color:#df3434; font-weight:bold;'>Go</a> to this month'
//,monthNames:['一月','二月','三月','四月','五月','六月'
// ,'七月','八月','九月','十月','十一月','十二月']
,monthNames:['','','','','','','','','','','','']
,yearRange : "2008:2010"
,dateFormat: 'yy-mm-dd'
});

ui.datepicker的回显问题的更多相关文章

  1. react项目中element的DatePicker回显

    element的DatePicker获取value的时候是日期对象如下,可以提交的时候查看参数 2019-06-30T17:02:02.000Z  如果是console.log打印出来的话,是这样的 ...

  2. Struts2第十一篇【简单UI标签、数据回显】

    Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签-也就是显示页面的标签-.. 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再被浏览器 ...

  3. Struts2【UI标签、数据回显、资源国际化】

    Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签...也就是显示页面的标签..... 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再 ...

  4. Element UI tree 回显问题

    Part.1 问题 写项目时遇到一个棘手的问题,在做关于权限功能时,点击修改需要显示角色原本对应的权限.涉及到了 tree 组件回显,但是有一个很尴尬的问题:tree 组件只要父节点选中,那么子节点就 ...

  5. element ui tree回显 setCheckedNodes,setCheckedKeys,setChecked等函数报undefined问题

    在写项目的时候,需要用到tree组件进行回显来进行权限控制: 在回显过程中使用回显函数会报报undefined, 这时只需要给该函数包裹一层nextTick方法就行了, 在回显过程中我们有可能使用半选 ...

  6. element ui el-tree回显问题及提交问题(当后台返回的el-tree相关数组的时候,子菜单未全部选中,但是只要父级菜单的id在数组中,那么他的子菜单为全部选中状态)

    1:问题原因:我们可能使用 this.$refs.tree.setCheckedKeys(this.defalutArr);或者使用:default-expanded-keys="treeD ...

  7. 记录,element ui的日期选择器只有第一次回显成功

    首先是这个 <el-date-picker v-model="value1" type="daterange" range-separator=" ...

  8. 一脸懵逼学习Struts数据校验以及数据回显,模型驱动,防止表单重复提交的应用。

    1:Struts2表单数据校验: (1)前台校验,也称之为客户端校验,主要是通过Javascript编程的方式进行数据的验证. (2)后台校验,也称之为服务器校验,这里指的是使用Struts2通过xm ...

  9. vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据。

    业务的需要:我要对与会人员勾选,记录所选的与会人员,并且点击到别的页面上时也要记录所勾选的.第一次尝试,每次点击下一页数据都会清空.然后我就去element ui官网查看了api.实现如下: 在tab ...

随机推荐

  1. C语言利用指针排序与选择排序算法

    //读入字符串,并排序字符串 #include <stdio.h> #include <string.h> #define SIZE 81 #define LIM 20 #de ...

  2. 【bzoj2935】[Poi1999]原始生物

    2935: [Poi1999]原始生物 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 145  Solved: 71[Submit][Status][D ...

  3. Oracle redo undo

    通常对undo有一个误解,认为undo用于数据库物理地恢复到执行语句或事务之前的样子,但实际上并非如此.数据库只是逻辑地恢复到原来的样子,所有修改都被逻辑地取消,但是数据结构以及数据库块本身在回滚后可 ...

  4. docker基本命令日志

    docker run - Run a command in a new container 启动一个新的容器,一般在docker pull之后首次运行此image -i 保持stdout打开 -t 打 ...

  5. windows系统打开火狐浏览器提示“无法加载你的firefox配置文件”

    win7系统自带IE浏览器,还是有部分用户使用不习惯,选择下载第三方浏览器,比如:火狐.谷歌.360浏览器等.最近有Win7系统用户在重新安装火狐浏览器后发现打不开,并提示“无法加载你的firefox ...

  6. SpringMVC什么时候配置 视图解析器

    当Action返回的是一个真实路径的时候,视图解析器可不进行配置 当Action返回的是逻辑路径的时候,我们必须要在配置文件中注册视图解析器并为该逻辑路径添加前缀和后缀

  7. c++ 封装线程库 3

    1. 继承与重写run方法 我们封装了Thread类,并设置成员函数run()为纯虚函数,因此我们使用类继承,并重写run方法: class IncCount : public Thread//增加计 ...

  8. Oracle 配置监听和本地网络服务

    一.配置监听 在oracle的配置和移植工具中打开Net Configuration Assistant,然后点击下一步. 点击下一步,然后输入监听的名称点击下一步 点击下一步后如图 点击下一步如图 ...

  9. android Activity启动过程(二)从ActivityManagerService的startActivity到栈顶Activity的onPause过程

    ActivityManagerService.startActivity() ActvityiManagerService.startActivityAsUser() ActivityStackSup ...

  10. C++的友元函数

    友元函数不是成员函数,是类外函数所以声明放在类的私有段或公有段且没有区别.但是它可以访问类中的私有成员.友元的作用在于提高程序的运行效率,但是,它破坏了类的封装性和隐藏性,使得非成员函数可以访问类的私 ...