Javascript 当日期选择器用户界面处于'；它已经显示了吗？

我在表单中有几个日期输入字段。目标数据字段名称通过占位符显示，输入值后占位符立即消失。出于这个原因，我在上面的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>

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

---

谢谢你的帮助

我通过再次使用隐藏和显示解决了这个问题。输入值被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");
    }
};

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");
    }
};