我如何使用jquery日期picker填充多个字段?



我正在尝试使用jquery日期拾取器。如果我将它与单个字段一起使用,它会工作得很好。但是我希望有三个字段,一个用于日,一个用于月,一个用于年。

示例:我在日历中选择一个日期,并填充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>

最新更新