Question

我想使用一个日期选择器，但我不需要任何输入字段来填充选定的日期，只需抓住选定的值并根据我的需要使用。

我正在实施这样的案例：如果必须显示用户点击div datepicker，请设置div。

无法使其正常运作。最后一个实现隐藏输入字段，但它也失败，错误“位置为空”，因为控件无法获得隐藏元素的偏移..

任何实施的想法？

JS代码：

<script type="text/javascript">

    $(function () {

        $('.datepicker').datepicker();

        $('.datepicker-holder').live('click', function () {
            $('.datepicker').not('.hasDatePicker').datepicker('show');
        });

    });

</script>

标记：

<div class="datepicker-holder">
    <input class="datepicker" type="hidden"/>
</div>

Answer 1

OP澄清之后的另一次尝试。当您单击div中显示日期选择器时，似乎位置为“确定”。测试铬:)

http://jsbin.com/ivuju3/6/

  <div>
    asdasdasdasdasdasdasdasdadsasdasd
  </div>
  <div class="datepicker-holder" style="border: 1px solid red">
    calendar should appear here -> <input class="datepicker" style="width: 0px; border: none;"/>
    click here
  </div>

  <script type="text/javascript">
    $(function () {

        $('.datepicker').datepicker();
        $('.datepicker-holder').live('click', function () {
            $('.datepicker').not('.hasDatePicker').datepicker('show');
        });

    });
  </script>

如果这不起作用，你必须使用datepicker中的beforeShow事件来设置datepicker的位置，但我认为这不会起作用（位置是在该事件之后计算的）所以只改变jquery-ui源代码，将工作。

Answer 2

此示例通过按下按钮打开日期选择器，您可以使用datepicker示例代替使用图像，我不知道您真正想要的是什么:)。我测试了它，它适用于FF，Chrome和IE8：

<form>
    <p>Date is here: <input id="date" type="textbox" style="display:none;" /></p>
</form>

<script type="text/javascript">
    $(document).ready(function() {
        $("#date").datepicker({showOn: 'button', buttonText: "select" });
    });
</script>

Answer 3

仅供参考，这是我的实施：

代码：

    $('.plantodate').live('click', function () {
            $(this).after('<span class="datepicker"></span>');
            $('.datepicker').datepicker({
                onSelect: function (date, inst) {
                    $('.datepicker').remove();
                }
            });
});

HTML：

<div class="plantodate"></div>

它对我很有用。

div中的jquery datepicker，position为null错误

3 个答案: