创建新行或者Clone()后,datepicker不起作用,无法弹出的简单解决方法

修复克隆Input日期选择器

最新推荐文章于 2023-04-10 11:22:18 发布

原创最新推荐文章于 2023-04-10 11:22:18 发布 · 834 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #datepicker

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了解决克隆的input元素中日期选择器功能失效的问题。通过删除hasDatepicker类并重新绑定datepicker，确保新复制的input能正常工作。

原本有一个input,id='origin'

<input class="form_control datepicker hasDatepicker" type="text" id="origin" autocomplete="off">

现在复制了一行,或者clone(),

<input class="form_control datepicker hasDatepicker" type="text" id="new" autocomplete="off">

但是新的input的datepicker不起作用
解决方法:

	$("#new").removeClass("hasDatepicker"); //删除hasDatepicker类
	$("#new").datepicker(); //重新绑定datepicker给input

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xHibiki

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue经典开源项目汇总

xiangzhihong8的专栏

01-31

1万+

Vue.js（读音 /vjuː/, 类似于 view）是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。相比Angular.js来说，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，是初创项目的前端首选框架。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用...

【Blockly开发教程】03 react blockly项目

1 条评论

战斗模式 2021.09.28
我发现的问题是，日期能弹出，但是焦点在上一个控件上，如果选择日期，也会把上一个日期控件修改掉，试过你的方法，没有效果

DateTimePicker 日期时间选择器 input事件不触发

qq_41715515的博客

04-10

978

如图，input事件无法触发，网上看了很多文章都是可以的，有人遇到过类似情况吗。

ng-repeat中使用jquery的datepicker不触发日期选择框

Amber8080的博客

12-16

429

问题原因在angular项目中，有个场景需要使用ng-repeat重复生成多条日期选择框。但当使用id选择器来生成时，发现无法正确触发datepicker的日期选择框。经查询发现出现这个问题的原因在于，在点击添加多行之前，日期组件就已经初始化完成了，无法再操作新增的DOM。解决方法方法1：设置监听函数设置一个监听函数，在其内部初始化日期组件： js部分： // 初始化日历组件 initDatePicker(i) { ** $('body').on('focus',".myd

关于 fastadmin 在添加数据后弹窗没有出现的问题

橘子味''的博客

04-29

1728

出现这样的问题是因为 fastadmin 是通过 iframe 来实现弹窗的，我们在 add 中写了弹窗方法，但是不显示是因为，在我们执行了弹窗方法后这个 iframe 已经被默认关闭了。我们可以阻止这个弹窗关闭来实现我们想要的效果。例如下面的代码。 add: function () { Form.api.bindevent($("form[role=form]"), function (data, ret) { console.log(da

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

weixin_34315189的博客

12-21

370

页面代码： <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="

datetimepicker 多次点击input日期选择器不显示

筱✿熙

08-07

6723

首先熟悉一下datepicker的部分属性设置以及详细解释： //js中的datepicker属性设置 $('.selectData').datepicker({ autoclose: true, //自动关闭 beforeShowDay: $.noop, //在显示日期之前调用的函数 calendarWeeks: false, //是否显示今年是第几周 clearBt...

Jquery库与插件

08-13

3. **模态对话框**：如jQuery UI的Dialog或Bootstrap的Modal，用于创建弹出窗口，常用于显示警告、确认信息或嵌入内容。 4. **日期和时间选择器**：如jQuery UI的DatePicker或Moment.js，帮助用户方便地选择日期和...

jQuery UI 手册：交互与效果指南

日期选择器提供了一个方便的弹出日历，让用户选择日期。应用`.datepicker()`方法： ```javascript $("#dateInput").datepicker(); ``` #### 2.3 Dialogs（对话框）对话框用于显示模态或非模态的信息，可以配置多种...

jQuery-1.10.2(+jQueyUI+中文API帮助文档)

01-10

1. **Dialog（对话框）**：用于创建弹出式对话窗口，常用于提示信息、确认操作或输入数据。 2. **Datepicker（日期选择器）**：在输入框内显示日历控件，方便用户选择日期。 3. **Accordion（手风琴）**：将多个...

关于jqui datepicker 使用enter选择日期后点击input 没有打开日期控件问题

...

02-13

1563

只需要在 input 的 keydown 事件中绑定 //清除日期 $scope.clearDate = function($event) { if($event.keyCode == 8|| $event.keyCode == 46){ DateUtilClass.clearDat...

js中clone的运用和clone后datepicker的显示问题

孤狼的博客

04-05

1520

我们有时有这种需求,增加一行,减少一行.一般情况使用js中的clone()并不难.但是有时增加的行里有datepicker日期控件,不加处理会导致clone出的日期控件不可用,下面一一做出介绍. clone和datepicker的运用实例: 下面结合小demo介绍下clone和datepicker的运用,一共分为3个步骤: 1.新建html文件,引入js文件(demo所用

问题：datetimepicker 选中时间后，input框没有值

天蓝丶彼岸的博客

10-11

5961

问题描述：bootstrap模态框中用到datetimepicker，点击确定时间后，input框中没有值原因：首先，模态框在关闭前我把form表单中的数据重置了 //模态框关闭事件 $('#roadSectionAddOrUpdateModel').on('hide.bs.modal', function () { $('#roadSectionAUForm'...

Bootbox+JQuery UI Datepicker 时间输入框点击无响应

黄国攀的博客

05-10

1134

在使用Bootbox+JQuery datepicker时，发现点击输入框，并不是被div层遮住了，而是根本就没有触发这个显示日期的事件，且无错误提示信息。情况是这样的： 1.html代码：这个也就是我们的弹出层。 <div id="formDiv" class="form-group form"> <form id="addForm" class="cmxform"

解决J_ILINK USB不识别与J_ILIN clone提示的方法

但是，在使用过程中可能会遇到J-Link USB设备无法被计算机识别的问题，或者出现J-Link clone的提示，这通常意味着设备被识别为克隆版本，而非正版。这些问题的出现往往与固件有关，因此需要通过固件修复来解决。 ##...