Datepicker for Bootstrap on mobile devices changing Format

Question

I'm using following datepicker: (http://eternicode.github.io/bootstrap-datepicker/) for my date-Field.

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

I'm using two diffrent formats 'dd.mm.yyyy' and 'mm/dd/yyyy' and everthing is fine. But on mobile devices the keyboard opens when I tap in the input-field.

Because of this I used the native datepicker with <input type='date'.... but this one does not support different formats.

Is there anyway to disable the keyboard on a input type=text element?

Or do you know any other datepicker with different formats?

Thx for your help

Vinaya

Found a solution: just added the attribute readonly='true' to the input – Vinaya

Answer 1

Try this: If you add onfocus="blur();" to the element this will not let soft keyboards to open. Therefore you will not get keyboard open on mobile devices.

$('#sandbox-container input').datepicker({});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-datepicker.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>


<div id="sandbox-container"><input type="text" class="form-control" onfocus="blur();"></div>

Rink