I'm currently customizing the appearance of the jQuery datepicker, but I'm facing difficulty in aligning the dates vertically at the center.
Here's the progress I've made so far: https://jsfiddle.net/L4vrkpmc/1/
Since the datepicker is structured as a table, I attempted to center the dates vertically using the following CSS:
.ui-datepicker-calendar td{
vertical-align: middle;
}
However, this approach did not yield the desired result. Does anyone have suggestions on how to vertically center the days?
html,
body {
height: 100%;
}
#calendar {
height: 100%;
}
.ui-datepicker {
width: 100%;
height: 100%;
margin: 5px auto 0;
font: 9pt Arial, sans-serif;
/* Other styles for the datepicker */
}
/* Additional CSS code for customizing the datepicker */
<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>
<script type="text/javascript">
$(function() {
$('#calendar').datepicker({
inline: true,
showOtherMonths: true,
firstDay: 1,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
});
});
</script>
<div id="calendar"></div>Appreciate any assistance you can provide :)