本文介绍了一种使用Bootstrap和jQuery等技术实现的双日历插件，该插件允许用户选择日期范围，并通过daterangepicker插件进行配置。文中包含了完整的HTML、CSS和JavaScript代码示例。
js脚本和css样式，到bootstrap官网去下载
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Default/jquery-1.9.1.min.js"></script>
<script src="Default/bootstrap.js"></script>
<script src="Default/modealayer.js/layer/layer.min.js"></script>
<script src="Default/modealayer.js/layer/w-modal-3.0-min.js"></script>
<script src="Default/w_formList/w-list-min.js"></script>
<script src="Default/dateTime/dateTiemMain.js"></script>
<link href="Default/dateTime/daterangepicker-bs3.css" rel="stylesheet" />
<script src="Default/dateTime/moment.min.js"></script>
<script src="Default/dateTime/datepicker.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<!--双日历-->
<div class="w-l-doudate">
<div class="col-lg-2 w-l-doudate-g">
<div class="input-group">
<span class="input-group-addon w-input-group-addon w-date-ioc w-l-fd">
<i class="fa fa-plus fa-calendar"></i>
</span>
<input type="text" class="form-control notext" id="SelectDate" placeholder="请选择时间" readonly="readonly" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//双日历 实例
$('#SelectDate').daterangepicker({
startDate: moment().startOf('day'),
format: 'YYYY/MM/DD', timePicker: false, showDropdowns: true,
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()]
},
opens: 'left',
}, function (start, end, label) {
});
})
function GetCheckboxVal() {
var cheval = Getccxvstate();
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
