While using the date picker, I want it to match the width of the input text box. When closing the date picker, I prefer a smooth and single motion. However, after selecting a from and to date, the datepicker no longer closes smoothly.
I have attempted solutions like inst.dpDiv.outerWidth(0) and modifying code from , but none have resolved the issue, leaving me stuck in a loop.
I considered sharing a JSFiddle, but discrepancies between Sublime and JSFiddle made it difficult. The problem vanishes too quickly for a screenshot as well.
I've tried to include only relevant code below. Any suggestions?
Update - Thanks to Ghassen Louhaichi for the edit; you can observe the stuttering in the snippet below.
$(function() {
from = $('#arrivalDate').datepicker({
beforeShow: function(input, inst) {
setTimeout(function() {
inst.dpDiv.outerWidth($('#arrivalDate').outerWidth());
}, 0);
},
onClose: function() {
if ($('#arrivalDate').datepicker('getDate') != null) {
if ($('#departureDate').datepicker('getDate') == null) {
jQuery('#departureDate').datepicker('show');
}
}
}
})
.on('change', function(input, inst) {
to.datepicker('option', 'minDate', $('#arrivalDate').datepicker('getDate'));
});
to = $('#departureDate').datepicker({
beforeShow: function(input, inst) {
setTimeout(function() {
inst.dpDiv.outerWidth($('#departureDate').outerWidth());
}, 0);
},
onClose: function() {
if ($('#departureDate').datepicker('getDate') != null) {
if ($('#arrivalDate').datepicker('getDate') == null) {
jQuery('#arrivalDate').datepicker('show');
}
}
}
})
.on('change', function(input, inst) {
from.datepicker('option', 'maxDate', $('#departureDate').datepicker('getDate'));
});
$('div.ui-datepicker').on('click', function() {
$(this).outerWidth($('#arrivalDate').outerWidth());
});
});input {
width: 50%;
height: 50px;
}<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="box"><input id="arrivalDate" type="text" /></div>
<div class="box"><input id="departureDate" type="text" /></div>