Jak zadzwonić/powiązać datepicker jQuery etykiecie lub div zamiast polu wprowadzania

Question

pracuję z datepicker jQueryUI na tej stronie - http://jqueryui.com/demos/datepicker/

jak zgłoszę go na etykiecie zamiast wejścia pole? czy to możliwe?

Answer 1

Nie zajrzałem do kodu, ale podejrzewam, że zakładano, że jest on dołączony do elementu <input type="text">.

Załóżmy, że musisz mieć ten element.

Możesz ukryć <input> i wchodzić w interakcje z datepicker za pośrednictwem wywołań do jego metod ze zdarzeń etykiety.

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

Answer 2

Czy próbujesz powiązać go, aby po kliknięciu wyświetlał etykietę lub znak Div? Możesz powiązać go z ukrytym polem tekstowym, a następnie powiązać pożądane efekty ze zdarzeniem change() tego ukrytego pola.

$(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> 

To działało w porządku dla mnie w FireFox 3.5

Answer 3

Re: problem pozycjonowania:

Wygląda datepicker ustawia swoją pozycję absolutnie, w oparciu o przesunięcie elementu to kierowania. Niestety, wyświetlanie: żadne elementy nie mają przesunięcia.

Dwa sugerowane metody:

1) Ustaw pozycję za pomocą własnej metody datepicker i przesunięcie przedmiotu do wyboru. Podaj np:

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

2) próby inny sposób ukrywanie wejście, może coś zmętnienia 0 (i jego IE równoważne wyniki: alfa (zmętnienie = X)). Inną rzeczą, aby spróbować może być ustawienie kilka stylów, aby zmniejszyć pole wprowadzania, takich jak:

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

Get wejście tak blisko niewidzialny, jak to możliwe bez faktycznie usunięcie go z widocznej strony, która to musi istnieć aby datepicker mógł uzyskać pozycję.

Answer 4

Re: Problem pozycjonowania

Powyższe propozycje nie działa dla mnie, aby uzyskać czystą UI. Mam włączoną kontrolę datepicker, gdy ludzie kliknęli etykietę, a ja nie chciałbym, żeby pole tekstowe było pokazane (powyższa próba była blisko, ale nadal pole tekstowe skupiło się na innych kwestiach).

Rozwiązaniem dla mnie było utworzenie pola tekstowego, w którym datepicker jest dołączony do wejścia < typ wejścia = "ukryty" .... /> To rozwiązało wszystkie problemy (włożyłem ukryty kontrolkę wejściową tuż przed etykieta tak, aby przesunięcie od kontroli wejścia było odpowiednie dla mojej etykiety).

Warto zauważyć, że ustawienie normalnego stylu kontrolek wprowadzania danych do wyświetlenia: brak lub widoczność: ukryta itd. Nie działa.

Przyczyną działania tego rozwiązania jest klauzula w źródle kontrolki datepicker, która wykonuje określone funkcje tylko wtedy, gdy "type! =" Hidden ".

Answer 5

Datecciker inicjalizuje element wejściowy (textbox), ale zgodnie z this bug nie można go zainicjować na ukrytych danych wejściowych. Znalazłem trick ze zmianą źródła nieco w 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; 
    } 

zmiana była tutaj

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

Answer 6

Chciałem tekst do działania jako mój spust. Rozwiązałem to, wprowadzając dane wejściowe wewnątrz jednostki display-inline div, dzięki czemu dane wejściowe są praktycznie niewidoczne wewnątrz, przy użyciu opacity: 0, position: absolute + pointer-events: none.

Zobacz mój przykład tutaj: http://codepen.io/KATT/pen/XJbmVr