Simple jQuery UI Datepicker

How to make it look better in a mobile.

by Julian

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<div class="col-xs-11 col-lg-4 col-md-4 col-centered">
<label for="start"></label>
<input type="text" id="date-picker-input-1" class="" name="start" placeholder="From">
</div>


<div class="col-xs-11 col-lg-4 col-md-4 col-centered">
<label for="end"></label>
<input type="text" id="end" name="end" placeholder="To">
</div>

JavaScript

$(function() {
    $( "#date-picker-input-1" ).datepicker({
   
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 2,
      onClose: function( selectedDate ) {
        $( "#end" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#end" ).datepicker({
      defaultDate: "+1w",

      changeMonth: true,
      numberOfMonths: 2,
      onClose: function( selectedDate ) {
        $( "#start" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });