DateTimePicker диапазон?

Question

Мне удалось реализовать элемент DatePicker с типом «range», как показано here (выберите Radio Range), однако я пытаюсь переключиться на DateTimePicker и не знаю, как сохранить этот макет и формат.

Я хочу, чтобы календарь показывался, когда пользователь нажимает на поле ввода - не интересуется кнопкой, как показано на рисунке here. Однако, всякий раз, когда я удаляю элемент <span> для этой кнопки, вся вещь ломается, а не уверен, почему.

Вот код:

<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"> 
    <input class="form-control" size="16" type="text" value="" readonly> 
    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> 
</div> 
<input type="hidden" id="dtp_input1" value="" /> 

JS:

$('.form_datetime').datetimepicker({ 
    //language: 'fr', 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    todayHighlight: 1, 
    startView: 2, 
    forceParse: 0, 
    showMeridian: 1 
}); 

мне интересно, если это возможно, чтобы сделать вход диапазона типа для DateTimePicker, и если да, то это я делать не так?

Answer 1

Единственное, что я видел, это связать два из них вместе.

<div class="container"> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker6'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker7'> 
        <input type='text' class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(function() { 
      $('#datetimepicker6').datetimepicker(); 
      $('#datetimepicker7').datetimepicker({ 
       useCurrent: false 
      }); 
      $("#datetimepicker6").on("dp.change", function (e) { 
       $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
      }); 
      $("#datetimepicker7").on("dp.change", function (e) { 
       $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
      }); 
     }); 
    </script> 

Заканчивать https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers Это место, где я получил его от и это работает для меня.