Html 输入文本框旁边不显示日期选择器图标

正如您在下面的JS提琴上看到的，我只能在其中一个输入框旁边显示小的Datepicker图标。我需要它出现在两者旁边

但是，将“id”更改为“class”不起作用，会导致两个图标都消失

HTML：
jQuery UI日期选择器-图标触发器
$（函数（）{
$（“#日期选择器”）。日期选择器({
展示：“按钮”，
buttonImage:“calendar.gif”，
buttonImageOnly:true
});
});
日期：

日期：

CSS:

$（函数（）{
$（“#日期选择器”）。日期选择器({
展示：“按钮”，
buttonImage:“calendar.gif”，
buttonImageOnly:true
});
$（“#日期选择器2”）。日期选择器({
展示：“按钮”，
buttonImage:“calendar.gif”，
buttonImageOnly:true
});    
});

您应该将

id

更改为

class

，并将

$（“#日期选择器”）

更改为

$（“.datepicker”）

，因为标识符应该是唯一的/不同的

然后，将jQuery代码包装成

$（document）.ready（function（）{/*…*/}）

以确保在执行javascript/jQuery代码时在DOM中创建html元素

结果如下所示：

<script>
$(document).ready(function() {
    $( ".datepicker" ).datepicker({
          showOn: "button",
          buttonImage: "calendar.gif",
          buttonImageOnly: true
     });
});
</script>

<p>Date: <input type="text" class="datepicker" /></p>
<p>Date: <input type="text" class="datepicker" /></p>

$（文档）.ready（函数（）{
$（“.datepicker”）.datepicker({
展示：“按钮”，
buttonImage:“calendar.gif”，
buttonImageOnly:true
});
});
日期：

日期：

这是一把小提琴：

  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "calendar.gif",
      buttonImageOnly: true
    });
      $( "#datepicker2" ).datepicker({
      showOn: "button",
      buttonImage: "calendar.gif",
      buttonImageOnly: true
    });    
  });
  </script>

<script>
$(document).ready(function() {
    $( ".datepicker" ).datepicker({
          showOn: "button",
          buttonImage: "calendar.gif",
          buttonImageOnly: true
     });
});
</script>

<p>Date: <input type="text" class="datepicker" /></p>
<p>Date: <input type="text" class="datepicker" /></p>