Pole wyboru daty

Z pewnych przyczyn chcę datę wprowadzać w zwykłym polu tekstowym. Ale chcę też aby był możliwy wybór z kalendarza.
Robię to w taki sposób, że obok zwykłego pola tekstowego mam pole input date, które jest niewidoczne. Posiada ono label z HMLową ikonką kalendarza.
Efekt jest taki, że po kliknięciu w ikonę kalendarza otwiera się kalendarz z wyborem daty. Podstawianie tej daty do pola tekstowego jest łatwe do ogarnięcia w JS.
Działa w FF

Czy ktoś ma pomysł co zrobić żeby działało to też w Chrome?
W Chrome klikanie w label powoduje przejście do pola wyboru daty ale bez rozwijania kalendarza, przejście jakby w jego lewą część. Tam pole daty jest jakby przedzielone na pół i dopiero klikniecie w prawą stronę pola otwiera kalendarza, co oczywiście przy moim pomyśle nie zadziała bo pole jest niewidoczne.

chodzi mi generalnie o jakiś prosty sposób w czystym JS na skorzystanie z kalendarza domyślnego w HTML, ale żeby samą date móc też ręcznie wprowadzać w zwykłym polu tekstowym, bo to standardowe HMLowe nie za bardzo pozwala wpisywać z ręki.

Ale wiesz, że bez konkretnego kodu to ciężko będzie cokolwiek doradzić? :P

@cerrato:

<input type="text" placeholder="dd-mm-rrr">
<input type="date" style="display: none" id="data"/>
<label for="data" >&#128197;</label>

Sam HTML. w FF działa. Klikam w ikonkę kalendarza i otwiera się wybór. W Chrome z przyczyn które opisałem wyżej nie.
JS odnośnie potem pobierania daty z niewidocznego pola i wklejania do widocznego pola ogarniam.
Chodzi mi tylko co zrobić żeby niezależnie od przeglądarki klikaniem w ikonę otwierać wybór z kalendarza, ale móc też edytować datę ręcznie.

Pesob napisał(a):

@cerrato:

<input type="text" placeholder="dd-mm-rrr">
<input type="date" style="display: none" id="data"/>
<label for="data" >&#128197;</label>

Sam HTML. w FF działa. Klikam w ikonkę kalendarza i otwiera się wybór. W Chrome z przyczyn które opisałem wyżej nie.
JS odnośnie potem pobierania daty z niewidocznego pola i wklejania do widocznego pola ogarniam.
Chodzi mi tylko co zrobić żeby niezależnie od przeglądarki klikaniem w ikonę otwierać wybór z kalendarza, ale móc też edytować datę ręcznie.

To co widzisz w Firefoxie to integracja przeglądarki w pole <input/>, to nie jest "Twoja aplikacja". Tak długo jak nie napiszesz swojego wyskakującego okienka, tak dlugo zachowanie się będzie różnić pomiędzy przeglądarkami.

W Javascript coś takiego, w zależności od przeglądarki:

<input type="text" placeholder="dd-mm-rrr" id="text"> <input type="date" id="data">

#text
{ z-index: 2
; position: relative
}
#data
{ z-index: 1
; position: relative
; left: -140px
; top: -2px
}

;)