2013-08-22 91 views
0

我想使用內聯的引導表單快速建立預訂。但我有一些問題:Bootstrap表單內聯和自動日期選擇器日期

  1. 形式直列留下了裕度我不希望有任何餘量留]
  2. 日期選擇器不能自動生成日期前點擊檢查後退房日期[: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日期選擇我從here使用。 This javascript inline

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

文件CSS是bootstrap的標準配置。 這是截圖: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插件 –

相關問題