2013-08-22 3 views
0

Я хочу создать быстрое резервирование, используя форму бутстрапа inline. но у меня есть некоторые проблемы:Bootstrap form inline и автоматическая дата datepicker

  1. Форма рядный имеет запас левый [я не хочу любой запас оставил]
  2. Datepicker не может автоматический генерировать проверить даты [после проверки кликов в дате Ex: 22/10/2013 система автоматически перейдет к дате регистрации 23/10/2013, чтобы пользователь не мог начать с этой даты]

Как это сделать? Это мой сценарий HTML

<div class="row"> 
     <div class="span12"> 
     <form class="form-horizontal"> 
      <div class="control-group"> 
       <div class="controls form-inline" id="sandbox-container"> 
        <label for="check-in">CHECK - IN</label> 
        <input type="text" id="cid" name="fymd" class="span2 input-append date" placeholder="dd/mm/yyyy"> 
        <label for="check-out">CHECK - OUT</label> 
        <input type="text" id="cod" name="tymd" class="span2 input-append date" placeholder="dd/mm/yyyy"> 
       </div> 
      </div> 
     </form> 
     </div> 
    </div> 

начальной загрузки JavaScript для DatePicker я использую из here. Это Javascript рядного

<script> 
$('#sandbox-container .input-append.date').datepicker({ 
    format: "dd/mm/yyyy", 
    startDate: "0d", 
    endDate: "+2y", 
    autoclose: true, 
    todayHighlight: true 
}); 
</script> 

файл CSS является стандартным от начальной загрузки. Это скриншот: enter image description here

ответ

0

Выпуск 1: Правильная структура инлайн формы следующим образом:

<div class="row"> 
    <div class="span12"> 
     <form class="form-inline" id="sandbox-container"> 
      <label for="check-in">CHECK - IN</label> 
      <input type="text" id="cid" name="fymd" class="span2 input-append date" placeholder="dd/mm/yyyy" /> 
      <label for="check-out">CHECK - OUT</label> 
      <input type="text" id="cod" name="tymd" class="span2 input-append date" placeholder="dd/mm/yyyy" /> 
     </form> 
    </div> 
</div> 

Demo fiddle

Выпуск 2:plugin page вы связаны чтобы иметь полный пример с функциональностью, которую вы хотите

+0

Почему демонстрационная скрипка не открывается? –

+0

@LenaQueen, что вы имеете в виду? демонстрация предназначена только для новой разметки, поэтому вы видите, что теперь нет поля, я не включил плагин datepicker –

Смежные вопросы