最近在创建记录的时候，需要用到日历的功能。本身是使用的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. C++ 利用 libxl 将 Excel 文件转化为 Xml 文件

    在游戏开发工作中,策划和运营一般会用Excel来编写配置文件,但是程序读取配置,最方便的还是xml文件.所以最好约定一个格式,然后在二者之间做一个转化. 本文利用libxl来读取Excel文件,利用 ...

  2. C# 关键字【转】

      C#中的关键字 关键字是对编译器具有特殊意义的预定义保留标识符.它们不能在程序中用作标识符,除非它们有一个 @ 前缀.例如,@if 是有效的标识符,但 if 不是,因为 if 是关键字. 下面是列 ...

  3. MVC+knocKout.js 实现下拉框级联

    数据库:部门表和员工表 在控制器里面的操作: public ActionResult Index3() { ViewBag.departments = new SelectList(getDepart ...

  4. windows环境，idea的Terminal每次输入git命令都要提示输入用户名，密码

    打开本地的这个目录(以上图片所示) 以我本地项目为例: 项目根目录下-->.git-->config文件 找到[remote "origin"]下url,更改其为htt ...

  5. docker好文收藏

    深入浅出Docker(一):Docker核心技术预览 2. 核心技术预览 Docker核心是一个操作系统级虚拟化方法, 理解起来可能并不像VM那样直观.我们从虚拟化方法的四个方面:隔离性.可配额/可度 ...

  6. laravel5.1学习（2）-- artisan tinker命令

    例如:为users表创建20条测试输入 G:\wamp\www\hcmf>php artisan tinker >>> namespace App; => null &g ...

  7. PPT图片双屏抽奖系统现场主要操作流程介绍

    目录 第一步:前期准备工作 第二步:现场预备与辅助展示工作 第三步:现场正式抽取工作 PPT图片双屏抽奖系统-现场抽奖视频实录 第一步:前期准备工作 把第二个步骤优化处理制作好的PPT文件 [图片.p ...

  8. leetcode 204

    题目描述: Description: Count the number of prime numbers less than a non-negative number, n. 解法一: 遍历从1-n ...

  9. Timusoj 1982. Electrification Plan

    http://acm.timus.ru/problem.aspx?space=1&num=1982 1982. Electrification Plan Time limit: 0.5 sec ...

  10. php 设计模式

    一.工厂模式 1.创建接口类,规范方法,要实现这个接口的类必须实现这个接口的所有方法,接口的方法默认是抽象的,所以不再方法前面加 abstract interface people{ public f ...