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

內(nèi)置10種主題效果。

同一個(gè)頁面可以生成多個(gè)日期選擇器實(shí)例。

可以自定義日期格式。

提供大量有用的配置參數(shù)和API。

適用于酒店類入住時(shí)間范圍選擇。

使用方法

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

HTML結(jié)構(gòu)

最簡單的使用方法如下：創(chuàng)建一個(gè)帶t-datepickerclass類的容器。

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

Check In

Check Out

初始化插件

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

$(document).ready(function(){

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

});

顏色主題

t-datepicker日期選擇器有10種內(nèi)置顏色主題，使用時(shí)引入相應(yīng)的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

配置參數(shù)

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

autoClose：是否在選擇日期范圍后關(guān)閉選擇器。默認(rèn)值為true。

durationArrowTop：iconArrowTop選項(xiàng)的動(dòng)畫持續(xù)時(shí)間。默認(rèn)值為200。

formatDate：格式化日期格式。可用選項(xiàng)有：yyyy-mm-dd , yyyy-dd-mm , mm-dd-yyyy , dd-mm-yyyy。

dateCheckIn：如果沒有指定該參數(shù)，默認(rèn)使用startDate作為入住開始時(shí)間。

dateCheckOut：如果沒有指定該參數(shù)，默認(rèn)使用limitNextMonth的最后日期作為離店時(shí)間。

startDate：第一次選擇的日期為開始日期，默認(rèn)為今天。

endDate：第二次選擇的日期為結(jié)束日期，如果沒有指定，插件會(huì)自動(dòng)根據(jù)numCalendar和limitNextMonth來指定。

limitPrevMonth：可選的最小月份，默認(rèn)為0。

limitNextMonth：可選的最大月份，默認(rèn)為11。

limitDateRanges：可選的日期范圍，默認(rèn)為31。

showFullDateRanges：當(dāng)鼠標(biāo)滑過日期時(shí)，顯示入住幾晚。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。