Date range picker, two-pane calendar with custom rendering and multiple selection. The tDatepicker more than 35 pretty options and many methods help you change date, getDate, update when you need.
jQuery-based date picker! This date picker provides an easy way of creating both single and multi-viewed calendars capable of accepting single, range, and multiple selected dates. Easy to style, with many example styles.
t-datepicker is a responsive, flexible, elegant, themeable, highly-configurable data range picker written in JavaScript (jQuery) and CSS(SASS).
Suitable for hotel app that enables the users to quickly select check-in and check-out dates in a convenient calendar popup.
git clone [email protected]:crazychicken/t-datepicker.git
npm install --save-dev t-datepicker
npm install --save-dev crazychicken/t-datepicker
https://t-datepicker.getqwerty.com/demos.html https://t-datepicker.getqwerty.com/demo-only-calendar.html
https://t-datepicker.getqwerty.com/documents.html
https://t-datepicker.getqwerty.com/options.html
https://t-datepicker.getqwerty.com/events.html
https://t-datepicker.getqwerty.com/methods.html
<link rel="stylesheet" href="public/theme/css/t-datepicker.min.css">
<link rel="stylesheet" href="public/theme/css/theme/t-datepicker-main.css">
t-datepicker.min.js
into the footer.<script src="your-part/jquery.min.js"></script> // ~1.9.2
<script src="public/theme/js/t-datepicker.min.js"></script>
<div class="t-datepicker">
<div class="t-check-in"></div>
<div class="t-check-out"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.t-datepicker').tDatePicker({
// options here
});
});
</script>
<div class="t-datepicker class_a">
<div class="t-check-in"></div>
<div class="t-check-out"></div>
</div>
<div class="t-datepicker class_b">
<div class="t-check-in"></div>
<div class="t-check-out"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
// Call global the function
$('.t-datepicker').tDatePicker({
// options here
});
$('.class_a').tDatePicker({
// options only here
});
$('.class_b').tDatePicker({
// options only here
});
});
</script>
<div class="t-datepicker">
<div class="t-check-in t-picker-only"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.t-datepicker').tDatePicker({
autoClose: true,
limitNextMonth: 3,
numCalendar : 1,
dateRangesHover: false
});
});
</script>
// Action
// Format
// Date
// Theme
// Icons
// Active date
public/
└── theme/
└── css/
| └── t-datepicker.min.css
| └── themes/
| └── t-datepicker-main.css
| └── more themes
└── js/
└── t-datepicker.min.js
sass/
├── // Themes Color
└── t-datepicker-v1.0.0.scss // @import 'path sass file your project';
Code and documentation copyright 2018, MIT license.