Datepicker cho Bootstrap trên thiết bị di động thay đổi Định dạng

Question

Tôi đang sử dụng công cụ datepicker sau: (http://eternicode.github.io/bootstrap-datepicker/) cho trường ngày của tôi.

<input class="datepicker" style="width:100px;border-radius: 4px;" type="text" placeholder="Datum" id="startDate"....

Tôi đang sử dụng hai định dạng khác nhau 'dd.mm.yyyy' và 'mm/dd/yyyy' và everthing là tốt. Nhưng trên thiết bị di động, bàn phím sẽ mở ra khi tôi nhấn vào trường nhập.

Vì lý do này, tôi đã sử dụng công cụ datepicker gốc với <input type='date'.... nhưng điều này không hỗ trợ các định dạng khác nhau.

Có cách nào để tắt bàn phím trên thành phần input type=text không?

Hoặc bạn có biết bất kỳ trình ghi ngày tháng nào khác có định dạng khác không?

Thx giúp đỡ của bạn

Answer 1

Kiểm tra exmaple này để có readonly nhưng không phải là đầu vào màu xám đó là mặc định của bootstrap.

Tôi có cùng một bản sửa lỗi cho dự án.

$(function() { 
 
    var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); 
 
    if (ismobile) { 
 
    $("#datepicker input").addClass('no-grey').prop('readonly', true); 
 
    } 
 
    $("#datepicker").datepicker({ 
 
    autoclose: true, 
 
    todayHighlight: true 
 
    }).datepicker('update', new Date());; 
 
});

.no-grey { 
 
    background: #fff !important; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" /> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 

 
<label>Select Date:</label> 
 
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy"> 
 
    <input class="form-control" type="text" /> 
 
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 
</div>