时间插件--daterangepicker使⽤和配置详解
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
3.配置详解参考⽹址:
4.代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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(
$("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").dDate.format('YYYY-MM-DD'));
$("#date2").val(picker.startDate.format('YYYY-MM-DD')+" ⾄ "+dDate.format('YYYY-MM-DD'));  });
});
</script>
</head>
<body>
<div class="form-group">
<label>单个</label>
<div>
<input type="text" name="date1" id="date1" class="form-control" >
<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" >
<input type="hidden" id = "startTime" name="startTime" class="form-control" />
<input type="hidden" id = "endTime" name="endTime" class="form-control" />
</div>
</div>
</body>
为什么使用bootstrap?</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。