显示日期的日历格式

Display calendar format for date

本文关键字：格式 日历 日期 显示      更新时间：2023-09-26

日期脚本

<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"，那么它只适用于googlechrome浏览器。

这就是为什么要为所有浏览器显示日历的原因，我们定义了id="i-datepicker"的脚本，如果我们使用输入字段，它将是正常的输入标记(，例如：：<input type="date"/>

但它不适用于javascript函数｛selectPackage((中显示为displayForm3｝的输入字段

问题是因为您在加载DOM后附加了元素。您需要在创建新元素后立即在其上实例化日期选择器库

<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*事件属性现在被认为已经过时了。

相关文章：