关于bootstrap的日历控件daterangepicker

来源：互联网发布：农村淘宝官网招蓦编辑：程序博客网时间：2024/04/29 18:45

本来想自己可见，但是好像csdn设置不了，仅仅作为笔记来用而已，一方面是复习，另一方面是以后自己可以查阅，请大神不要嘲笑。

首先你得引入daterangepicker.js 这个文件，

//<input name="reservation"id="reservation" class="form-control active" type="text">

上面的input用来显示日历控件，在页面加载完成之后我们可以通过下面的函数来初始化日历控件，

每一个参数都有说明，minDate和maxDate能够很好的限制日历的时间范围，在页面显示的时候，有时候为了更好的控制日历范围这是一个不错的参数。

如果需要默认显示当前时间的话，在这里我还没有更好的方法，唯一的办法是在jsp页面可以获取当前时间，并且把当前时间转为字符串这是到input的value属性里面！

这其实就是js函数对input的value属性进行赋值而已。

$("#reservation").daterangepicker({
singleDatePicker: false,//设置为true时看看效果
showDropdowns: true,//必须设置
minDate:'05/17/2016',//最远日期
maxDate:'05/19/2016',//最长日期
});

$('#reservation').val('05/19/2016 - 05/19/2016');//默认为当前时间，

当前时间可以利用下面的代码来获取

var today=new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var todayStr = ""+year+"/"+month+"/"+day;

$('#reservation').val(todayStr +' - ' +todayStr );//默认为当前时间，

0 1