最近在创建记录的时候，需要用到日历的功能。本身是使用的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. openfire使用自定义用户表

    转自:http://blog.csdn.net/nomousewch/article/details/7546083 在最近的项目中使用openfire服务器实现消息推送功能,如果使用openfire ...

  2. ruby -检查数据类型

    HashObj={","language"=>"zh","make"=>"Apple"," ...

  3. 6.Linux的文件权限与目录配置

    Linux文件属性:(- rwx r-x r-- 1 root root 2800 feb 1 11:55 test.txt 顺序按着空格排序,除了时间) 第一组字符代表这个文件是目录.文件或链接文件 ...

  4. Jquery实现静态切换tab

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

  5. MVC4与JSON交互的知识总结

    一:jquery传递JSON给MVC4后台 1.JSON传递单个参数给Controller某个Action方法 [前台js] $(document).ready(function () { var p ...

  6. pip install 安装python-requests

    pip install -i https://pypi.tuna.tsinghua.edu.cn/simple python-requests

  7. 1.初识Shell脚本语言

    PS:在做Linux下STM8固件升级项目中,需要让CPU通过I2C总线给STM8传输数据,刚开始一个一个的敲,很浪费时间,用shell脚本大大提高了数据传输效率,它是用户与内核进行交互操作的一种接口 ...

  8. SVN File Name Case Sensitivity--SVN大小写问题

    from:http://www.visualsvn.com/support/topic/00019/ Windows has a case-insensitive file system. Unix ...

  9. C#类和接口

    1.类的定义 C#使用类关键字class定义类,如: public  class MyClass { } 2.类的继承 类继承使用: public class BaseClass { } public ...

  10. 比较常用到的一些linux命令行

    find ./ -type f -name "*.c" | xargs grep -l "tm_common_ctrl_init_chip_init"     ...