it-roy-ru.com

jQuery 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

18
Tom

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

Таким образом, если ваше единственное возражение заключается в использовании элемента формы, то, вероятно, лучшим вариантом будет присоединение к элементу div или span, и здесь есть пример того, как это сделать: https://stackoverflow.com/a/ 1112135

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

9
jimmym715

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

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


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

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

15
rcdmk

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

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

и использовать

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