JQuery datepicker без ввода

У меня довольно сложное веб-приложение, которое я бы хотел добавить к пользовательскому интерфейсу выбора даты.

Проблема, с которой я сталкиваюсь, заключается в том, что мне не удалось выяснить из документов, как реально контролировать, как и когда появляется датапикер. Элементы формы не включены (и нет, я не собираюсь добавлять секретное поле формы), поэтому простой и простой подход "без коробки" просто не будет работать.

Я надеюсь, что кто-то может дать небольшое руководство по шаблону, который позволяет мне программно вызывать datepicker. Я считаю, что знаю, как использовать пользовательские события datepicker для инициализации и позиционирования, а также для восстановления выбранного значения, когда пользователь его отклонит. Мне просто сложно создать экземпляр datepicker, так как я не свяжу его с элементом.

Здесь что не работает:

function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
    var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );

    jQuery.datepicker('dialog',
        (bIsDate ? new Date(sOriginal) : new Date()), // date
        function() { console.log('user picked a date'); }, // onSelect
        null, // settings (i haz none)
        event // position
    );

}

Причина в том, что "jQuery.datepicker" не является функцией. (Я делаю это неправильно.)

Я не женат на "диалоговом" подходе - это было всего лишь мое предположение, что вы вызываете его без ссылки на элемент формы.

Я использую jQuery 1.4.3 и jQueryUI 1.8.6

Ответ 1

Я прочитал код datepicker, и кажется, что, как написано, datepicker должен быть привязан к тегу ввода, div или span.

Итак, если ваше единственное возражение - использовать элемент формы, то привязка к div или span - это, вероятно, ваш лучший выбор, и вот пример того, как это сделать: fooobar.com/questions/82177/...

Если вы ищете какой-либо другой способ управления дампикером, вам, возможно, придется расширять код датпикера, чтобы делать то, что вы хотите, и если вы идете по этому маршруту, я рекомендую начать, взглянув на частный метод _inlineDatepicker в коде datepicker, который является методом, который привязывает datepicker к тегу div или span.

Ответ 2

На странице плагина http://jqueryui.com/demos/datepicker/#inline

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


<div class="demo">
    Date: <div id="datepicker"></div>
</div><!-- End demo -->

Отобразить датупик, встроенный в страницу, а не в оверлей. Просто вызовите .datepicker() в div вместо ввода.

Ответ 3

Вы должны определить поле ввода динамически, а затем прикрепите datepicker к вашему новому классу без поля. Не думаю, что он будет работать.

<input type="hidden" id="yourField" />

и используйте

$("#yourField").datepicker({
        buttonImage: '../yourImage.png',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });