Jquery ui 日期选择器图标仅适用于id标记，而不适用于类标记_Jquery Ui_Class_Datepicker_Icons

Jquery ui 日期选择器图标仅适用于id标记，而不适用于类标记

jquery-ui class

Jquery ui 日期选择器图标仅适用于id标记，而不适用于类标记,jquery-ui,class,datepicker,icons,Jquery Ui,Class,Datepicker,Icons,我试图让Datepicker日历图标出现在输入文本框旁边。但是，使用'id=datepicker'我只能让它显示在出发日期的文本框旁边，而不能显示在返回日期的文本框旁边。这是因为我使用了两次“id”，但是当我将其切换到“class=datepicker”时，图标从两者中消失 <html> ... <head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.j

我试图让Datepicker日历图标出现在输入文本框旁边。但是，使用'id=datepicker'我只能让它显示在出发日期的文本框旁边，而不能显示在返回日期的文本框旁边。这是因为我使用了两次“id”，但是当我将其切换到“class=datepicker”时，图标从两者中消失

<html>

...

<head>

...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


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

...

</head>


<body>

...

<strong>Departure date</strong><span>*</span>:
<input type="text" id="datepicker" name="departuredate"/>

<strong>Return date</strong><span>*</span>: 
<input type="text" id="datepicker" name="returndate"/>

...


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

不要：

在一个页面中多次包含相同的JavaScript（缩小或不缩小）

将同一ID分配给一个页面中的多个元素

如果执行以下操作（请注意不同的ID）：

编辑

您可能还需要检查CSS，因为datepicker类可能被覆盖。也许可以尝试只包含一个jquery-ui.css进行测试

如果只是日历图标未呈现的情况，则需要指定calendar.gif文件的正确路径。因此，当您转到

http://mysite.com/path/to/images/calendar.gif

然后，您需要设置日期选择器，如下所示：

$(function() {
  $( ".datepicker" ).datepicker({
    showOn: "button",
    buttonImage: "/path/to/images/calendar.gif",
    buttonImageOnly: true
  });
});


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

谢谢，我知道你做了什么，但是一旦我将datepicker指定给“class”，图标就会从两个框中消失。不，谢谢你的帮助。我设法通过使用下面答案中的代码绕过了这个错误。再次感谢。

$(function() {
  $( ".datepicker" ).datepicker({
    showOn: "button",
    buttonImage: "calendar.gif",
    buttonImageOnly: true
  });
});

$(function() {
  $( ".datepicker" ).datepicker({
    showOn: "button",
    buttonImage: "/path/to/images/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>