始终可见的 jQuery UI DatePicker答案

【问题标题】：Always visible jQuery UI DatePicker始终可见的 jQuery UI DatePicker
【发布时间】：2011-05-10 11:03:46
【问题描述】：

如何使用 jQuery UI 显示始终可见的日期选择器小部件？

【问题讨论】：

有人可能认为这是一个愚蠢的问题，但这对我很有用。谢谢彼得。

【解决方案1】：

这很简单。保留您的 jQuery 代码，但将其分配给 <div> 而不是输入框。

Date:
<div id="datepicker"></div>

<script>
    $(function() {
        $("#datepicker").datepicker();
    });
</script>

jQuery UI webpage for the datepicker widget 上有一个功能示例，我也在下面提供了一个。

$(function() {
  $("#datepicker").datepicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="datepicker"></div>

【讨论】：

也很高兴知道，如果您仍想将所选日期存储在某个输入字段中，则可以使用“altField”选项将目标字段选择器作为参数：$("#datepicker") .datepicker({altField: "#input_date"});

【解决方案2】：

来自the documentation：

只需在 div 上调用 .datepicker() 而不是输入。

（显示嵌入页面而不是覆盖的日期选择器。）

【讨论】：

【解决方案3】：

 .ui-datepicker {
z-index: 1000;
 width: 17em;
width:500px;
padding: .2em .2em 0;
display: none;
position: absolute;
padding: 100px 20px;
top: 100px;
left: 50%;
margin-top: -100px;
 }

我已经覆盖了上面的样式，现在效果更好了

【讨论】：