如何在日期选择器 UI 已显示时刷新其位置？

Question

我在表单中有几个日期输入字段。目标数据字段名称通过占位符显示，输入值后该占位符消失。出于这个原因，我在上面的 0px 高 div 中显示名称，一旦输入值不为空，我将其高度设置为 24px。但是弹出的日期选择器的位置不跟随输入的位置。

相关 HTML：

<div class="form-bg-1">
    <div style="height: 0px;transition: height 0.2s ease;position: relative;overflow: hidden;">Target Name</div>
    <input placeholder="Target Name" name="target_name" type="text" class="fomt-control date" maxlength="10">
</div>

相关JS：

async function placeholder_func() {
    if ($(this).val() != '' && $(this).val() != null) {
        if ($(this).prev() != null) {
            $(this).prev().css("height", "24px");
        }
    } else {
        if ($(this).prev() != null) {
            $(this).prev().css("height", "0px");
        }
    }

    //await new Promise(r => setTimeout(r, 200));
    //alert('refresh');
};
$("input[type=text][placeholder!='']").change(placeholder_func);
$("input[type=text][placeholder!='']").keyup(placeholder_func);

我通过设置 Datepicker 的顶部距离使其工作，但如果我取消注释注释行，我也意识到位置调整正确。我宁愿让 datepicker 库进行刷新，而不是自己处理位置。那么如何触发位置刷新呢？

感谢您的帮助！

Answer 1

我通过再次使用隐藏和显示解决了这个问题。输入值被 hide 方法清除，所以我必须先将输入值存储在一个变量中。不过仍在寻找更好的解决方案！

async function placeholder_func() {
    if (($(this).prev() != null && $(this).prev().css("height") != '0px' && $(this).val().length > 1)) {
        return;
    }
    if ($(this).hasClass("date")) {
        var val = $(this).val();
        $(this).datepicker("hide");
        $(this).val(val);
    }
    if ($(this).val() != '' && $(this).val() != null) {
        if ($(this).prev() != null) {
            $(this).prev().css("height", "24px");
        }
    } else {
        if ($(this).prev() != null) {
            $(this).prev().css("height", "0px");
        }
    }
    
    if ($(this).hasClass("date")) {
        await new Promise(r => setTimeout(r, 200));
        $(this).datepicker("show");
    }
};