Question

我有一个带有2个datepicker的html页面，我必须在日/月/年框中选择日期。

当我有1个datepicker时，我的代码工作正常，但是当有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>

和datepicker：

    $(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时如何选择正确的父级？

Answer 1

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

Answer 2

我认为你不需要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);
       }
    });
   });

找到直接的父jQuery

2 个答案: