Question

我有输入文本框，该文本框调用日期选择器，并允许用户选择日期。我需要将日期显示为另一文本框中的日期。问题是只有在选择日期然后再次单击日期输入框后才填充日期文本框。似乎没有从日期选择器中的onSelect自动填充日期文本框。我需要它在用户选择日期后立即显示。

我尝试将.on方法与焦点事件一起使用，并将datepicker中的onSelect属性用于我的函数，以便立即显示日期。...之所以使用.on是因为这些行初始页面加载后，包含输入文本框的代码将从后台动态加载。

$('body').on('focus', ".datepickerInput", function () {
    $(this).datepicker({
        controlType: "select",
        onSelect: showDay($(this).attr("id"))
    });
});
function showDay(id) {
    var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var dateVal = "";
    var Day = $("#" + id).closest('tr').find('td:eq(5) input').attr('id')
    dateVal = $("#" + id).val();
    var x = new Date(dateVal);
    dayOfWeek = weekday[x.getDay()];
    $("#" + Day).val(dayOfWeek);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<table>
         <thead>
          <tr>
           <th>infoW</th>
           <th>infoX</th>
           <th>infoY</th>
           <th>infoZ</th>
          </tr>
         <thead>
         <tbody>
          <tr>
           <td>
           <input type="text asp-for="Shift0">
           </td>
           <td>
           <input type="text" asp-for="Date0" class="datepickerInput"/>
           </td>
           <td>
           <input type="text" asp-for="Time0" class="timepickerInput" />
           </td>
           <td>
           <input type="text" asp-for="Day0" />
           </td>
          </tr>
          <td>
           <input type="text asp-for="Shift1">
           </td>
           <td>
           <input type="text" asp-for="Date1" class="datepickerInput"/>
           </td>
           <td>
           <input type="text" asp-for="Time1" class="timepickerInput" />
           </td>
           <td>
           <input type="text" asp-for="Day1" />
           </td>
          <tr>
           @*..More of the same tds with different ids.*@
          </tr>
         </tbody>
        </table>

在选择日期后，应根据从日期文本框中选择的日期，用实际日期填充日期文本框。

Answer 1

您只需使用altField and altFormat选项即可自动填充其他输入。

$('#picker').datepicker({
  altField: '#output',
  altFormat: 'DD'
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<input type="text" id="picker">
<input type="text" id="output">

如何使用带有日期选择器的jQuery使文本显示在另一个文本框中？

1 个答案: