带有eonasdan DatePicker的DataTables不起作用 [英] DataTables with eonasdan DatePicker doesn't work

问题描述

我有 eonasdan DatePicker 的问题，我不明白我搞砸了什么。 ..我想我已经验证了所有必要的资源，但是当我点击日历图标没有任何反应：\

实时代码：现场示例

---

我已经遵循安装说明和手册和演示。

引用： p>

最低要求

jQuery

Moment.js

Bootstrap.js （如果您没有使用完整的Bootstrap，则需要进行转换和折叠）

Bootstrap Datepicker脚本

Bootstrap CSS

Bootstrap Datepicker CSS

L ocales：Moment的区域设置文件是 here

需要脚本

 < script type =text / javascriptsrc =/ path / to / jquery.js>< / script> 
< script type =text / javascriptsrc =/ path / to / moment.js>< / script> 
< script type =text / javascriptsrc =/ path / to / bootstrap / js / transition.js>< / script> 
< script type =text / javascriptsrc =/ path / to / bootstrap / js / collapse.js>< / script> 
< script type =text / javascriptsrc =/ path / to / bootstrap / dist / bootstrap.min.js>< / script> 
< script type =text / javascriptsrc =/ path / to / bootstrap-datetimepicker.min.js>< / script> 
  

CSS样式

 < link rel =stylesheethref =/ path / to / bootstrap-datetimepicker / build / css / bootstrap-datetimepicker.min.css/> 
  

解决方案

您正在动态添加重复的ID，代码在页面加载时运行时不会接收它们！

您仍然从Github添加脚本，这是令人皱眉的！我已经替换了来自 cdnjs 的引用。 PLease参考有关直接从Github链接文件的信息。

此更新的 JSFiddle 的作品将为您提供工作基础从

基本上我已经在表中添加了一个回调，这意味着你动态添加的 datetimepicker 将会被正确初始化（第65行）。 这是一个有趣的概念， b

 ，
fnDrawCallback：function（）{
 $（。date）。datetimepicker（）; 
} 
  

I have trouble with eonasdan DatePicker, i don't understand what i messed up... I think I have verified to have all the necessary resources but when i click in calendar icon nothing happens :\

Live code : live example

---

I have followed the installation instructions and manual and demos.

Quoting:

Minimal Requirements
jQuery
Moment.js
Bootstrap.js (transition and collapse are required if you're not using the full Bootstrap)
Bootstrap Datepicker script
Bootstrap CSS
Bootstrap Datepicker CSS
Locales: Moment's locale files are here

Scripts needed:

<script type="text/javascript" src="/path/to/jquery.js"></script>  
<script type="text/javascript" src="/path/to/moment.js"></script>  
<script type="text/javascript" src="/path/to/bootstrap/js/transition.js"></script>  
<script type="text/javascript" src="/path/to/bootstrap/js/collapse.js"></script>  
<script type="text/javascript" src="/path/to/bootstrap/dist/bootstrap.min.js"></script>  
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>  

CSS styles

<link rel="stylesheet" href="/path/to/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />  

解决方案

You were dynamically adding IDs which were duplicated, your checking code wouldn't pick them up as it ran when the page loaded only! See more about this later.

You were still adding script from Github, which is frowned upon! I've replaced the references from ones from cdnjs. PLease refer to this about linking files directly from Github.

This updated JSFiddle works and will give you a basis to work from.

Basically I've added a callback to the table which will mean that your dynamically added datetimepickers will be initialised correctly (line 65). You're not able to interact with something unless it's within the DOM. This is an interesting concept to get your head around but well worth bearing in mind!

,
"fnDrawCallback": function() {
    $(".date").datetimepicker();
}

这篇关于带有eonasdan DatePicker的DataTables不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！