腳本不能用於Datepicker

我正在嘗試爲我的datepicker做一個開始/結束日期，並在Bootstrap-Datepicker中找到了我的腳本。我一直密切關注文檔，但腳本只觸發.datepicker，這將<input>變成日期選擇器，但行爲不是我想要的。請來社區一些幫助嗎？腳本不能用於Datepicker

腳本：

<script> 
     $(document).ready(function() { 
      var nowTemp = new Date(); 
      var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 

      var checkin = $('#dateFrom').datepicker({ 
       onRender: function (date) { 
        return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
       } 
      }).on('changeDate', function (ev) { 
       if (ev.date.valueOf() > checkout.date.valueOf()) { 
        var newDate = new Date(ev.date) 
        newDate.setDate(newDate.getDate() + 1); 
        checkout.setValue(newDate); 
       } 
       checkin.hide(); 
       $('#dateTo')[0].focus(); 
      }).data('datepicker'); 
      var checkout = $('#dateTo').datepicker({ 
       onRender: function (date) { 
        return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; 
       } 
      }).on('changeDate', function (ev) { 
       checkout.hide(); 
      }).data('datepicker'); 
     }); 
    </script>

這是我的代碼：

<div class="form-group"> 
        <div class="row"> 
         <label for="dateFrom" class="col-md-2 control-label">Date From:</label> 
         <div class="col-md-4"> 
          <div class="input-group date"> 
           <input type="text" id="dateFrom" name="dateFrom" class="form-control col-sm-2" required placeholder="mm/dd/yyyy"/> 
           <div class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="row"> 
         <label for="dateTo" class="col-md-2 control-label">Date To:</label> 
         <div class="col-md-4"> 
          <div class="input-group date"> 
           <input type="text" id="dateTo" name="dateTo" class="form-control col-sm-2" required placeholder="mm/dd/yyyy" /> 
           <div class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div>

來源

2015-11-13 eddie

你能澄清一下嗎？你的意思是「其餘的停止運行」是什麼意思？ – saadq

@saadq datepicker能夠顯示在網頁上，但我希望datepicker行爲的方式不工作，因爲我想成爲。 – eddie

你應該更具描述性。預期的行爲是什麼？實際行爲是什麼？ – saadq

在你的評論說，使用jQuery UI日期選擇器（https://jqueryui.com/datepicker/）是一種選擇，所以這裏是一些示例代碼。

請注意，必須爲起始值寫入當前日期。如果需要，也寫一個結束日期的默認值。日期應該以您爲日期選擇器指定的格式編寫。

<input class="input-small" style="cursor: pointer;" type="text" id="startDate" name="startDate" readonly value="13.11.2015" /> 
<input class="input-small" style="cursor: pointer;" type="text" id="endDate" name="endDate" readonly /> 

var $startDate = $('input[name="startDate"]'); 
$startDate.datepicker({ 
    minDate: $startDate.val(), 
    changeYear: true, 
    changeMonth: true, 
    numberOfMonths: 1, 
    constrainInput: true, 
    dateFormat: 'dd.mm.yy', 
    showOn: "both", 
    showWeek: true, 
    onSelect: function (selectedDate) { 
    }, 
    onClose: function (selectedDate) { 
     $endDate.datepicker("option", "minDate", selectedDate); 
    } 
}).keyup(function (e) { 
    if (e.keyCode == 8 || e.keyCode == 46) { 
     $.datepicker._clearDate(this); 
    } 
}); 

var $endDate = $('input[name="endDate"]'); 
$endDate.datepicker({ 
    changeYear: true, 
    changeMonth: true, 
    numberOfMonths: 1, 
    constrainInput: true, 
    dateFormat: 'dd.mm.yy', 
    showOn: "both", 
    showWeek: true, 
    minDate: $startDate.val(), 
    onClose: function (selectedDate) { 
    } 
}).keyup(function (e) { 
    if (e.keyCode == 8 || e.keyCode == 46) { 
     $.datepicker._clearDate(this); 
    } 
});

如果你願意，我也可以修改此示例有點包括一個按鈕，使得它看起來有點Bootstrappy（2.X版本兼容）

來源

2015-11-13 08:51:50