欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

daterangepicker插件-自定义选择日期范围

程序员文章站 2022-05-25 08:09:14
...

  1. 引用1个css和2个js.
  2. .修改代码:指定日期范围

daterangepicker插件-自定义选择日期范围
修改代码:近3-7天、近8-15天、近16~30天、超过30天

//html
<input type="text" id="timeRange">
//js
$('#timeRange').daterangepicker({
	timePicker: false, //显示时间
	startDate: moment().subtract(6, 'days'), //设置开始日期
	endDate: moment().subtract(2, 'days'), //设置结束器日期
	minDate: moment().subtract(99, 'days'), //设置最大日期
	maxDate: moment().subtract(0, 'days'), //设置最大日期
	ranges: {
		'今日': [moment().startOf('day'), moment()],
		'近3~7天': [moment().subtract(6, 'days'), moment().subtract(2, 'days')],
		'近8~15天': [moment().subtract(14, 'days'), moment().subtract(7, 'days')],
		'近16~30天':[moment().subtract(29, 'days'), moment().subtract(15, 'days')],
		'超过30天': [moment().subtract(99, 'days'), moment().subtract(29, 'days')],
		'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
	locale: {
		format: "YYYY-MM-DD", //设置显示格式
	//	separator : ' - ',//中间的字符可设置为字母或-等
		applyLabel: '确定', //确定按钮文本
		cancelLabel: '取消', //取消按钮文本
		customRangeLabel: '自定义',
		daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
		monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
			'七月', '八月', '九月', '十月', '十一月', '十二月'
		],
		firstDay: 1
	}
}, function(start, end, label) {
	timeRangeChange = [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')];
	console.log(timeRangeChange)
});
相关标签: 项目实践