<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>/*bootstrap*/
<script type="text/javascript" src="js/moment.js" ></script>
<script type="text/javascript" src="js/daterangepicker.js" ></script>
使用方法很简单：看代码<body><div class="box"><input type="text" id="demo" style="width: 300px;"/></div></body><script>
//这里是汉化方法，不要谢我。
var locale = { "format": 'YYYY-MM-DD', "separator": " - ",// "applyLabel": "确定", "cancelLabel": "取消", "fromLabel": "起始时间", "toLabel": "结束时间'", "customRangeLabel": "自定义", "weekLabel": "W", "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"], "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], "firstDay": 1 }; $('#demo').daterangepicker({ "locale": locale, "ranges" : { //'最近1小时': [moment().subtract('hours',1), moment()], '今日': [moment().startOf('day'), moment()], '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')], '最近7日': [moment().subtract('days', 6), moment()], '最近30日': [moment().subtract('days', 29), moment()], '本月': [moment().startOf("month"),moment().endOf("month")], '上个月': [moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")] }, "opens":"right", "timePicker":true, "timePickerIncrement" : 60, })</script>
另外为了消除timepicker上面的那个时间选择器，我把它的CSS样式改了，把日期选择改为默认显示了，这样就可以显示出日期而不用显示上面的时间了
在daterangepicker.js里面我们可以发现其配置项如下： //default settings for options this.parentEl = 'body'; this.element = $(element); this.startDate = moment().startOf('day'); this.endDate = moment().endOf('day'); this.minDate = false; this.maxDate = false; this.dateLimit = false; this.autoApply = false; this.singleDatePicker = false; this.showDropdowns = false; this.showWeekNumbers = false; this.showISOWeekNumbers = false; this.showCustomRangeLabel = true; this.timePicker = false; this.timePicker24Hour = false; this.timePickerIncrement = 1; this.timePickerSeconds = false; this.linkedCalendars = true; this.autoUpdateInput = true; this.alwaysShowCalendars = false; this.ranges = {};你需要引用如下Js文件且顺序不得有误,否则会报诸如$().moment()is not a function的错误，这就是JS文件加载顺序导致的，请不要作死。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>/*bootstrap*/
<script type="text/javascript" src="js/moment.js" ></script>
<script type="text/javascript" src="js/daterangepicker.js" ></script>
使用方法很简单：看代码
<body>
<div class="box">
<input type="text" id="demo" style="width: 300px;"/>
</div>
</body>
<script>
//这里是汉化方法，不要谢我。
var locale = {
"format": 'YYYY-MM-DD',
"separator": " - ",//
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#demo').daterangepicker({
"locale": locale,
"ranges" : {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日': [moment().startOf('day'), moment()],
'昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()],
'本月': [moment().startOf("month"),moment().endOf("month")],
'上个月': [moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")]
},
"opens":"right",
"timePicker":true,
"timePickerIncrement" : 60,
})
</script>
另外为了消除timepicker上面的那个时间选择器，我把它的CSS样式改了，把日期选择改为默认显示了，这样就可以显示出日期而不用显示上面的时间了
在daterangepicker.js里面我们可以发现其配置项如下：
//default settings for options
this.parentEl = 'body';
this.element = $(element);
this.startDate = moment().startOf('day');
this.endDate = moment().endOf('day');
this.minDate = false;
this.maxDate = false;
this.dateLimit = false;
this.autoApply = false;
this.singleDatePicker = false;
this.showDropdowns = false;
this.showWeekNumbers = false;
this.showISOWeekNumbers = false;
this.showCustomRangeLabel = true;
this.timePicker = false;
this.timePicker24Hour = false;
this.timePickerIncrement = 1;
this.timePickerSeconds = false;
this.linkedCalendars = true;
this.autoUpdateInput = true;
this.alwaysShowCalendars = false;
this.ranges = {};
这几乎是全部的配置用法，这里我就不一个个告诉你们它的作用，勇敢的少年们， 一个个去尝试吧！就这么点，你一个个试要不了多久，但是之后会对它了如指掌，
这也是为什么我这么棒的原因，学习不要流于表面！！！
