Date Range Picker时间区间组件用法

最新推荐文章于 2024-05-17 09:45:08 发布

哈哈哦0

最新推荐文章于 2024-05-17 09:45:08 发布

阅读量842

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/qq_29207823/article/details/88065112

版权

前端同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>date range picker</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="moment.js"></script>
	<script src="daterangepicker.js"></script>
</head>
<body>
	<input type="text" name="daterangepicker">
<script>
$("input[name=daterangepicker]").daterangepicker({
    singleDatePicker: true, //单个时间组件
	// autoApply: true,
	autoUpdateInput: true,
	// alwaysShowCalendars: true,
	locale: {
		format: "YYYY-MM-DD",
		separator: " 至 ",
		applyLabel: "确认",
		cancelLabel: "清空",
		fromLabel: "开始时间",
		toLabel: "结束时间",
		customRangeLabel: "自定义",
	},
	startDate: defaultStartDate,  //选中日期的开始时间
	endDate: defaultEndDate,  //选中日期的结束时间
	maxDate: moment(),  //可选择的最大日期
	ranges: {
		'近7天': [moment().subtract(7, 'days'), moment()],
		'近15天': [moment().subtract(15, 'days'), moment()],
		'这个月': [moment().subtract(30, 'days'), moment()],
		'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	}
}).on("apply.daterangepicker", function(ev, picker){   //日期选择完成后执行的事件
	var startTime = picker.startDate.format('YYYY-MM-DD');  //选中的日期开始时间
	var endTime = picker.endDate.format('YYYY-MM-DD');  //选中的日期结束时间
}).on('cancel.daterangepicker', function(ev, picker) {  
     $("#date2").val("请选择日期范围");
     $("#startTime").val("");
     $("#endTime").val("");
	     })
</script>
</body>
</html>

效果图：

文件下载参考地址：http://www.daterangepicker.com/#examples

哈哈哦0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Date Range Picker时间区间组件用法

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;date range picker&lt;/title&gt; &lt;link rel="stylesheet" href="bootstrap.min.css"&gt; &lt;link rel="stylesheet
复制链接

扫一扫