如何使用bootstrap的daterangepicker插件

2025-05-12 03:31:44
推荐回答(1个)
回答1:

工具/原料
Bootstrap 最新版本
方法/步骤
首先,我们将这款日期控件下载下来。百度bootstrap-daterangepicker即可。
下载下来解压的文件如图。
主要文件有
daterangepicker.js
moment.js
bootstrap.min.css
daterangepicker-bs3.css
即两个js文件,两个css文件。
我们先打开demo看一下。
这个日历效果很好,外形也十分美观。
打开demo的代码,小编就以demo为例,来介绍一下这款日期控件的用法。
首先,我们可以看到,这里有一个input。
然后js中通过id“#reservation”来定位这个input,使它成为一个日期控件。
激活日期控件的方法很简单(无参数法)
$('#reservation').daterangepicker();
这样就可以建立一个最简单日期选择器了。