Pobranie wartości sygnału wejściowego z wejściowego HTML5 [type = „Data”] chromem

Question

W chromu, takiego znacznika

<input id="picker" type="date"> 

powoduje w polu tekstowym. Jednak wywołanie próbuje swoją wartość z czymś jak

$("#picker").val() 

nic nie zwraca aż prawidłową datą jest wpisany lub odebrał od niego znajduje się rozwijana. Wziąłem spojrzeć na wszystko z bezpośrednim właściwości obiektu na naciśnięcie klawisza z

$("#picker").keypress(function() { 
    var output = "" 
    for (var i in this) {  
     output += i +" value:"+ this[i] + "\n"; 
    } 
    alert(output); 
});​ 

ale nie mógł zobaczyć moje wejście w żadnym z nich. Sprawdź sam pod adresem http://jsfiddle.net/5cN2q/

Moje pytanie brzmi: czy można uzyskać tekst z danych wejściowych [type = "date"] w chrome, gdy dane wejściowe nie są poprawną datą?

Answer 1

W3C Date State spec określa algorytm sanitization: algorytm dezynfekcja

• Wartością jest następująco: Jeżeli wartość elementu nie jest prawidłową datą ciąg, a następnie ustawić go na pusty ciąg zamiast.

Która jest wywoływana gdy ustawienie wartości elementu wejściowego, jak określono w DOM input value spec:

• Na coraz musi powrócić aktualną wartość elementu. Po ustawieniu, musi ustawić wartość elementu na nową wartość, ustawić flagę wartości brudu elementu na wartość true, wywołać wartość dezynfekcji wartości algorytm, jeśli obecny atrybut atrybutu typu elementu definiuje jeden, a następnie, jeśli element ma pozycję kursora wprowadzania tekstu, powinien przesunąć pozycję kursora wprowadzania tekstu na koniec pola tekstowego, odznaczając zaznaczony tekst i zerując kierunek zaznaczenia na none.

Więc własnością value zawsze będzie ciąg pusty, gdy data nie jest prawidłowa. Wydaje się, że nie ma żadnej właściwości dla "oryginalnej/brudnej/wpisanej przez użytkownika wartości tekstowej", ponieważ nie jest ona wpisem tekstowym.

IMO to dobrze, ułatwia walidację formularza, ponieważ nieważne daty są traktowane jako wartości falsy (puste ciągi), a także pozostawia przeglądarki, aby bardziej swobodnie implementować interfejs dla danych wejściowych daty.

Jeśli preferujesz wprowadzanie danych inne niż W3C, możesz użyć tekstu z dobrą starą datą walidacji JS i datepicker, na przykład jQuery UI datepicker. Umożliwiłoby to odzyskanie rzeczywistej wartości tekstowej danych wejściowych i jest również znacznie lepszym rozwiązaniem dla różnych przeglądarek.

Answer 2

Jak the other answer nie można zobaczyć oryginalną wartość można jednak obsługiwać walidacji z ValidityState

<script type="text/javascript"> 
function submitform() 
{ 
    var inputdate = document.getElementById("inputdate") 
    // check if date is valid. 
    // you can use `inputdate.validity.valid` too. 
    if(inputdate.validity.badInput) { 
    // error message from the browser 
    document.getElementById("message").innerHTML = inputdate.validationMessage 
    } 
    //document.myform.submit(); 
} 
</script> 

<div>message: </div><div id="message" style="color: red; font-weight:bold;"></div> 
<form method=post action="./post"> 
    <input type="date" id="inputdate" value="2016-02-29"> 
    <a href="javascript: submitform()">get date!</a> 
</form> 

Jeżeli zmienisz dzień do 30 i kliknij link, zobaczysz komunikat o błędzie.

Ciesz się tym.