jquery日历插件daterangepicker全面详解汇总

shenwen5225

于 2020-06-02 18:06:10 发布

阅读量7.2k

点赞数 3

分类专栏： html+css JavaScript 文章标签： daterangepicker javascript

本文链接：https://blog.youkuaiyun.com/shenwen522519753/article/details/106500746

版权

本文全面解析jQuery日历插件daterangepicker的使用，包括引入库、初始化日历、选项配置、方法及事件的详细说明，展示了从基础到进阶的各种用法，如日期区间选择、单日期选择、日期时间选择以及汉化配置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入插件库

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script 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"/>

初始化一个日历

1.默认会初始化一个时间区间选择器

<input id="inp" type="text">
<script>
$('#inp').daterangepicker();
</script>

点击输入框时会出现：
在这里插入图片描述
2.单日期选择器

<input type="text" id="inp" value="10/24/1984"/>
<script>
$('#inp').daterangepicker({
    
	singleDatePicker:true,  //开启单日历
 	showDropdowns:true,		//可下拉选择年，月
 	minYear:1901,			//最小日期
 	maxYear:2100			//最大可选日期
 }, function(start, end, label) {
    
 	//选择日期后的回调
    console.log(start.format('YYYY-MM-DD'))
    console.log(end.format('YYYY-MM-DD'))
    console.log(label)
});
</script>