<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<form id="taskForm">
<div class="export-container">
<div class="export-item">
<label>选择消息日期范围</label>
<div class="daterange">
<input class="input-item" name="range_date" type="text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
<div class="modal-footer">
<div class="cancel jq_modal_close">取消</div>
<input id="createTaskBtn" type="submit" class="confirm" value="确定">
</div>
</form>
// 导出监测信息弹窗,选择日期
var startDate = "2018-09-01";
var endDate = "2018-10-01";
$(".daterange input").each(function () {
var $this = $(this);
$this.daterangepicker({
startDate: "2018-09-01",
endDate: "2018-10-01",
locale: {
"format": "YYYY-MM-DD", // 显示格式
"separator": " ~ ", // 两个日期之间的分割线
// 中文化
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "开始",
"toLabel": "结束",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
},
}, function (start, end, label) {
startDate = start.format("YYYY-MM-DD");
endDate = end.format("YYYY-MM-DD");
// 设置最小宽度,否则显示不全
}).css("min-width", "210px").next("i").click(function () {
// 对日期的i标签增加click事件,使其在鼠标点击时可以拉出日期选择
$(this).parent().find('input').click();
});
});