Is there a way to customize the appearance of the first and last selected days in my ui datepicker for booking, similar to the design shown in the image linked below?
https://i.sstatic.net/bKnRS.jpg
var dateFormat = "DD/MM/YY",
from = $("#checkin,.checkin").datepicker({
firstDay: 1,
minDate: 0,
showButtonPanel: true,
closeText: 'Temizle',
onClose: function(dateText, inst) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
document.getElementById(this.id).value = '';
//$('.checkin,#checkin,#checkout,.checkout').val('');
}
},
onSelect: function(date) {
window.setTimeout($.proxy(function() {
$(this).parents(".book-holiday").find("#checkout,.checkout").focus();
}, this), 10);
var date2 = $('#checkin,.checkin').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
//$('#dt2').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#checkout,.checkout').datepicker('option', 'minDate', date2);
},
isTo1: true,
beforeShow: function(input, inst) {
$(this).datepicker("widget").addClass("main-datepicker");
}
});
$("#checkout,.checkout").datepicker({
firstDay: 1,
minDate: 0,
showButtonPanel: true,
closeText: 'Temizle',
onClose: function(dateText, inst) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
document.getElementById(this.id).value = '';
//$('.checkin,#checkin,#checkout,.checkout').val('');
}
var dt1 = $('#checkin,.checkin').datepicker('getDate');
console.log(dt1);
var dt2 = $('#checkout,.checkout').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#checkout,.checkout').datepicker('option', 'minDate');
$('#checkout,.checkout').datepicker('setDate', minDate);
}
},
isTo1: true,
onSelect: function(selectedDate) {
$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
},
beforeShow: function(input, inst) {
$(this).datepicker("widget").addClass("main-datepicker");
}
});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> From : <input type="text" class="checkin"> To: <input type="text" class="checkout">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>