2015-05-06 12 views
7

Zawarłem skrzypce pokazujące, co dzieje się po zastosowaniu fokusu na elemencie, ustawia fokus na "dzienną" część danych wejściowych, ale mogę " t znaleźć dokumentację na temat tego, jak DOM renderuje i identyfikuje każdą część daty.fokus miesiąc lub rok wprowadzania html5 [typ = "data"]

W jaki sposób można programowo ustawić części miesiąca/roku elementu input[type="date"] i czy istnieje dokumentacja dotycząca sposobu renderowania tego typu elementu w DOM?

https://jsfiddle.net/uytdhqax/

<input id="dob" type="date" /> 
document.getElementById('dob').focus() 
+0

Domyślam się, że to strona po stronie przeglądarki. Można utworzyć 3 wejścia i ustawić ostrość w sposób ciągły po wpisaniu dnia/miesiąca/roku. –

+0

To nie jest opcja. Używam AngularJS razem z datepicker UI-Bootstrap. Moje pytanie jest bardzo bezpośrednie i nie jestem otwarty na żadne inne rozwiązania: w jaki sposób mogę programowo skoncentrować części miesiąca/roku elementu input [type = "date"] i czy istnieje jakakolwiek dokumentacja dotycząca sposobu renderowania tego typu elementu w domenie? – trickpatty

+1

Możesz przeczytać więcej tutaj - zależy to od lokalizacji komputera - http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format –

Odpowiedz

4

Nie jest to możliwe w każdej obecnej implementacji elementu input[type=date] ile jestem świadomy. Co więcej, różne przeglądarki implementują ten element na różne sposoby, więc nie ma samodzielnej dokumentacji implementacyjnej.

Trzeba zapytać, dlaczego chcesz naśladować to zachowanie. Zmiana samej wartości roku nie da wartości tego elementu, chyba że ustawiono także dzień i miesiąc. W Chrome przynajmniej, jeśli masz element input[type=date], zobaczysz element zawierający tekst zastępczy dd/mm/yyyy. Jeśli ręcznie wybierzesz część yyyy i zmienisz ją na 2015, tekst wejściowy będzie teraz czytał dd/mm/2015, ale jego będzie "" (pusty ciąg). O ile ręczna edycja części dziennych i miesięcznych nie jest ręczna, wymuszenie skupienia na roku nie przyniesie nic innego, jak tylko dezorientację użytkowników.

+0

dzięki za odpowiedź. Dlaczego próbuję to zrobić: Wygląda na to, że Chrome implementuje własne fokusowanie w każdej sekcji daty, kiedy ją klikniesz. Możesz w rzeczywistości kliknąć rok w chrome i wpisać tylko rok bez żadnej innej części wprowadzonej daty. Nie martwię się o walidację, mam to pod kontrolą. Argument datagramu Angular UI-Bootstrap otwiera okienko wyskakujące i wyłącza pole wprowadzania danych, próbowałem ponownie ustawić część obiektu danych, który został kliknięty przy użyciu zdarzenia.target. Inną opcją jest próba zatrzymania fokusu przed opuszczeniem dateplera: – trickpatty

+0

@PatrickLawler tak, ale jeśli zmienisz tylko część 'yyyy' i opuścisz części' dd' i 'mm', ponieważ one nie będą w stanie przeczytaj, jaki rok użytkownik wprowadził, ponieważ "wartość" elementu nie jest obliczana, dopóki wszystkie części nie zostaną wypełnione. –

+0

Rozumiem, że to dobra uwaga. Zastanawiam się, jak wygląda wartość przy korzystaniu z ng-modelu Angulara – trickpatty

2

Krótka odpowiedź: nie jest obsługiwana.

Jeśli spróbujesz ustawić wybór (focus) korzystając

var el = document.getElementById('dob'); 
var r = document.createRange(); 
el.setSelectionRange(r); 

dostaniesz błąd:

DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('date') does not support selection.

Również tylko documentation I found o typie data wejścia mówi "not supported", tak ja myśli, że nie ma takiej dokumentacji. Wygląda na to, że tylko Chrome implementuje ten typ danych wejściowych.

Powiązane problemy