Datepicker dla Bootstrap na urządzeniach mobilnych zmieniających Format

Question

Używam poniższego datepicker: (http://eternicode.github.io/bootstrap-datepicker/) dla mojego pola daty.

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

używam dwóch rozróżnianie formatów 'dd.mm.rrrr' i 'mm/dd/yyyy' i wszystko jest w porządku. Ale na urządzeniach mobilnych klawiatura otwiera się, gdy stukam w polu wejściowym.

Z tego powodu użyłem natywnego datepika z <input type='date'...., ale ten nie obsługuje różnych formatów.

Czy mimo to można wyłączyć klawiaturę na elemencie input type=text?

Czy znasz inny datepicker z różnymi formatami?

Thx za pomoc

Answer 1

Sprawdź to exmaple mieć tylko do odczytu ale nie szara wejściowego, który jest domyślnym startowej.

Mam taką samą poprawkę dla projektu.

$(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>