Question

我想在一个html页面中保留两个日期选择器，但在运行它时只显示一个日期选择器。

我所做的编码是

 </head>
      <body>
            Issue Date(dd-mm-yyyy)<span class="star" style="color:red;">*</span>
                     <!-- <input  type="text" id="datepicker" />-->

             <script type="text/javascript"src="http://www.snaphost.com/jquery/Calendar.aspx"></script>

                  &nbsp;&nbsp;&nbsp;&nbsp;

           Expiry Date(dd-mm-yyyy)<span class="star" style="color:red;">*</span>

          <script type="text/javascript"src="http://www.snaphost.com/jquery/Calendar.aspx"></script>

      </body>
 </html>

我也检查了http://jqueryui.com/datepicker/

任何人都可以提出一些建议如何解决这个问题。我正在使用Dreamweaver 8.

Answer 1

在Calendar.aspx文件中，您使用了以下代码

$(function () { $('#SnapHost_Calendar').datepicker({showOn:'both',buttonImage:'http://www.snaphost.com/jquery/calendar.gif',buttonImageOnly:true,changeMonth:true,changeYear:true,showOtherMonths:true,selectOtherMonths:true}); });
document.write('<input name="SnapHost_Calendar" id="SnapHost_Calendar" type="text" />');

而不是，

$(function () { $('.datepicker_field').datepicker({showOn:'both',buttonImage:'http://www.snaphost.com/jquery/calendar.gif',buttonImageOnly:true,changeMonth:true,changeYear:true,showOtherMonths:true,selectOtherMonths:true}); });
document.write('<input name="SnapHost_Calendar" id="SnapHost_Calendar" class="datepicker_field" type="text" />');

因为ID不能重复两次，所以它必须是唯一的。因此，只有第二个文本框没有触发日历事件

Answer 2

使用jQuery UI

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
      <body>
            Issue Date(dd-mm-yyyy)<span class="star" style="color:red;">*</span>
                     <input  type="text" id="datepicker" /> 
                  &nbsp;&nbsp;&nbsp;&nbsp;
           Expiry Date(dd-mm-yyyy)<span class="star" style="color:red;">*</span>
                     <input  type="text" id="datepicker2" />
           <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
           <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
           <script type='text/javascript'>
               $("#datepicker").datepicker();
               $("#datepicker2").datepicker();
           </script>
      </body>
 </html>

Answer 3

尝试使用jQuery UI

 <script>
    $(document).ready(function () {
      $(".star").datepicker();
   });
 </script>

两个日期选择器不会显示在单个html页面中

3 个答案: