how may i populate some fields with jquery datepicker-CodePudding

I try to use jquery datepicker. It work fine if i use it as this. but i would like having three fields, as one for the day,one for the month, one for the year.

example : i select a date in the calendar and 3 fields are populated. one with the day selected, the second one with the month and the third with the year.

I do not find the solution, knowing paste 1 week i am searching for.

Any one could help ?

Many thanks and have all a good year 2023

my last code, (i have tried many others

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

CodePudding user response：

I hope this will solve your issue 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>

CodePudding user response：

Many, many thanks. that is what i wanted to do. Have a good night