始终可见的jQuery UI DatePicker

我如何使用jQuery UI来显示一个总是可见的dateselect器小部件？

Answer 1

这很简单。 保持你的jQuery代码，但分配给一个<div>而不是一个input框。

 Date: <div id="datepicker"></div> <script> $(function() { $("#datepicker").datepicker(); }); </script> 

一个function性的例子生活在date挑选器小部件的jQuery UI网页上 ，我也在下面包含了一个。

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

Answer 2

从文档 ：

只需在div上调用.datepicker（）而不是input。

（要显示embedded在页面中的dateselect器，而不是叠加层。）

Answer 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; } 

我已经越过了上述风格，现在效果更好