2012-11-08 44 views
13

Trong bản cập nhật cuối cùng của Chrome ("23.0.1271.64 m" trong trường hợp của tôi), có vẻ như input = time hiện bao gồm các giây không hoạt động và không thể nhấp. Điều này không đẹp trong trang web của chúng tôi vì vậy tôi muốn biết nếu ai đó đã tìm thấy một cách để loại bỏ giây. Thật không may jsfiddle là xuống và tôi không thể gửi một ví dụ ở đó, nhưng tôi đăng nó ở đây để mọi người có thể đọc nó anyway.Xóa giây trong đầu vào của Chrome = thời gian

<html> 
<head></head> 
<body> 
    <input type="time" value="00:44" name="tiiiiden"/> 
</body> 
</html> 

Vì giây chỉ là "nằm ở đó" và không thể chỉnh sửa được, có thể đây là lỗi và nó sẽ được sửa chữa khá sớm.

Trả lời

4

Chrome 23 ổn định trên OSX và Linux bỏ qua các trường giây nếu không cần thiết và Chrome 24 beta trên Windows cũng bỏ qua nó. Tôi khuyên bạn nên chờ Chrome phát hành ổn định 24.

+0

Còn Android thì sao? –

2

Có cùng sự cố. Tôi đã sử dụng chiều rộng cố định với white-space: nowrapoverflow: hidden để ẩn giây, nhưng khi đầu vào được tập trung thì vấn đề vẫn còn.

4

tôi không thể tìm thấy bất kỳ thay đổi/ghi chú phát hành cho 23.0.1271.64 m có liên quan đến bất kỳ thay đổi của forminput loại nhưng theo dự thảo làm việc mới nhất của HTML5 markup documentation bởi W3C yếu tố input type="time" không hỗ trợ bất kỳ định dạng thời gian khác hơn là "thời gian bán thời gian hợp lệ như được xác định trong RFC 3339 "và đó là hh:mm:ss.ffhh:mm:ss.

Vì không có thuộc tính nào để chỉ định định dạng ngày/giờ của riêng bạn vào ngày/giờ inputelements bạn bị kẹt với (các) định dạng được xác định.

Từ input type=time – time input control

Value: Một hợp lệ một phần thời gian theo quy định tại [RFC 3339].
Ví dụ:
23: 20: 50,52
17:39:57

Từ RFC 3339

thời gian secfrac = "" 1 * DIGIT
một phần thời gian = thời gian giờ ":" Lần phút ":" Lần thứ hai [thời gian-secfrac]

Cuối cùng, tôi bao gồm một ảnh chụp màn hình về cách Chrome 23.0.1271.64 m ám chỉ rằng các định dạng thời gian khác nhau (trên máy của tôi);

<input type="time" value="23:20:50.52" /> 
<input type="time" value="17:39:57" /> 
<input type="time" value="13:37" /> 
<input type="time" value="" /> 

enter image description here

Các đánh dấu cũng có sẵn tại jsFiddle.

+0

Dường như có lỗi trong Chrome ngăn các trường thời gian được gửi nếu chúng có giây (xem [tại đây] (http://jsfiddle.net/ZGTUr/12/)). – Behrang

1

Android Chrome và WebBrowser vẫn có vấn đề đó, vì vậy tôi đã điện thoại thông minh cụ thể công việc xung quanh bằng angularjs:

http://jsfiddle.net/Rvjuf/12/

Cách hoạt động:

Có 2 yếu tố có thể xử lý này :

<span>{{ timeDisplay }}</span> 
<input type="time" ng-model="time"> 

Trong mã liên kết, hãy tạo kiểu cho các phần tử (cũng có thể làm điều đó trong tệp CSS) và liên kết với nhấp chuột ngay cả span:

 scope.inputElement.css({ 
      position: "absolute", 
      "z-index": "-10000", 
      opacity: 0 
     }); 
     scope.displayElement.css({ 
      width: "200px", 
      height: "20px", 
      background: "blue", 
      color: "white", 
     }); 
     scope.displayElement.bind("click", function(event) { 
      scope.inputElement[0].focus(); 
      scope.inputElement[0].click(); 
     }); 

Sau đó, đăng ký một người biết lắng nghe sự thay đổi giá trị thời gian và cập nhật các biến timeDisplay:

 $scope.$watch('time', function(nv, ov) { 
      var parts = nv.split(" ")[0].split(":"); 
      var hours = parts[0]; 
      var minutes = parts[1]; 
      $scope.timeDisplay = $filter('date')(new Date(2014, 03, 06, hours, minutes, 0), "H:mm"); 
     }); 

Vì vậy, khi người dùng chạm vào nhịp, đầu vào hoặc được tập trung hoặc nhấp (iOS và ANDROID tạo ra một số khác biệt ở đó), khiến giao diện người dùng của trình chọn thời gian gốc xuất hiện.

14

Tôi biết đây là câu hỏi rất cũ, nhưng tôi chỉ tìm ra giải pháp.

Bạn phải thay đổi bước thành 60. Nếu bạn rời khỏi bước mặc định (1), nó sẽ phải tăng một giây, vì vậy nó phải hiển thị giây tại trường.

Nếu bạn đặt bước của mình thành 60, nó sẽ tăng 1 phút tại một thời điểm, do đó, nó không cần hiển thị giây.

+0

dường như không hoạt động trên Android 4.4/Chrome 30 webview/US locale –

+0

Dường như đây là [lỗi trong Android Chrome] (http://stackoverflow.com/a/28664821/245966) đã được giải quyết trong Chrome 43 –

1

@ hend của giải pháp thiết lập step đến 60 hoạt động trên một đầu vào trống, nhưng nếu bạn tải biểu mẫu của bạn với giá trị prepopulated, bạn sẽ thấy rằng giây có thể xuất hiện lại trong một nhà nước bị vô hiệu hóa.

enter image description here

Bạn có thể che giấu chúng và đại tràng treo lủng lẳng với CSS sau đây:

::-webkit-datetime-edit-second-field { 
    background: $color-white; 
    color: transparent; 
    margin-left: -3px; 
    position: absolute; 
    width: 1px; 
    } 

nào mang lại như sau:

enter image description here

0

Chúng tôi đang sử dụng moment.js để sửa lỗi này. Bạn có thể khỏa lấp xuống giây để tránh milis trong một thời gian đầu vào prepopulated bằng cách thiết lập trên bộ điều khiển với:

const localDate = moment(data.date).startOf('minute').toDate(); 

Tôi hy vọng nó giúp;)

0

tôi đã cùng một vấn đề, nếu bạn đang sử dụng một tiền ngày dân cư để điền vào đầu vào của bạn, chỉ cần sử dụng này:

var myDate = new Date(); 
myDate.setSeconds(0); 
myDate.setMilliseconds(0); 

với thẻ đầu vào như thế này:

<input type="datetime-local" step="60"/> 

Tôi personaly sử dụng góc cạnh nhưng bất cứ điều gì nên làm việc kể từ ngày là Javascript.

Các vấn đề liên quan