t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件。该jquery日期选择器提供多个配置参数和方法,可以创建响应式的、灵活的、多种主题效果的日期范围选择器。
内置10种主题效果。
同一个页面可以生成多个日期选择器实例。
可以自定义日期格式。
提供大量有用的配置参数和API。
适用于酒店类入住时间范围选择。
使用方法
在页面中引入下面的文件。
<link rel="stylesheet" href="public/theme/css/t-datepicker.min.css"> <link rel="stylesheet" href="public/theme/css/themes/t-datepicker-main.css"> <script src="path/to/jquery.min.js"></script> <script src="public/theme/js/t-datepicker.min.js"></script>
HTML结构
最简单的使用方法如下:创建一个带t-datepickerclass类的容器。
<div class="t-datepicker"> <div class="t-check-in"></div> <div class="t-check-out"></div> </div>
在初始化插件之后,生成的完整HTML如下:
<div class="t-datepicker"> <div class="t-check-in"> <div class="t-dates t-date-check-in"> <label class="t-date-info-title">Check In</label> </div> <input type="hidden" class="t-input-check-in" value="null" name="start"> <div class="t-datepicker-day"> <table class="t-table-condensed"> <!-- Date theme calendar --> </table> </div> </div> <div class="t-check-out"> <div class="t-dates t-date-check-out"> <label class="t-date-info-title">Check Out</label> </div> <input type="hidden" class="t-input-check-out" value="null" name="end"> </div> </div>
初始化插件
在页面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