我如何用jquery datepicker填充多个字段？

我正在尝试使用jquery datepicker。如果我用它来处理一个字段的话，它可以工作得很好。但是我想有三个字段，一个用于日期，一个用于月份，一个用于年份。
示例：我在日历中选择了一个日期，3个字段被填充。一个字段填充了所选的日期，第二个字段填充了月份，第三个字段填充了年份。
我的代码：

<script>
  $( function() {
    $( "#datepicker" ).datepicker({
      altField: "#jour",
      altFormat: "dd",
      altField: "#mois",
      altFormat: "mm",
      altField: "#annee",
      altFormat: "yy"
    });
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker">&#xA0;<input type="text" id="jour" size="10">&nbsp;<input type="text" id="mois" size="10">&nbsp;<input type="text" id="annee" size="10">&nbsp;</p>

我希望这将解决您的问题https://jsfiddle.net/salmanasad/0qaxfgpe/。

$(function() {

    $('#txtDate').datepicker({
        onClose: function(dateText, inst) {
            $('#year').val(dateText.split('/')[2]);
            $('#month').val(dateText.split('/')[0]);
            $('#day').val(dateText.split('/')[1]);
        }
    });
});

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>

    <input name="txtDate" type="text" id="txtDate" autocomplete="off" />
    
    <select id="month" name="month">
        <option value="01">January</option> 
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select id="day" name="day">
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <select id="year" name="year">
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
    </select>
    
</body>
</html>

我如何用jquery datepicker填充多个字段？

1条答案

相关问题

热门标签

最新问答