最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js。我是从npm 上拉下的依赖  npm install flatpickr --save

随后在页面中引入css,js文件,引入css文件时,可以大致留意一下,选择自己喜欢的色调,

引入js文件:

html代码:

界面效果:

在使用的过程中我遇到了一些问题,当我动态创建一个input标签时,选择器没效果了,

原因是,当把新创建的元素添加到页面时,插件还未加载完毕,所以就不起作用

解决的办法是,自己手动初始化插件,具体代码如下:

当然了写完这句代码还是不起作用,你还需要加一句代码,新创建的元素也需要初始化啊:

这样,bug就完美解决了,希望能帮到遇到同样问题的你!

使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效的更多相关文章

  1. JQuery日期选择器插件date-input

    JQuery日期选择器插件之date-input 官方网站:http://jonathanleighton.com/projects/date-input/ 下载地址: http://github.c ...

  2. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  3. jquery 动态创建的元素,绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  4. jQuery动态创建html元素的常用方法汇总

    在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...

  5. 用jQuery绑定事件到动态创建的元素上

    jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...

  6. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  7. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  8. 基于jQuery动态创建html元素

    在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...

  9. JS提交表单页面不跳转、JS下载、动态创建from

    JS下载 function downloadFile(id) {     var url =  "<%=request.getContextPath()%>/cer/downlo ...

随机推荐

  1. net读取文件字节流要注意的小细节

    ]; var numBytesToRead = (int)fileLenght; ; using (fs) { do { ); numBytesRead += n; numBytesToRead -= ...

  2. macos 命令行安装 ipa

    macos 命令行安装 ipa 苹果发神经后itunes已经无法在安装app了,如果有知道的兄弟可以告诉我啊 ideviceinstaller 使用这个开源项目可以在macos下安装app brew ...

  3. codeforces 1110F

    题解: 正解做法比较简单,考虑离线之后,相邻两个节点之间的答案是有关系的 发现从父亲移到儿子后,改变的距离对于当前节点子树内和子树外的是一样的 所以线段树维护一下区间加减取max就可以了 另外的做法1 ...

  4. UOJ#266. 【清华集训2016】Alice和Bob又在玩游戏 博弈,DSU on Tree,Trie

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ266.html 题解 首先我们可以直接暴力 $O(n^2)$ 用 sg 函数来算答案. 对于一个树就是枚举 ...

  5. qt之数据库对照片的存取

    需要确保数据库连接上 QOCI为驱动 //oracle 数据库连接 //需要在执行文件目录添加 oci.dll oraociei11.dll QSqlDatabase db = QSqlDatabas ...

  6. 第六届Code+程序设计网络挑战赛

    弹指能算(easy)模式只做出一道签到题,还WA了一发,我好菜啊啊啊啊...虽然我菜,但是比赛体验一点都不好,服务器老是崩. 比赛链接:https://moocoder.xuetangx.com/de ...

  7. hadoop hdfs ha 模式

    这是我自己在公司一个搭建公司大数据框架是自己的选项,在配置yarn ha 出现了nodemanager起不来的问题于是我把yarn搭建为普通yarn 如果有人解决 高yarn的nodemanager问 ...

  8. 通过s3cmd上传css文件到s3导致样式加载失败

    情景说明: 将css文件上传到aws s3存储桶中,通过浏览器访问页面,发现css文件渲染失败. 通过浏览器工程模式发现css为 Content-Type: text/html,正确的 Content ...

  9. go http

    先看一个简单的 tcp 连接: // server ln, err := net.Listen("tcp", ":8000") if err != nil {} ...

  10. 使用POST下载文件

    一直以来,JS都没有比较好的可以直接处理二进制的方法.而Blob的存在,允许我们可以通过JS直接操作二进制数据.一.下载util.fetchDownload= function (opt,data) ...