Datepicker for Bootstrap on format-changing mobile devices

Question

I use the following datepicker: ( http://eternicode.imtqy.com/bootstrap-datepicker/ ) for my date field.

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

I use two different formats "dd.mm.yyyy" and "mm / dd / yyyy", and everything is fine. But on mobile devices, the keyboard opens when I touch the input field.

Because of this, I used my own feed peak with <input type='date'.... , but this one does not support different formats.

Is it possible to disable the keyboard on the input type=text element?

Or do you know any other datepicker with different formats?

thanks for your help

Answer 1

Check exmaple to have only the input, but not the gray input, which is the default value for bootstrap.

I have the same fix for the project.

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