jquery 日历插件,可选择范围日历插件缩略图

项目过程遇到需要日历插件,用的 daterangepicker.css ,但是需要修改样式才能达到相应的效果

<link rel="stylesheet" href="css/daterangepicker.css" />
<script src="js/jquery.min.js" ></script>
<script src="js/moment.min.js" ></script>
<script src="js/daterangepicker.js" ></script>
<div class="data-item" id="dateSelect">
	<span class="time-val" >今日</span><span class="iconfont icon-downb"></span>
</div>
<script>
	$('#dateSelect').daterangepicker({
		locale: {
				"applyLabel": "申请",
				"cancelLabel": "取消",
				"fromLabel": "从",
				"toLabel": "到",
				"customRangeLabel": "风俗",
				"weekLabel": "W",
				"daysOfWeek": [
						"周日",
						"周一",
						"周二",
						"周三",
						"周四",
						"周五",
						"周六",
				],
				"monthNames": [
						"一月",
						"二月",
						"三月",
						"四月",
						"五月份",
						"六月",
						"七月",
						"八月",
						"九月",
						"十月",
						"十一月",
						"十二月",
				],
		},
		opens: 'center',
		applyButtonClasses:"weui-btn weui-btn_primary",
	}, function(start, end, label) {
		start_date = start.format('YYYY-MM-DD');
		end_date = end.format('YYYY-MM-DD');
		$(".time-val").text(start_date + ' ~ ' + end_date);
		$('.income-list').empty();
		page = 0;
	});
	$('#dateSelect').on('show.daterangepicker', function(ev, picker) {
		$('body').append('<div class="weui-mask"></div>')
	});
	$('#dateSelect').on('hide.daterangepicker', function(ev, picker) {
		$('.weui-mask').remove()
	});
</script>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注