`
天之痕苏
  • 浏览: 18405 次
文章分类
社区版块
存档分类
最新评论

bootstrap3添加日期控件中碰到的问题

 
阅读更多

和bootstrap2相比,bootsrap3的改动还是很大的,很多原有的在bootstrap2上开发的js插件,移植到bootsrap3上以后,出现了各种问题,而这些问题,在刚开始的时候很难找出错误出在哪儿。

最近在做国电南自的一个项目,需要用到日期控件,前台界面用bootstrap3 + js,网上大多数给出的都是基于bootstrap2.2开发的js插件,这里先给出一个链接,不妨先看一下:http://www.open-open.com/lib/view/open1356568521682.html

但用了之后,点击文本框后面的日期按钮,总是出不来,折腾了好久,最终还是放弃,若有哪位大虾弄明白个中缘由,望告知一下。抛弃了这种方法,又在网上找到了另外一种基于js的日期控件,http://jqueryui.com/datepicker,用这个控件以后本以为会躲过bootstrap3版本兼容的问题,但是又是折腾了好久,仍然出现了相同的问题,在chrome的“审查元素”中调试,出现的错误如下:

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>

这里总是报错: Uncaught TypeError: undefined is not a function
1、变量名和函数名相同;
2、js找不到当前调用的函数;
在否定了第一个原因后,查找第二个原因可能出现的地方。经过多次对比,发现了问题所在,在bootstrap3写的前台页面中,一般会有如下代码片段,对函数库的引用:


这几个库函数的引用导致了两个东西的不兼容,还不能删除第二个,于是尝试把第一个删除掉,不影响当前界面的正常运行,这才算是暂时解决了这个问题,但是在往下深究,却超出了我的能力范围,只能退而求其次,到此为止,在这里记录一下自己碰到的障碍,供日后查阅。

另:如果在js中出现$未定义的提示,原因在于没有引用jquery.js或者路径不对,这是唯一的解释,也是出现这个提示错误唯一可能的原因。

附自己的前台界面一张:



到此为止,已经晚上10:00了,该回去了,早睡早起,方能养生~


分享到:
评论

相关推荐

    bootstrap-datetimepicker时间控件

    在实际项目中,开发者可能会遇到的问题包括但不限于: 1. 兼容性问题:确保所有依赖库(如jQuery和Bootstrap)的版本匹配。 2. 时区调整:根据需要处理用户所在时区与服务器时区的差异。 3. 动态加载和销毁:在某些...

    Bootstrap-datetimepicker年月日时分秒均可选择

    在上面的代码中,`#datetimepicker`是你要添加日期时间选择器的元素ID。`format`属性定义了日期时间的显示格式,`useCurrent`表示是否在初始化时选择当前时间,`sideBySide`则控制日期和时间是否并排显示,`locale`...

    bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法

    总结,解决Bootstrap日期控件DatePicker被Dialog覆盖的问题,关键在于理解并利用`z-index`属性。通过调整DatePicker和Dialog的`z-index`值,以及合理地修改CSS和JavaScript代码,可以有效地解决这个问题。在实际开发...

    bootstrap 时间控件.zip

    Bootstrap时间控件是一款基于Bootstrap框架的插件,用于在网页上提供方便的日期和时间选择功能。Bootstrap,是由Twitter开发的开源前端框架,它提供了丰富的样式、组件和JavaScript插件,帮助开发者快速构建响应式、...

    清新的 js日期控件

    3. 初始化控件:在页面加载完成后,通过JavaScript代码初始化日期控件,指定需要添加日期选择功能的元素。 四、使用说明文档 压缩包内附带的“使用说明文档”会详细介绍如何配置和使用这个日期控件。通常,文档会...

    JS三款日期控件

    在JavaScript(JS)开发中,日期控件是用于用户交互,方便选取或显示日期的常见组件。...对于压缩包中的“3款日期控件”,你可以下载并查看源码,学习其具体实现方式,以便在自己的项目中灵活运用。

    ASP.NET日期选取控件及使用demo

    这个文件很可能是提供关于如何在项目中集成和使用日期选取控件的详细步骤,包括控件的添加、属性配置、事件处理以及可能遇到的问题和解决方案。 7. **Demo** "demo"文件可能是一个实际的示例项目,包含了使用日期...

    日文版日期控件

    本案例中的"日文版日期控件"就是一个典型的例子,它是为了满足日本项目开发中对日期输入和展示的需求。这个控件应该能够以符合日本用户习惯的方式显示日期,并且在用户选择开始日期和结束日期时,确保开始日期始终...

    javascript日期控件二

    在“javascript日期控件二”中,我们通常会遇到以下核心知识点: 1. **创建控件**:开发者可以使用HTML和CSS创建日期选择器的基本结构,然后用JavaScript进行功能的添加。这可能涉及到事件监听(如点击、改变等)、...

    简单的日期控件

    在IT领域,日期控件是用户界面中常见的一种元素,用于帮助用户选择或输入日期。在本主题中,"简单的日期控件" 提供了一系列开源的日期工具,这些工具简化了开发人员在应用程序中集成日期选择功能的过程。下面将详细...

    选择日期控件>>>>>>>

    下载并研究这个文件,你可以学习到如何自定义日期控件的样式、添加额外功能,或者解决在实际项目中遇到的兼容性问题。 总的来说,日期控件在软件开发中扮演着重要角色,理解和掌握其工作原理、设计原则以及实现方式...

    类似iphone的 js日期选择控件

    在提供的博客链接中(),作者可能分享了实现这样一个控件的具体步骤、代码示例或遇到的挑战。由于没有详细内容,我们无法深入探讨,但这个链接可以作为进一步学习和研究的起点。 在压缩包"sw"中,可能包含了实现这...

    日历控件12

    在“日历控件12”中,我们可能会遇到一系列关于如何集成、自定义以及优化这种控件的知识点。下面将详细介绍这些内容。 首先,集成日历控件到自己的项目中是开发过程中的常见任务。这通常涉及到引入相应的库或组件,...

    关于javascript的日期控件

    在Web开发中,我们经常会遇到如jQuery UI Datepicker、Bootstrap Datepicker或者本文提到的"My97日期控件"等第三方库。 My97日期控件是一个高性能、高度可定制的JavaScript日期选择器,尤其在中国国内应用广泛。它...

    精确到秒的日期控件

    在IT领域,日期控件是用户界面中常见的一种组件,用于选择或输入日期。本话题聚焦于一个能够精确到秒的JQuery日期控件,它为开发者提供了更细粒度的时间选择功能,使得时间管理更加精确。JQuery,作为一款广泛使用的...

    BootStrap的Datepicker控件使用心得分享

    总的来说,Bootstrap的Datepicker控件提供了一种灵活且易于集成的方式,帮助开发者在网页中添加日期选择功能。在实际应用中,需要关注可能存在的库冲突,并根据需求配置相应的事件和选项。在处理多日期选择或时间...

    几款强大漂亮的中英文日历控件

    在提供的压缩包文件中,"js日期控件集合.rar"和"中,英文漂亮的日历控件,很好用.rar"可能包含上述提到的控件示例代码或预打包的库。解压后,开发者可以研究这些代码,了解如何在自己的项目中集成和使用这些日历控件...

    BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)

    在本文中,我们将探讨一个常见的前端开发问题,即Bootstrap日期控件在火狐浏览器中模态框内无法正常工作的问题。这个问题主要表现为用户尝试选择时间下拉菜单时,菜单无法被点击,但在其他浏览器如Chrome中却能正常...

    jeDate带时分秒的日期控件特效源码.zip

    "jeDate带时分秒的日期控件特效源码.zip"是一个包含网页模板和jQuery插件的资源包,主要用于在Web应用中实现带有时分秒选择功能的日期输入控件。这个控件允许用户不仅可以选择日期,还可以精确到小时、分钟和秒,...

    JavaScript日期时间选择控件

    JavaScript日期时间选择控件的实现有多种库和框架可供选择,如jQuery UI的Datepicker、Bootstrap的DateTimePicker、Pickadate.js和Flatpickr等。这些库通常提供丰富的API和配置选项,方便开发者根据需求进行定制。 ...

Global site tag (gtag.js) - Google Analytics