By default, the datepicker is displayed at the bottom of the date input field. There is no control, like jQuery UI Datepicker, to change its position. The following inline CSS is used for the ui-datepicker-div
ID to display the datepicker pop-up at the bottom.
position: absolute;
top: 919.25px;
left: 104px;
z-index: 1;
display: block;
However, if you change the CSS position top to unset
and bottom to -165px
, it will be displayed at the top of the date field. Alternatively, you can add a -275px
top margin, so it will work fine. Here is the final code and output.
/* Adjust the margin value to match with your website */
#ui-datepicker-div.ui-datepicker {
margin-top: -275px !important;
}
/* Alternative code */
#ui-datepicker-div.ui-datepicker {
bottom: -165px !important;
top: unset !important;
}
Leave a Reply