datepicker 不适用于移动版网站

Question

Datepicker function is perfectly working for my website desktop version but not working for my website mobile version !!

In these two pictures you can see that in desktop version, after clicking into date field it shows a calendar but in mobile version there is no calendar showing.

datepicker html for website desktop version

<input class="form-control time_slot_searchField datepicker_class" id="datepicker" name="" type="text"  required="" placeholder="Select Date">

datepicker html for website mobile version

<input class="form-control col-md-4 mobile_time_slot_searchField mobile_datepicker_class" id="mobile_datepicker" name="" type="" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'yy/mm/dd';}" required="" style="" placeholder="Select Date">

jquery for datepicker

 jQuery(function() {
    jQuery( "#datepicker, #mobile_datepicker, #datepicker_in_clinic_detail, #modal_datepicker, #appointment_datepicker" ).datepicker({ dateFormat: 'yy-mm-dd',minDate: 0});
  });

Where is the problem? Anybody help please? Thanks in advance.

Answer 1

 $(function () { $("#datepicker").datepicker({ autoclose: true, todayHighlight: true }).datepicker('update', new Date()); });

 label{margin-left: 20px;} #datepicker{width:180px; margin: 0 20px 20px 20px;} #datepicker > span:hover{cursor: pointer;}

 <pre> <b>Note:</b> using <a href="getbootstrap.com/">bootstrap 3.2.0</a> and <a href="https://github.com/eternicode/bootstrap-datepicker">eternicode bootstrap-datepicker</a> </pre> <pre> <b>@import css</b> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> </pre> <pre> <b>@import js</b> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> </pre> <label>Select Date: </label> <div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"> <input class="form-control" type="text" readonly /> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div>