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

Question

Я работаю с jqueryui datepicker на этой странице - http://jqueryui.com/demos/datepicker/

Как я могу назвать это на ярлыке вместо поля ввода? Возможно ли это?

Answer 1

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

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

Вы можете скрыть <input> и взаимодействовать с датщиком через вызовы его методов из событий вашей метки.

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

Answer 2

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

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

Решением для меня было сделать текстовое поле, в котором указатель даты прикреплен к Это решило все проблемы для меня (я поставил скрытый элемент управления вводом непосредственно перед метка, чтобы смещение от элемента управления вводом было правильным для моей метки).

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

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

Answer 3

Вы пытаетесь связать его так, чтобы он показывался по щелчку или чтобы результаты заполняли метку или раздел? Вы можете привязать его к скрытому текстовому полю, а затем привязать нужные эффекты к событию 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

Answer 4

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

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

Answer 5

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

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

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

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 мог получить позицию.

Answer 6

Datepciker инициализируется в элементе input (textbox), но согласно эта ошибка не может быть инициализирована при скрытом вводе. Я нашел хитрость с небольшим изменением источника в 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'];