JQuery DatePicker в DIV, позиция является нулевой ошибкой - PullRequest
Новая
       6

JQuery DatePicker в DIV, позиция является нулевой ошибкой

0 голосов
/ 15 марта 2011

Я хочу использовать средство выбора даты, но мне не нужно поле ввода для заполнения выбранной даты, просто возьмите выбранное значение и используйте его для моих нужд.

Я реализую такой случай: есть div, если пользователь должен щелкнуть на элементе datepicker.

Не удалось заставить его работать. Последняя реализация со скрытым полем ввода, но она также завершается с ошибкой «position is null», так как элемент управления не может получить смещение скрытого элемента.

Есть идеи для реализации?

JS код: 

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

Ответы [ 3 ]

2 голосов
/ 15 марта 2011

Еще одна попытка после разъяснения ОП.Когда вы нажимаете в div, отображается указатель даты, кажется, что позиция в порядке.Протестировано в 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>

Если это не сработает, вы должны использовать событие beforeShow в DatePicker, чтобы установить позицию средства выбора даты, но яНе думаю, что это сработает (позиция рассчитывается после этого события), поэтому будет работать только изменение исходного кода jquery-ui.

1 голос
/ 15 марта 2011

В этом примере открывается средство выбора даты, нажав кнопку. Вы можете использовать примеры средства выбора даты вместо изображения, я не знаю, что вы действительно хотите :). Я проверил это, и он работает в 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>
0 голосов
/ 16 марта 2011

Просто для справки, вот моя реализация:

Код: 

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

HTML: 

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

Отлично работает для меня.

...