jquery-ui - 带有隐藏输入的 jqueryui datepicker

Question

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

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

我不想创建一个新按钮（使用 datepicker 选项），也不想显示输入。

<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>

有任何想法吗？

Answer 1

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

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

http://jsfiddle.net/JKLBn/

Answer 2

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

1. 将日期选择器附加到input而不是按钮。
2. 当它打开时，将日期选择器重新定位到按钮下方。

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/

Answer 3

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

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

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