最近在创建记录的时候，需要用到日历的功能。本身是使用的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. Cookie和Session的区别详解

    本文引用自:http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一 ...

  2. mysql临时禁用触发器

    mysql支持设定session变量,并且有带入到触发器中使用的能力,故可以间接的设置触发器失效 思路是: 在执行前设定一个session变量,执行过程中判断该变量的值(没有设定该变量的值时该变量默认 ...

  3. WordPress基础：文章的自定义栏目的使用

    写文章只有标题和内容,那么我想加个加个怎么办呢?这时候就可以用到自定义栏目了,这个功能相当于增加了一个键值对 1.启动“自定义栏目” 2.定义键值对 3.调用自定义栏目值 <?php $pric ...

  4. Jmeter学习（三十三）调试工具Debug Sampler

    一.Debug Sampler介绍: 使用Jmeter开发脚本时,难免需要调试,这时可以使用Jmeter的Debug Sampler,它有三个选项:JMeter properties,JMeter v ...

  5. Android中如何查看内存

    文章参照自:http://stackoverflow.com/questions/2298208/how-to-discover-memory-usage-of-my-application-in-a ...

  6. 【CSS 杂记】

    1.CSS达到截取效果 地方卡机了会计师的立法及  =>  地方卡机了... max-width: 400px; overflow: hidden; white-space: nowrap; t ...

  7. Android四大核心组件之ContentProvider

    实验内容 学习ContextProvider用法 编码实现简单ContextProvider功能 实验要求 通过简单代码了解ContextProvider功能和用法 实验步骤 ContextProvi ...

  8. leetcode 28

    题目描述: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ...

  9. 一些有意思的VR设备介绍

    1.计算机(Computers) 不久以前,一个VR系统需要百万美元的超级计算机:而如今顶级的VR系统正在使用桌面便携式计算机簇,极大的降低了价格和维护成本. 2.跟踪器(Tracking) 为了能与 ...

  10. Android 主题切换 小结

    前言 我们用手机的时候经常看到 设置里面有夜间模式和白天模式来更换APP的主题,以前以为很简单,但是实际做起来还是有各种不完美,那么我们也要去了解各种解决方案来丰富我们的知识,现在我们就来看看各种优劣 ...