9

ボタンと非表示の入力があります。

クリックしたボタンの下に日付ピッカーが開きます。そして、選択した日付が非表示の入力に挿入されます。

（日付ピッカーオプションを使用して）新しいボタンを作成したくないので、入力を表示したくありません。

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

何か案は？

4

3 に答える 3

13

私は .show().focus().hide() を実行してこれを行いました-少し汚れていますが完全に機能します:

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

http://jsfiddle.net/JKLBn/

于 2014-06-18T14:14:56.050 に答える
1

これは少しハックですが、問題なく動作するようです:

  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/

于 2012-06-27T00:54:41.237 に答える