Question

我在此处说，如果点击日历中的任何日期，请在jalali_back_date输入中设置值。

$(document).on('click', '.datepicker-tablemonthgrid tr td', function() {
  $parent = $(this).parents('.calender');
  $prev = $parent.prev();
  date = $prev.children('[name^="jalali_"]').val();
  $prev.children('span').text(date);
  $parent.slideUp();
});
$(".calender").datepicker();

And here I have got the `$(this)` to set each date for it's related jalali_* input.

altField: $(this).prev().children('[name="jalali_' + $(this).attr('id') + '"]'),
  altSecondaryField: $(this).prev().children('[name="miladi_' + $(this).attr('id') + '"]'),

In html I have this below:

<div class="form-control has-calender">
  <span>day/month/year</span>
  <input type="hidden" name="jalali_back_date">
  <input type="hidden" name="miladi_back_date">
</div>
<div class="calender" id="back_date"></div>

现在的问题是，当我点击第一个日历时，它可以正常工作但第二个更改了第一个值！我认为问题来自最后一部分，即： altField。我认为它第二次想要初始化值它不会！并使用前一个dom元素！

Answer 1

我有同样的问题并以这种方式解决：总有一个日历。日历使用函数生成。并将日期放在目标输入上。

＆＃13;

function showCalendar(obj) {
  var calendarLength = $(obj).parent().find('div').length;
  var calendarInputId = $(obj).parent().find('input').attr('id');

  if (calendarLength == 0) {
    $('.calendar').remove();

    $(obj).parent('div').append('<div class="calendar"></div>');
    $(".calendar").datepicker({
      altField: "#" + calendarInputId,
      date: "2018-04-16"
    });
  }
}

＆＃13;

.calendar {
  position: absolute;
  top: 40px;
  right: 0;
}

＆＃13;

<div class="col-3">
  <div class="input-group">
    <button class="input-group-addon" style="position: relative;" onclick="showCalendar(this)">
	            cal
	        </button>
    <input id="date1" type="text" name="date1" class="form-control" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="col-3">
  <div class="input-group">
    <button class="input-group-addon" style="position: relative;" onclick="showCalendar(this)">
	            cal
	        </button>
    <input id="date_nth" type="text" name="date_nth" class="form-control" aria-describedby="btnGroupAddon">
  </div>
</div>

＆＃13;

jalali datepicker在html中的多个地方使用时无法正常工作

1 个答案: