Как вызвать/привязать jquery datepicker к метке или div вместо поля ввода

Ответ 1

Я не смотрел код, но я подозреваю, что он предполагает, что он прикреплен к элементу <input type="text">.

Предположим, что у вас должен быть этот элемент.

Вы можете скрыть <input> и взаимодействовать с datepicker с помощью вызовов его методов из событий ярлыков.

$(labelselector).click(function() {
    $(inputselector).datepicker('show');
});

Ответ 2

re: проблема позиционирования

Вышеуказанные предложения не помогли мне получить чистый ui. Я активировал свой элемент управления датпикером, когда люди щелкают ярлык, и я не хотел, чтобы текстовое поле было показано вообще (вышеуказанная попытка css была закрыта, но текстовое поле было сосредоточено среди других проблем).

Решение для меня заключалось в том, чтобы сделать текстовое поле, которое привязывает datepicker к < input type = "hidden".... /" > Это решило все проблемы для меня (я поместил скрытый контроль ввода непосредственно перед меткой, чтобы смещение от элемента управления ввода было правильным для моей метки).

В частности, установка обычного стиля управления вводами для отображения: none или видимость: скрытый и т.д. не работает.

Причина, по которой это решение работает, объясняется предложениями в источнике управления датой, которые выполняют только определенные функции, если "type! =" hidden ".

Ответ 3

Вы пытаетесь связать его так, чтобы он показывался щелчком или чтобы результаты заполнили метку или Div? Вы можете привязать его к скрытому текстовому полю, а затем привязать желаемые эффекты к событию change() этого скрытого поля.

$(function() {
        $("#datepicker").datepicker();

            $("#alternate").click(function() {
                $("#datepicker").focus();
            });

        $("#datepicker").change(function() {
            $("#alternate").html($("#datepicker").val());
        });
    });

<input id="datepicker" style="display:none" /><label id="alternate">change me</label>

Это отлично работало для меня в FireFox 3.5

Ответ 4

re: проблема позиционирования:

Похоже, Datepicker полностью устанавливает свою позицию на основе смещения элемента, который он нацеливает. К сожалению, отображение: ни один элемент не имеет смещения.

Два предложенных метода:

1) Установите позицию, используя собственный метод datepicker и смещение объекта по вашему выбору. Попробуйте что-то вроде:

offset = $('myinput').parent('label').offset();
$('#date-picker').dpSetOffset(offset.left, offset.top);

2) Попробуйте использовать другой метод скрытия ввода, возможно, что-то вроде непрозрачности: 0 (и его эквивалент IE, filter: alpha (opacity = x)). Еще одна вещь, которую можно попробовать, - это установить кучу стилей, чтобы уменьшить поле ввода, например:

.my_input {
  border: 0;
  line-height: 0;
  font-size: 0;
  height: 0;
  overflow: hidden;
 }

Получите вход как можно ближе к невидимому, не удаляя его с видимой страницы, для которой он должен существовать, для того, чтобы datepicker мог получить позицию.

Ответ 5

Я хотел, чтобы текст стал моим триггером. Я решил это, если вход внутри div display-inline имеет вход, практически невидимый внутри, используя opacity: 0, position: absolute + pointer-events: none.

См. мой пример здесь: http://codepen.io/KATT/pen/XJbmVr

Ответ 6

Datepciker инициализирует элемент ввода (текстовое поле), но согласно эта ошибка, он не может быть инициализирован при скрытом вводе. Я нашел трюк с небольшим изменением источника в jqueryUi:

_findPos: function(obj) {
    var inst = this._getInst(obj);
    var isRTL = this._get(inst, 'isRTL');
    while (obj && (obj.type == 'hidden' || obj.nodeType != 1 || $.expr.filters.hidden(obj))) {
        obj = obj[isRTL ? 'previousSibling' : 'nextSibling'] || obj.parentNode;
    }

Изменения были здесь

    obj = obj[isRTL ? 'previousSibling' : 'nextSibling'];