Nhận giá trị đầu vào từ HTML5 input [type = "date"] trong chrome

Question

Trong chrome, một thẻ như

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

ám như một trường văn bản. Tuy nhiên, gọi điện thoại cố gắng nhận giá trị của nó bằng một cái gì đó như:

$("#picker").val() 

sẽ không trả lại cho đến khi ngày hợp lệ được nhập hoặc chọn từ trình đơn thả xuống. tôi đã xem xét tất cả các thuộc tính tức thời của đối tượng trên một phím nhấn với

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

nhưng không thể nhìn thấy đầu vào của tôi trong bất kỳ trong số này. Kiểm tra chính mình tại http://jsfiddle.net/5cN2q/

Câu hỏi của tôi là: Có thể lấy văn bản từ đầu vào [type = "date"] trong chrome khi đầu vào không phải là ngày hợp lệ không?

Answer 1

Các W3C Date State spec định nghĩa các thuật toán sanitization: Thuật toán sanitization

• Giá trị là như sau: Nếu giá trị của nguyên tố này không phải là một chuỗi ngày hợp lệ, sau đó đặt nó vào chuỗi rỗng để thay thế.

nào được gọi bất cứ khi nào thiết lập các giá trị của các yếu tố đầu vào, theo quy định tại DOM input value spec:

• On nhận được, nó phải trả về giá trị hiện tại của nguyên tố này. Khi cài đặt, nó phải đặt giá trị của phần tử thành giá trị mới, đặt cờ giá trị bẩn của thành phần thành true, gọi giá trị vệ sinh algorithm, nếu trạng thái hiện tại của thuộc tính type xác định một và sau đó, nếu phần tử có vị trí con trỏ nhập văn bản, nên di chuyển vị trí con trỏ nhập văn bản đến cuối trường văn bản, bỏ chọn bất kỳ văn bản đã chọn nào và đặt lại hướng chọn thành không.

Vì vậy, các value bất động sản sẽ luôn là một chuỗi rỗng khi ngày là không hợp lệ. Dường như không có bất kỳ thuộc tính nào cho "giá trị văn bản gốc/dơ bẩn/do người dùng nhập" được chỉ định vì nó không phải là đầu vào văn bản sau khi tất cả. IMO nó là một điều tốt, nó tạo điều kiện xác nhận biểu mẫu là ngày không hợp lệ được coi là giá trị giả (chuỗi trống), nó cũng để các trình duyệt tự do triển khai giao diện người dùng cho các đầu vào ngày tháng.

Nếu bạn thích đầu vào ngày không phải W3C, bạn có thể sử dụng kiểu nhập văn bản có xác thực ngày JS cũ tốt và một trình ghi ngày tháng, chẳng hạn như jQuery UI datepicker. Điều này sẽ cho phép bạn truy xuất giá trị văn bản thực tế của đầu vào và cũng là một giải pháp đa trình duyệt hơn nữa.

Answer 2

Như the other answer bạn không thể nhìn thấy giá trị ban đầu, bạn có thể xử lý tuy nhiên xác nhận với 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> 

Nếu bạn thay đổi ngày 30 và nhấp vào liên kết, bạn sẽ thấy một thông báo lỗi.

Hãy tận hưởng nó.