मोबाइल डिवाइस पर बूटस्ट्रैप के लिए डेटपिकर प्रारूप

Question

मैं निम्नलिखित डेटपिकर का उपयोग कर रहा हूं: (http://eternicode.github.io/bootstrap-datepicker/) मेरी तिथि-फ़ील्ड के लिए।

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

मैं दो अलग अलग प्रारूपों 'dd.mm.yyyy' और 'dd/mm/yyyy' और प्रत्येक भाग को उपयोग कर रहा हूँ ठीक है। लेकिन मोबाइल डिवाइस पर जब मैं इनपुट-फ़ील्ड में टैप करता हूं तो कीबोर्ड खुलता है।

इस वजह से मैंने <input type='date'.... के साथ देशी डेटपिकर का उपयोग किया लेकिन यह एक अलग प्रारूपों का समर्थन नहीं करता है।

क्या input type=text तत्व पर कीबोर्ड अक्षम करने के लिए वैसे भी है?

या क्या आप किसी अन्य डेटपिकर को विभिन्न प्रारूपों के साथ जानते हैं? आपकी मदद के

Answer 1

चेक इस exmaple के लिए

Thx केवल पढ़ने के लिए नहीं बल्कि ग्रे इनपुट जो बूटस्ट्रैप के डिफ़ॉल्ट है है।

मेरे पास एक परियोजना के लिए एक ही फिक्स है।

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