Как позвонить/привязать Jquery DatePicker к метке или вместо ДИВА поля ввода

Question

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

Как я называю это на этикетке вместо ввода поле? Это возможно?

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

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

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

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

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

2) Попробуйте другой способ скрыть свой вклад, может быть что-то вроде помутнения: 0 (и IE эквивалент, фильтр: альфа (непрозрачность = х)). Другое дело, чтобы попытаться может быть установку кучи стилей, чтобы уменьшить поле ввода, например:

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

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

Answer 4

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

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

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

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

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

Answer 5

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

Answer 6

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

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