帶隱藏輸入的jqueryui日期選擇器

我希望datepicker在按鈕下面打開，我點擊它。並將選定的日期插入到隱藏的輸入中。

我不想創建一個新的按鈕（使用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>

任何想法？

來源

2012-06-25 VMOrtega

我可以看到你的代碼ASE？ –

這是一個小哈克，但它似乎好工作：

附上日期選擇器的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/

來源

2012-06-27 00:54:41

它似乎沒有工作了。 –

@ J.Ghyllebert我已將jsfiddle更新爲可用的版本。在jQuery 1.9.1和jQueryUI 1.9.2 jsfiddle中，似乎存在一個問題，即$ .browser.msie上的日期選擇器扼流器。 – kibibu

而不是使用隱藏的輸入，使用文本輸入並使用CSS隱藏它。初始化隱藏輸入中的日期選擇器會導致定位錯誤。 –

我做一個.show（）這樣做重點（）隱藏（） - 完美的作品，雖然這是一個有點不潔淨

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

http://jsfiddle.net/JKLBn/

來源

2014-06-18 14:14:56

在IE和更新的jQuery版本中不起作用。（可能因爲IE設置異步集中） –

帶隱藏輸入的jqueryui日期選擇器

回答

相關問題