[英]Display calendar format for date
日期腳本
<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#ui-datepicker').datepicker();
});
</script>
視圖
<form method="post" action="">
<select class='form-control' name='route_to' id='member' onchange='selectPackage()'>
<option value='packageSelect'>SELECT PACKAGE OPTION ....</option>
<option value='manakamanaPackage'>Mana</option>
</select>
<div id="displayForm3">
</div>
<script type="text/javascript">
function selectPackage() {
if (document.getElementById("member").value == "manakamanaPackage") {
document.getElementById("displayForm3").innerHTML = "<input type='text' id='ui-datepicker' class='form-control' />";
}
}
</script>
說明
如果我們在輸入字段中使用type =“ date”,則它僅在google chrome瀏覽器中有效。
這就是為什么在我們用id ='ui-datepicker'定義腳本的所有瀏覽器中顯示日歷的原因,如果我們將輸入字段用作普通輸入標簽( 例如:: <input type =“ date” /> 。
但不適用於在JavaScript函數{selectPackage()中顯示為displayForm3}的輸入字段
問題是因為要在DOM加載后追加元素。 在創建新元素之后,您需要在新元素上實例化datepicker庫。 嘗試這個:
<form method="post" action="">
<select class="form-control" name="route_to" id="member">
<option value="packageSelect">SELECT PACKAGE OPTION ....</option>
<option value="manakamanaPackage">Mana</option>
</select>
<div id="displayForm3"></div>
</form>
<script type="text/javascript">
$(function() {
$('#member').change(function() {
if (this.value == 'manakamanaPackage') {
$('#displayForm3').html('<input type="text" id="ui-datepicker" class="form-control" />');
$('#ui-datepicker').datepicker();
}
});
});
</script>
請注意,由於on*
事件屬性現在被認為已過時,因此我還修改了您的代碼以使用不干擾事件處理程序。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.