最近在创建记录的时候，需要用到日历的功能。本身是使用的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. Python 打包工具cx_freeze 问题记录及解决办法

    在节前的最后一天,解决了打包过程中遇到的所有问题,可以成功运行了!真是个好彩头,希望新的一年一切顺利! 以下是在使用cx_freeze过程中遇到的问题及解决办法(Win7) 问题描述:运行exe,启动 ...

  2. 《Linux及安全》实践2

    <Linux及安全>实践2 [edited by 5216lwr] 一.Linux基本内核模块 1.1理解什么是内核模块 linux模块是一些可以作为独立程序来编译的函数和数据类型的集合. ...

  3. 在ubuntu上建立多svn版本库

    http://lucane.iteye.com/blog/857486 mkdir ~/dev/repository svnadmin create ~/dev/repository/a svnadm ...

  4. 启用CentOS6.5 64位安装时自带的MySQL

    #service mysqld start#cd /usr/bin#mysqladmin -u root password '123456'#./mysql -u root -pEnter passw ...

  5. 百度echarts

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</t ...

  6. PorterDuffXfermode的用法

    1.下面的Xfermode子类可以改变这种行为: AvoidXfermode  指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode  当覆盖 ...

  7. WCF 依赖注入-- Attribute

    最近,工作之余学习WCF(Windows Communication Fundation)时,感觉自己还有好多的东西需要学习呀⊙﹏⊙b汗,于是想记录下自己学习WCF的心得,以鼓励自己再接再厉,同时希望 ...

  8. category用法

    1.今天在复习之前的category的时候,遇到一个这样子的问题.查来一下,原来苹果的官方文档中有说明,苹果时不提倡我们在类别中重写原文件的内容,如果要重写,就继承他,然后重写,但是在项目中,有很多前 ...

  9. 清除SQL2008R2日志文件

    最近公司的SQL数据库全转移为阿里云数据库,由于自己转移的时候是执行的脚本,所以产生了很多的日志文件,都是没用的日志文件,所以自己想清除日志,自己电脑没有安装SQL2008,所以远程公司其他安装SQL ...

  10. 为什么要配置sdk-tools/platform-toools?

    为了方便使用Android SDK包含的开发工具,我们在系统环境变量中的Path设置Android SDK的安装目录下的tools目录. Android SDK中: platform-tools里有a ...