如何使用bootstrap的daterangepicker插件

Posted 2023-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用bootstrap的daterangepicker插件相关的知识，希望对你有一定的参考价值。

参考技术A 首先，我们将这款日期控件下载下来。百度bootstrap-daterangepicker即可。

下载下来解压的文件如图。
主要文件有

即两个js文件，两个css文件。

我们先打开demo看一下。
这个日历效果很好，外形也十分美观。

打开demo的代码，小编就以demo为例，来介绍一下这款日期控件的用法。
首先，我们可以看到，这里有一个input。
然后js中通过id“#reservation”来定位这个input，使它成为一个日期控件。
激活日期控件的方法很简单（无参数法）
$('#reservation').daterangepicker();
这样就可以建立一个最简单日期选择器了。
效果如图。

加参数的日历可以通过自己修改初始化参数来选择自己要用的日期选择器。
bootstrap的这款控件还是相当强大的，几乎可以满足你的一切要求。
在参数的设置下，你可以得到各种各样的日期选择格式，如图。

如何使用bootstrap框架 bootstrap入门必看!

前言: 前几天，本想做一个自适应的界面，但自己写必然很丑，所以想用下bootstarp框架，之前听别人说bootstrap很牛的样子。但我完全不会bootstrap...

下载&目录

看bootstrap官网（http://v3.bootcss.com/getting-started/），接着我下载了用于生产环境Bootstrap:

如何使用bootstrap框架 bootstrap入门必看!

解压出来是这样的:

如何使用bootstrap框架 bootstrap入门必看!

目录结构大概是这样的，前几天在官网有看到。下面这个目录结构你应该先了解下:

bootstrap3
├── css
│├── bootstrap-theme.css //主题类型，生产上一般用不到
│├── bootstrap-theme.css.map //主题类型，生产上一般用不到
│├── bootstrap-theme.min.css //主题类型，生产上一般用不到
│ ├── bootstrap.css
│ ├── bootstrap.css.map //做映射的，可以理解为 shuaige = “luotianshuai” 那么掉shuaige的时候就相当于掉luotianshuai
│ └── bootstrap.min.css
├──fonts //包含了字体图标文件，他也是做的对应。下面的文件包含了不同系统下的字体图标
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js
├── bootstrap.js
├── bootstrap.min.js

bootstrap做了很多美化过的css样式在bootstrap.css中，js则放在bootstrap.js。注意了，bootstrap的js与Jquery的js是不一样的。bootstrap的js必须依赖Jquery。所以在导入JS的时候，得先导入Jquery.

应用

接下来看官网给我们推荐的入门级模版（http://v3.bootcss.com/examples/starter-template/）.

虽然不怎么好看，但我想在本地上也能有这么个HTML文件。怎么搞??
右击鼠标，点击网页另存为，保存到本地。

如何使用bootstrap框架 bootstrap入门必看!