我可以如何填充一些字段与jquery datepicker

jhkqcmku  于 2023-01-04  发布在  jQuery
关注(0)|答案(1)|浏览(121)

我尝试使用jquery datepicker。它的工作很好,如果我这样使用它。但我想有三个字段,作为一天,一个月,一年。
例如:我在日历中选择了一个日期,3个字段被填充。一个是选择的日期,第二个是月份,第三个是年份。
我没有找到解决方案,知道粘贴1周我正在寻找。
有人能帮忙吗?
非常感谢,祝大家2023年一切顺利
我最后的代码,(我已经尝试了许多其他的
'

<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>

'

q9yhzks0

q9yhzks01#

我希望这将解决您的问题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>

相关问题