Gọi bộ chọn ngày gốc từ ứng dụng web trên iOS / Android

Tôi đang cố gắng khám phá các nhiệm vụ khi chạy một ứng dụng web gốc trên các nền tảng khác nhau bằng HTML5. Hiện tại, một <input type="date">trường chỉ mở bàn phím mềm tiêu chuẩn trên Android và iOS. Tôi cho rằng trong tương lai, bàn phím mềm của hệ điều hành di động sẽ bao gồm các bộ chọn ngày và những thứ như vậy - giống như <select>gọi bộ chọn gốc ngày nay.

Vì điều này không được triển khai trên Android hoặc iOS, nhưng được triển khai trong giao diện người dùng gốc, nên ứng dụng web có thể gọi bộ chọn ngày gốc, tức là khi được nhấp vào không?

Điều này sẽ giúp chúng tôi có thể ngừng sử dụng các thư viện JavaScript như jQuery mobile và YUI.

Nếu câu hỏi của tôi có bất kỳ cách nào không rõ ràng, xin vui lòng cho tôi biết. Cảm ơn bạn trước :-)

Vì một số năm một số thiết bị hỗ trợ <input type="date">nhưng một số thiết bị khác thì không, vì vậy người ta cần phải cẩn thận. Dưới đây là một số quan sát từ năm 2012, có thể vẫn còn giá trị cho đến ngày nay:

• Người ta có thể phát hiện nếu type="date"được hỗ trợ bằng cách đặt thuộc tính đó và sau đó đọc lại giá trị của nó. Các trình duyệt / thiết bị không hỗ trợ nó sẽ bỏ qua việc đặt loại thành datevà trả về textkhi đọc lại thuộc tính đó. Ngoài ra, Modernizr có thể được sử dụng để phát hiện. Lưu ý rằng không đủ để kiểm tra một số phiên bản Android; như Samsung Galaxy S2 trên Android 4.0.3 không hỗ trợ type="date", nhưng Google / Samsung Nexus S trên Android 4.0.4 mới hơn thì không .

• Khi đặt trước ngày cho bộ chọn ngày gốc, hãy đảm bảo sử dụng định dạng mà thiết bị nhận dạng. Khi không làm điều đó, các thiết bị có thể âm thầm từ chối nó, để lại một thiết bị có trường nhập trống khi cố gắng hiển thị một giá trị hiện có. Như sử dụng bộ chọn ngày trên Galaxy S2 chạy Android 4.0.3 sức tự thiết lập <input>để 2012-6-1cho ngày 01 tháng 6. Tuy nhiên, khi thiết lập các giá trị từ JavaScript, nó cần zero hàng đầu: 2012-06-01.

• Khi sử dụng những thứ như Cordova (PhoneGap) để hiển thị bộ chọn ngày gốc trên các thiết bị không hỗ trợ type="date":

  • Đảm bảo phát hiện đúng cách hỗ trợ tích hợp. Giống như năm 2012 trên Galaxy S2 chạy Android 4.0.3, sai lầm cũng sử dụng các plugin Cordova Android sẽ cho kết quả hiển thị bảng chọn ngày hai lần liên tiếp: một lần nữa sau khi nhấp vào "set" trong lần xuất hiện đầu tiên của mình.

  • Khi có nhiều đầu vào trên cùng một trang, một số thiết bị hiển thị "trước đó" và "tiếp theo" để vào trường biểu mẫu khác. Trên iOS 4, điều này không kích hoạt onclicktrình xử lý và do đó cung cấp cho người dùng thông tin nhập thường xuyên. Sử dụng onfocusđể kích hoạt plugin dường như hoạt động tốt hơn.

  • Trên iOS 4, việc sử dụng onclickhoặc onfocusđể kích hoạt plugin iOS 2012 lần đầu tiên làm hiển thị bàn phím thông thường, sau đó bộ chọn ngày được đặt ở trên cùng. Tiếp theo, sau khi sử dụng bộ chọn ngày, người ta vẫn cần đóng bàn phím thông thường. Việc sử dụng $(this).blur()để xóa tiêu điểm trước khi bộ chọn ngày được hiển thị đã giúp ích cho iOS 4 và không ảnh hưởng đến các thiết bị khác mà tôi đã thử nghiệm. Nhưng nó đã giới thiệu một số tính năng nhấp nháy nhanh của bàn phím trên iOS và mọi thứ thậm chí có thể khó hiểu hơn trong lần sử dụng đầu tiên vì sau đó bộ chọn ngày chậm hơn. Người ta có thể vô hiệu hóa hoàn toàn bàn phím thông thường bằng cách nhập liệu readonlynếu người ta đang sử dụng plugin, nhưng điều đó đã vô hiệu hóa các nút "trước đó" và "tiếp theo" khi nhập các đầu vào khác trên cùng một màn hình. Có vẻ như plugin iOS 4 đã không làm cho bộ chọn ngày gốc hiển thị "hủy"

  • Trên iPad iOS 4 (giả lập), vào năm 2012, plugin Cordova dường như không hiển thị chính xác, về cơ bản không cung cấp cho người dùng bất kỳ tùy chọn nào để nhập hoặc thay đổi ngày. (Có thể iOS 4 không hiển thị bộ chọn ngày gốc của nó một cách độc đáo trên đầu chế độ xem web hoặc có thể kiểu CSS của chế độ xem web của tôi có một số ảnh hưởng và chắc chắn điều này có thể khác trên thiết bị thực: vui lòng nhận xét hoặc chỉnh sửa!)

  • Mặc dù vậy, một lần nữa vào năm 2012, plugin chọn ngày của Android đã cố gắng sử dụng cùng một API JavaScript như plugin iOS và ví dụ của nó được sử dụng allowOldDates, phiên bản Android thực sự không hỗ trợ điều đó. Ngoài ra, nó trả về ngày mới như 2012/7/2trong khi phiên bản iOS đã trở lại Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

