最近在创建记录的时候，需要用到日历的功能。本身是使用的bootstrap布局的，所以就找到Datepicker，看了一下用起来还是挺方便的。下面就是使用过程。

依赖的资源

  • jQuery
  • Moment.js
  • Bootstrap.js
  • Bootstrap Datepicker script
  • Bootstrap CSS
  • Bootstrap Datepicker CSS

安装方式

由于我是Visual Studio开发工具，所以就使用bower安装这个资源。

bower install eonasdan-bootstrap-datetimepicker#latest --save

通过上面的命令，就将资源引入到工程里了。下面就可以在页面中使用了。

<head>
  <!-- ... -->
  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>

Bootstrap 3 Datepicker 使用过程的更多相关文章

  1. bootstrap的datepicker在选择日期后调用某个方法

    bootstrap的datepicker在选择日期后调用某个方法 2016-11-08 15:14 1311人阅读 评论(0) 收藏 举报 首先感谢网易LOFTER博主Ivy的博客,我才顿悟了问题所在 ...

  2. bootstrap的datepicker使用（1.将默认的英文设置为中文2.选择日月年的时候记录之前的操作）

    参考网页    bootstrap datepicker 属性设置 以及方法和事件 1.如何将bootstrap的datepicker默认的英文设置为中文 第一步,新建一个js文件(bootstrap ...

  3. 关于bootstrap的datepicker在meteor应用中的使用（不包含bootstrap框架）

    1.安装bootstrap3-datepicker包 meteor add rajit:bootstrap3-datepicker 2.使用方法 Example In your handlebars ...

  4. 基于bootstrap的datepicker

    <script src="<%=path %>/js/bootstrap-datepicker.min.js"/> <script src=" ...

  5. Bootstrap的datepicker控件

    为input 控件的text 添加datepicker()方法后,原本的控件change事件无法正常触发.原因是项目中同时使用了用了jquery ui,碰巧它里面也有一个datepicker,名字一模 ...

  6. 关于bootstrap插件datepicker

    <input  readonly size="16" type="text"  name="time" id="time&q ...

  7. （转）Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分

    https://segmentfault.com/a/1190000006709967 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门. 页面结尾部分(Javascripts ...

  8. openwrt设置语言的过程

    设置语言的流程一.关联的配置文件/etc/config/luci查看配置文件内容如下:root@hbg:/# cat /etc/config/luci config core 'main'       ...

  9. bootstrap 切换页签失效的解决方法

    概述 bootstrap开发标签页时,标签页显示正常,但点击时候对应内容区域没有变化. 具体症状与解决方案 1.标签页UI出现,但点击无反应,标签页UI并未随点击进行切换 先检查bootstrap.c ...

随机推荐

  1. GIT远程仓库地址变更

    将VS2013的解决方案添加到GIT源代码管理后会增加.gitattributes和.gitignore 2个文件以及.git目录 设置远程地址的文件在.git目录下的config文件中 直接修改上图 ...

  2. Jquery实现静态切换tab

    1. <div id="tabs"> <ul> <li><a href=</a></li> <li>& ...

  3. BI好比做菜

    近日,珠海奥威软件宣布成功签约新世界中国地产(华南),成为该公司在商业智能项目上的坚实合作伙伴,共同打造基于以财务应用为主的决策分析平台. 公司简介 新世界中国地产(港股代号:917)为香港上市公司新 ...

  4. Tomcat-问题解决

    1,两种方法解决tomcat的 Failed to initialize end point associated with ProtocolHandler ["http-apr-8080& ...

  5. 16C554（8250）驱动分析

    参考: http://www.cnblogs.com/zym0805/p/4815041.html 一. 硬件数据手册 The ST16C554D is a universal asynchronou ...

  6. Python Set Literals

    现有3种方式创建set() >>> def f(): ... return set([1, 2, 3]) ... >>> def h(): ... return s ...

  7. WINDOWS遠程常規化後再次切換回到全屏

    其实有更好的方法的,CTRI+Alt+Break,博主试试看

  8. [原创]java WEB学习笔记104：Spring学习---AOP 前奏，通过一个问题引入动态代理

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  9. 自由缩放属性resize

    为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小.到目前为止,可以使用overflow属性的任何容器元素. 在 ...

  10. Docker相关文档

    网上找到的一个入门级Docker学习笔记,写的不错,值得一看. 转自:http://www.open-open.com/lib/view/open1423703640748.html#articleH ...