1.序言: daterangepicker是Bootstrap的一個時間組件,使用很方便
用於選擇日期范圍的JavaScript組件。 設計用於Bootstrap CSS框架。
它最初是為了改善報表而創建的，它可以連接到任何網頁元素，彈出兩個日歷，用於選擇日期、時間或從預定義的范圍，如“最后30天”。
2.需要的js和css:
bootstrap.min.css
daterangepicker.css
jquery-2.2.3.min.js
moment.js
daterangepicker.js
獲取代碼文件和js css文件地址:https://pan.baidu.com/s/12fjQSWkm5rlWi2dgPH_tyw 密碼:elwb
3.配置詳解參考網址:
配置詳解(不太全,但夠了):https://www.cnblogs.com/leijing0607/p/7698414.html
配置詳解(配合上面一起看):http://blog.csdn.net/Webben/article/details/78319276
問題已經小BUG修復(可以看看):https://www.cnblogs.com/gtlm/p/7719739.html
4.代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>daterangepicker組件Demo</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="daterangepicker.css">
<script src="jquery-2.2.3.min.js"></script>
<script src="daterangepicker/moment.js"></script>
<script src="daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">
$(function () {
//單個時間插件
$("input[name='date1']").daterangepicker(
{
singleDatePicker: true,//設置為單個的datepicker，而不是有區間的datepicker 默認false
showDropdowns: true,//當設置值為true的時候，允許年份和月份通過下拉框的形式選擇 默認false
autoUpdateInput: false,//1.當設置為false的時候,不給與默認值(當前時間)2.選擇時間時,失去鼠標焦點,不會給與默認值 默認true
timePicker24Hour : true,//設置小時為24小時制 默認false
timePicker : false,//可選中時分 默認false
locale: {
format: "YYYY-MM-DD",
separator: " - ",
daysOfWeek: ["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
}
}
).on('cancel.daterangepicker', function(ev, picker) {
$("#date1").val("請選擇日期");
$("#submitDate").val("");
}).on('apply.daterangepicker', function(ev, picker) {
$("#submitDate").val(picker.startDate.format('YYYY-MM-DD'));
$("#date1").val(picker.startDate.format('YYYY-MM-DD'));
});
//區間時間插件
$("input[name='date2']").daterangepicker(
{
// autoApply: true,
autoUpdateInput: false,
// alwaysShowCalendars: true,
ranges: {
'今天': [moment(),moment()],
'昨天': [moment().subtract(1, 'days'),moment().subtract(1, 'days')],
'近7天': [moment().subtract(7, 'days'), moment()],
'這個月': [moment().startOf('month'), moment().endOf('month')],
'上個月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: "YYYY/MM/DD HH:MM:SS",
separator: " - ",
applyLabel: "確認",
cancelLabel: "清空",
fromLabel: "開始時間",
toLabel: "結束時間",
customRangeLabel: "自定義",
daysOfWeek: ["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
}
}
).on('cancel.daterangepicker', function(ev, picker) {
$("#date2").val("請選擇日期范圍");
$("#startTime").val("");
$("#endTime").val("");
}).on('apply.daterangepicker', function(ev, picker) {
$("#startTime").val(picker.startDate.format('YYYY-MM-DD'));
$("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
$("#date2").val(picker.startDate.format('YYYY-MM-DD')+" 至 "+picker.endDate.format('YYYY-MM-DD'));
});
});
</script>
</head>
<body>
<div class="form-group">
<label>單個</label>
<div>
<input type="text" name="date1" id="date1" class="form-control" style="width: 20%;">
<input type="hidden" id = "submitDate" name="submitDate" class="form-control" />
</div>
</div>
<br>
<div class="form-group">
<label>區間</label>
<div>
<input type="text" name="date2" id="date2" class="form-control" style="width: 20%;">
<input type="hidden" id = "startTime" name="startTime" class="form-control" />
<input type="hidden" id = "endTime" name="endTime" class="form-control" />
</div>
</div>
</body>
</html>