直接找parentjQuery

Question

我有一个带有 2 个日期选择器的 html 页面，我必须将选择的日期放在 day/month/year 框中。

当我有 1 个日期选择器时，我的代码工作正常，但当我有 2 个时，日期总是写在第一个

<div class="pickergroup">
    <input name="dateDay01" id="dateDay01"> /
    <input name="dateMonth01" id="dateMonth01"> /
    <input name="dateYear01" id="dateYear01">
    <input name="calendario" class="calendario" id="datepicker01">
</div>
<div class="pickergroup">
    <input name="dateDay02" id="dateDay02"> /
    <input name="dateMonth02" id="dateMonth02"> /
    <input name="dateYear02" id="dateYear02">
    <input name="calendario" class="calendario" id="datepicker02">
</div>

和日期选择器：

    $(function () {
    $(".pickergroup").find('[id^="datepicker"]').datepicker({
        firstDay: 0,
        monthNames: ['January', 'February', 'March',
        'April', 'May', 'June',
        'July', 'August', 'September',
        'October', 'November', 'December'
        ],
        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        dateFormat: 'dd-mm-yy',
        onSelect: function (selectedDate) {
            var mycontainer = $(this).parent('.pickergroup');
            var id = $(this).attr('name').substring(10,12);
            var selectedDay = selectedDate.substring(0, 2);
            var selectedMonth = selectedDate.substring(3, 5);
            var selectedYear = selectedDate.substring(6);
            mycontainer.find('#dateDay' + id).val(selectedDay);
            mycontainer.find('#dateMonth' + id).val(selectedMonth);
            mycontainer.find('#dateYear' + id).val(selectedYear);
        }
    });
});

如何在点击 date02 时选择正确的 parent？

Answer 1

我认为你不需要 id="datepicker"，如果有 2 个具有相同 id 的元素是不好的。你可以试试这个

$(function() {
   $(".pickergroup").find(".calendario").datepicker({
      firstDay: 0,
      monthNames: ['January', 'February', 'March',
      'April', 'May', 'June',
      'July', 'August', 'September',
      'October', 'November', 'December'
       ],
       dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
       dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
       dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
       dateFormat: 'dd-mm-yy',
      onSelect: function( selectedDate ) {
           var mycontainer = $(this).parent('.pickergroup');
           var selectedDay = selectedDate.substring(0,2);
           var selectedMonth = selectedDate.substring(3,5);
           var selectedYear = selectedDate.substring(6);
           mycontainer.find('[id^="dateDay"]').val(selectedDay);
           mycontainer.find('[id^="dateMonth"]').val(selectedMonth);
           mycontainer.find('[id^="dateYear"]').val(selectedYear);
       }
    });
   });

Answer 2

两个日期选择器具有相同的 ID，因此 JavaScript 代码无法 select 它们。给每个日期选择器一个不同的 ID。

直接找parentjQuery

Find direct parent jQuery

jquery

datepicker

jquery-ui-datepicker