CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
Alexander Beletsky
Alexander Beletsky

Reputation: 19821

jquery datepicker in div, position is null error

I want to use a datepicker, but I don't need any input field to populate selected date, just grab selected value and use for my needs.

I'm implementing such case: have a div, if user clicks on div datepicker must be shown.

Could not make it work. Last implementation with hidden input field, but it also fails with error "position is null", because control could not get offset of hidden element..

Any ideas for implementation?

JS code:

<script type="text/javascript">

    $(function () {

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

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

    });

</script>

Markup:

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

Upvotes: 0

Views: 4329

Answers (3)

Alexander Beletsky
Alexander Beletsky

Reputation: 19821

Just for reference, here is my implementation:

Code:

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

HTML:

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

It works great for me.

Upvotes: 0

AlfaTeK
AlfaTeK

Reputation: 7765

Another try after the OP clarification. When you click in the div the datepicker is shown, it seems that the position is Ok. Tested in chrome :)

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>

If this doesn't work, you have to use the beforeShow event in datepicker to set the position of the datepicker but I don't think that will work (position is calculated after that event) so only changing jquery-ui source code, will work.

Upvotes: 2

AlfaTeK
AlfaTeK

Reputation: 7765

This example opens the datepicker by pressing a button, you can use datepicker examples to instead use an image, I don't know what you really want :) . I tested this and it works in FF, Chrome and 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>

Upvotes: 1

Related Questions