如何居中使用datepicker日历按钮

Question

使用以下代码将用于打开日历的自定义按钮添加到Jquery ui datepicker小部件中。

按钮与输入字段不在同一行：

如何向下移动按钮以使其与其他元素显示在同一行？

 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

尝试向输入和按钮添加相同的vertical-align CSS属性。 例如，$(elem).next('button.ui-datepicker-trigger').andSelf().css("verticalAlign", "middle");