2017-02-26 123 views
0

我有一個引導日期選擇器組件在我的HTML和無法讓它顯示的數據。我會假設我已經把它寫入代碼中。引導日期選擇器不顯示

$('#sandbox-container .input-daterange').datepicker({ 
 
    todayBtn: "linked", 
 
    clearBtn: true, 
 
    multidate: true, 
 
    calendarWeeks: true, 
 
    autoclose: true, 
 
    todayHighlight: true, 
 
    toggleActive: true, 
 
    defaultViewDate: { year: 1977, month: 04, day: 25 } 
 
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-daterange input-group" id="datepicker"> 
 
    <input type="text" class="input-sm form-control" name="start" /> 
 
    <span class="input-group-addon">to</span> 
 
    <input type="text" class="input-sm form-control" name="end" /> 
 
</div>

+1

嘗試改變'$(「#沙盒容器。輸入-日期範圍」)''到$(「#日期選擇器。輸入-SM」)'看如果它有效。 – ekad

+0

那就是修復。非常感謝。 :) – Chris

+1

不客氣。我在下面解釋了原因發佈了一個答案。 – ekad

回答

1

有一個在你的日期選擇器的初始化代碼

$('#sandbox-container .input-daterange').datepicker({ 
    .... 
}); 

既然你有這個html

<div class="input-daterange input-group" id="datepicker"> 
    <input type="text" class="input-sm form-control" name="start" /> 
    <span class="input-group-addon">to</span> 
    <input type="text" class="input-sm form-control" name="end" /> 
</div> 

上面的初始化代碼將針對容器div(與class="input-daterange input-group"一起)而不是其中的兩個文本框,所以這就是爲什麼日期選擇器不顯示。您需要更改上面的初始化代碼這個

$('#datepicker .input-sm').datepicker({ 
    .... 
}); 
1

您將收到投入的jquery.js引導JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>