Question

我有这个输入框，现在我怎么能动态使用datepicker

<input type="text" id="datepicker" name="date[0]">
<input type="text" id="datepicker" name="date[1]">
<input type="text" id="datepicker" name="date[2]">
<input type="text" id="datepicker" name="date[3]">

我试着用这样的代码编写代码，但这不会只对第一次输入更改

$('name^="date"').datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
})

我想动态编码，而不是像这样

$('#datepicker1').datepicker({})
$('#datepicker2').datepicker({})....

有可能吗？谢谢你的回复。

Answer 1

对于这种情况，您应该使用类而不是ID：

<input type="text" class="datepicker" name="date[0]">
<input type="text" class="datepicker" name="date[1]">
<input type="text" class="datepicker" name="date[2]">
<input type="text" class="datepicker" name="date[3]">

然后你可以简单地用这个类为每个元素调用datepicker：

$('.datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
})

Answer 2

你可以使用这样的东西。

$(document).ready(function() {

$('[name^="date"]').datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
});
});

Answer 3

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>      
    <script src="Scripts/jquery-ui-1.10.4.js"></script>
    <link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $('[name^="date"]').datepicker();
        });
    </script>

</head>
<body>
    <input type="text" id="datepicker1" name="date[0]" />
    <input type="text" id="datepicker2" name="date[1]" />
    <input type="text" id="datepicker3" name="date[2]" />
    <input type="text" id="datepicker4" name="date[3]" />
</body>
</html>

Answer 4

HTML：

<input type="text" class="your_input" name="your_input" />
<input type="text" class="your_input" name="your_input2" />

时：

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script>
  $(function() {
    $( ".your_input" ).datepicker();
  });
  </script>

可选快速加载日期选择器：

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
      <script>
      $(function() {
        $('body').on('focus',".your_input", function(){
              $(this).datepicker({ dateFormat: 'dd-mm-yy' });
        });
      });
      </script>

如何动态使用datepicker

4 个答案: