如何居中日期选择器日历按钮

Question

Custom button to open calendar is added to Jquery ui datepicker widget using code below.

button does not appear in same row as input field:

How to move button down so that it appears in same row with other elements ?

 setTimeout(function () {
    $(elem).css({ "box-sizing": "border-box", width: "68px" }).datepicker({
        dateFormat: 'dd.mm.yy',
        showOn: 'button',
        changeYear: true,
        changeMonth: true,
        showWeek: true,
        showButtonPanel: true
    })
    .removeClass("ui-corner-all").addClass("ui-corner-left");

    $(elem).next('button.ui-datepicker-trigger').button({
        text: false,
        icons: { primary: 'ui-icon-calculator' }
    }).css({ width: '1em', height: '1em' })
        .removeClass("ui-corner-all").addClass("ui-corner-right")
    .find('span.ui-button-text')
    .css({ padding: '0.1em' })
    .siblings('span.ui-button-icon-primary')
    .css({ marginLeft: "-8.5px", marginTop: "-8.5px" });

}, 100);

Answer 1

Try adding the same vertical-align CSS property to both the input and button. eg, $(elem).next('button.ui-datepicker-trigger').andSelf().css("verticalAlign", "middle");