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

引入插件库

<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>

点击输入框后显示如下：

3.日期与时间

<input type="" id="inp" value