t-datepicker是一款jQuery酒店類入住日期時間范圍選擇器插件。該jquery日期選擇器提供多個配置參數和方法，可以創建響應式的、靈活的、多種主題效果的日期范圍選擇器。它的特點還有：

內置10種主題效果。

同一個頁面可以生成多個日期選擇器實例。

可以自定義日期格式。

提供大量有用的配置參數和API。

適用于酒店類入住時間范圍選擇。

使用方法

在頁面中引入下面的文件。

HTML結構

最簡單的使用方法如下：創建一個帶t-datepickerclass類的容器。

在初始化插件之后，生成的完整HTML如下：

Check In

Check Out

初始化插件

在頁面DOM元素加載完畢之后，可以通過tDatePicker方法來初始化該日期范圍選擇器。

$(document).ready(function(){

$('.t-datepicker').tDatePicker();

});

顏色主題

t-datepicker日期選擇器有10種內置顏色主題，使用時引入相應的CSS文件。

t-datepicker-blue.css

t-datepicker-bluegrey.css

t-datepicker-cyan.css

t-datepicker-green.css

t-datepicker-lime.css

t-datepicker-main.css

t-datepicker-orange.css

t-datepicker-purple.css

t-datepicker-teal.css

t-datepicker-yellow.css

配置參數

t-datepicker日期選擇器的可用配置參數有：

autoClose：是否在選擇日期范圍后關閉選擇器。默認值為true。

durationArrowTop：iconArrowTop選項的動畫持續時間。默認值為200。

formatDate：格式化日期格式。可用選項有：yyyy-mm-dd , yyyy-dd-mm , mm-dd-yyyy , dd-mm-yyyy。

dateCheckIn：如果沒有指定該參數，默認使用startDate作為入住開始時間。

dateCheckOut：如果沒有指定該參數，默認使用limitNextMonth的最后日期作為離店時間。

startDate：第一次選擇的日期為開始日期，默認為今天。

endDate：第二次選擇的日期為結束日期，如果沒有指定，插件會自動根據numCalendar和limitNextMonth來指定。

limitPrevMonth：可選的最小月份，默認為0。

limitNextMonth：可選的最大月份，默認為11。

limitDateRanges：可選的日期范圍，默認為31。

showFullDateRanges：當鼠標滑過日期時，顯示入住幾晚。

t-datepicker jQuery酒店類入住日期時間范圍選擇器插件的github地址為：https://github.com/crazychicken/t-datepicker

總結

以上是生活随笔為你收集整理的html5 酒店入住插件,jQuery酒店类入住日期时间范围选择器插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。