带有隐藏输入的 jqueryui datepicker

Posted 2023-05-07

【中文标题】带有隐藏输入的 jqueryui datepicker

【英文标题】：jqueryui datepicker with hidden input

【发布时间】：2012-06-26 22:56:51

【问题描述】：

我有一个按钮和一个隐藏的输入。

我希望日期选择器在我单击它的按钮下方打开。 并且选择的日期被插入到隐藏的输入中。

我不想创建新按钮（使用日期选择器选项），也不想显示输入。

<button type="button" class="btn" id="date_button">Select Date...</button>

<input type="hidden" name="date" id="date_field" />

<script>
    $('#date_button').datepicker(
        showOn: "button",
        onSelect: function( dateText ) 
            $('#date_field').val( dateText );
            $('#date_button').text( dateText );
        
    )
</script>

有什么想法吗？

【参考方案1】：

我通过 .show().focus().hide() 做到了这一点——虽然有点不干净，但效果很好：

$(document).ready(function() 
    $('input').datepicker();
        $('#mybutton').click(function() 
        $('input').show().focus().hide();
    );
);

http://jsfiddle.net/JKLBn/

【讨论】：

不适用于带有较新 jQuery 版本的 IE。 （可能是因为 IE 异步设置焦点）

【参考方案2】：

这有点hacky，但它似乎可以正常工作：

将日期选择器附加到input 而不是按钮。 在打开时将日期选择器重新定位到按钮下方。

var $button = $("#date_button"),
    left = $button.offset().left,
    top = $button.offset().top + $button.height();

$('#date_field').datepicker(
    onSelect: function(dateText) 
        $('#date_field').val(dateText);
        $button.text(dateText);
    ,
    beforeShow: function (event, ui) 
        setTimeout(function () 
            ui.dpDiv.css( left: left, top: top );      
        , 5);               
    
);

$button.on("click", function() 
    $("#date_field").datepicker("show");
);

示例： http://jsfiddle.net/StUsH/

【讨论】：

@J.Ghyllebert 我已将 jsfiddle 更新为可以使用的版本。 jQuery 1.9.1 和 jQueryUI 1.9.2 的 jsfiddle 中似乎存在问题，$.browser.msie 上的日期选择器阻塞。

不要使用隐藏输入，而是使用文本输入并使用 CSS 将其隐藏。在隐藏输入上初始化日期选择器会导致定位错误。

【参考方案3】：

我以不同的方式做到了。 我隐藏了带有样式的按钮的普通文本输入：

style="outline: none; color:white; margin-top:-20px; border:none;"

所以它不会出现在页面上。它是可聚焦的，而且效果很好。