1.首先下载flatpickr.css和flatpickr.js文件，其次引入页面中
下载地址：www.htmleaf.com/jQuery/Cale…
2.html代码：
<!-- 设置入住时间范围（data-allow-input允许用户手动输入） -->
<p>入住时间
<input class="calendar" data-allow-input="true" data-min-date=today data-max-date="2021-12-31" placeholder="2022.1待定">
</p>
<p>退房时间
<input class="calendar" data-allow-input="true" data-min-date=today data-max-date="2021-12-31" placeholder="2021-11-19">
</p>
3.调用此插件
// 通过class名称，返回一个数组
document.getElementsByClassName("myCalendar").flatpickr({..config});
// 通过ID
document.getElementById("myCalendar").flatpickr();
// 使用jQuery
$(".myCalendar").flatpickr();
4.常见参数配置（设置格式类似data-min-date=today，在标签内直接使用即可）
altFormat string "F j, Y" altInput的日期格式。
altInput Boolean false 是否使用某种用户友好的方式来显示日期时间。
allowInput boolean false 是否允许用户直接在输入框中输入日期。
dateFormat string "Y-m-d" 设置日期显示格式。
defaultDate String/Date Object null 设置一个初始的日期。
enableTime boolean false 是否启用时间选择。
enableSeconds boolean false 在时间选择器中是否可以选择秒。
noCalendar boolean false 是否隐藏日历。
hourIncrement integer 1 小时输入框的步长。
minuteIncrement integer 5 分钟输入框的步长。
maxDate String null 用户可以选择的最大日期。
minDate String null 用户可以选择的最小日期。
onChange function(dateObject, dateString) null 每次日期被选择的时候都触发该函数。
onOpen function(dateObject, dateString) null 每次日历被打开时都会触发该函数。
onClose function(dateObject, dateString) null 每次日历被关闭时都会触发该函数。
shorthandCurrentMonth boolean false 以简写方式显示月份
weekNumbers boolean false 是否在日历中显示星期数。
time_24hr boolean false 是否以24小时格式来显示时间。
