bootstrap日历插件DateRangePicker的使用
1、下载插件地址：http://www.daterangepicker.com/
2、在HBuilder中新建一个web项目
3、解压缩bootstrap-daterangepicker-master.zip文件，将js和css文件引入项目中
4、编辑html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="./js/moment.js"></script>
<script src="./js/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="./css/daterangepicker.css" />
</head>
<body>
<div class="container"
<div class="row">
<div class="col-md-12">
<input id="demo" class="pull-right" type="text" name="daterange" value="">
</div>
</div>
</div>
</body>
<script>
$("#demo").daterangepicker({
"ranges" : {
"今日": [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")]
},
"locale": {
"format": "YYYY-MM-DD",
"separator": " - ",
"applyLabel": "应用",
"cancelLabel": "取消",
"fromLabel": "开始时间",
"toLabel": "结束时间",
"customRangeLabel": "自定义",
"weekLabel": "周",
"daysOfWeek": [
"7",
"1",
"2",
"3",
"4",
"5",
"6"
],
"monthNames": [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
],
"firstDay": 1
},
"alwaysShowCalendars": true,
"startDate": "2017-01-01",
"endDate": "2017-01-07"
});
</script>
</html>
5、在浏览器中打开html文件