• Ngay cả khi <input type="date">được hỗ trợ, mọi thứ có thể trông lộn xộn:

  • iOS 5 hiển thị độc đáo 2012-06-01ở định dạng được bản địa hóa, giống như 1 Jun. 2012hoặc June 1, 2012(và thậm chí cập nhật ngay lập tức trong khi vẫn vận hành bộ chọn ngày). Tuy nhiên, Galaxy S2 chạy Android 4.0.3 cho thấy sự xấu xí 2012-6-1hoặc 2012-06-01bất kể ngôn ngữ nào được sử dụng.

  • iOS 5 trên iPad (trình mô phỏng) không ẩn bàn phím khi bàn phím đã hiển thị khi chạm vào mục nhập ngày tháng hoặc khi sử dụng "trước đó" hoặc "tiếp theo" trong một mục nhập khác. Sau đó, nó đồng thời hiển thị bộ chọn ngày bên dưới mục nhập và bàn phím ở dưới cùng và dường như cho phép bất kỳ đầu vào nào từ cả hai. Tuy nhiên, mặc dù nó có thay đổi giá trị hiển thị, nhưng thực tế đầu vào bàn phím bị bỏ qua. (Được hiển thị khi đọc lại giá trị hoặc khi gọi lại bộ chọn ngày.) Khi bàn phím chưa được hiển thị, thì việc chạm vào mục nhập ngày sẽ chỉ hiển thị bộ chọn ngày chứ không phải bàn phím. (Điều này có thể khác trên thiết bị thực, vui lòng nhận xét hoặc chỉnh sửa!)

  • Các thiết bị có thể hiển thị con trỏ trong trường nhập và nhấn lâu có thể kích hoạt các tùy chọn khay nhớ tạm, có thể hiển thị cả bàn phím thông thường. Khi nhấp vào, một số thiết bị thậm chí có thể hiển thị bàn phím thông thường trong tích tắc, trước khi thay đổi để hiển thị bộ chọn ngày.

iOS 5 hiện đã hỗ trợ HTML5 tốt hơn. trong ứng dụng web của bạn làm gì

<input type="date" name="date" />

Android kể từ 4.0 thiếu hỗ trợ menu gốc này.

iOS5 có hỗ trợ cho việc này ( Tham khảo ). Nếu bạn muốn gọi bộ chọn ngày gốc, bạn có thể có một tùy chọn với PhoneGap (bản thân tôi chưa thử nghiệm điều này).

Hãy thử Mobiscroll . Bộ chọn ngày và giờ kiểu cuộn đặc biệt được tạo ra để tương tác trên các thiết bị cảm ứng. Nó khá linh hoạt và dễ dàng tùy chỉnh. Nó đi kèm với các chủ đề iOS / Android.

Câu trả lời của tôi là quá đơn giản. Nếu bạn thích viết mã đơn giản hoạt động trên nhiều nền tảng, thì hãy sử dụng phương thức window.prompt để hỏi người dùng ngày. Rõ ràng là bạn cần xác thực bằng regex và sau đó tạo đối tượng ngày tháng.

function onInputClick(e){
var r = window.prompt("Give me a date (YYYY-MM-DD)", "2014-01-01");
if(/[\d]{4}-[\d]{1,2}-[\d]{1,2}/.test(r)){
    //date ok
    e.value=r;
    var split=e.value.split("-");
    var date=new Date(parseInt(split[0]),parseInt(split[1])-1,parseInt(split[2]));
}else{
    alert("Invalid date. Try again.");
}
}

Trong HTML của bạn:

<input type="text" onclick="onInputClick(this)" value="2014-01-01">

Bạn có thể sử dụng mô-đun giao diện người dùng của Trigger.io để sử dụng bộ chọn ngày / giờ gốc của Android với đầu vào HTML5 thông thường. Tuy nhiên, thực hiện điều đó yêu cầu sử dụng khung tổng thể (vì vậy sẽ không hoạt động như một trang web di động thông thường).

Bạn có thể xem ảnh chụp màn hình trước và sau trong bài đăng blog này: bộ chọn ngày giờ

Trong HTML:

  <form id="my_form"><input id="my_field" type="date" /></form>

Trong JavaScript

   // test and transform if needed
    if($('#my_field').attr('type') === 'text'){
        $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd');  
    };

    // check
    if($('#my_form')[0].elements[0].value.search(/(19[0-9][0-9]|20[0-1][0-5])[- \-.](0[1-9]|1[012])[- \-.](0[1-9]|[12][0-9]|3[01])$/i) === 0){
        $('#my_field').removeClass('bad');
    } else {
        $('#my_field').addClass('bad');
    };

Trên biểu mẫu của bạn sử dụng các yếu tố input type="time". Nó sẽ giúp bạn tiết kiệm tất cả những rắc rối khi cố gắng sử dụng thư viện bộ chọn dữ liệu.