Question

我正在写一个日期选择器。我有一个创建日历的函数，我需要用日历中的日期填写输入的值。

function createCalendar(year, month) {
  var inputDate = $("#calendar-input");
  var calendar = $("#calendar")
  var mon = month - 1;
  var d = new Date(year, mon);
  var table = "<table><tr><th>пн</th><th>вт</th><th>ср</th><th>чт</th><th>пт</th><th>сб</th><th>вс</th></tr><tr>";
  for (var i = 0; i < getDay(d); i++) {
    table += "<td><a href=\"#\"></a></td>";
  }
  while (d.getMonth() == mon) {
    table += '<td><a href=\"#\">' + d.getDate() + '</a></td>';
    if (getDay(d) % 7 == 6) {
      table += "</tr><tr>";
    }
    d.setDate(d.getDate() + 1);
  }
  if (getDay(d) != 0) {
    for (var i = getDay(d); i < 7; i++) {
      table += "<td><a href=\"#\"></a></td>";
    }
  }
  table += "</tr></table>";
  calendar.html(table);
}

function getDay(date) {
  var day = date.getDay();
  if (day == 0) day = 7;
  return day - 1;
}
createCalendar(2018, 12)

Answer 1

一种方法是，您可以为每个日期字段创建一个onClick事件。这个onClick事件将使用日期作为参数来调用一个函数。然后，由该功能决定是否用所选日期填充输入字段。

Answer 2

要解决您所说的问题，可以使用此事件侦听器：

$('#calendar a').click(function() {
  $( "#calendar-input" ).val( $( this ).text() );
});

我假设您正在使用 jQuery ，因为您的代码中有带选择符的$，所以我也使用了它，尽管这里没有必要。

我不能使用您的变量inputDate，因为它属于createCalendar函数，所以我只是内联选择器$( "#calendar-input" )。但是，您始终可以通过移动该变量的声明或其他方式来重构它。一旦您在<a>标记中没有任何类，而另一方面，您的代码中唯一的<a>就是我使用的过于通用的$('#calendar a')的日期标记选择器，但这是错误的。我强烈建议您在<a>标签上放置一些类或其他属性，并缩小此选择器的范围。

如何用日历中选择的日期填写输入的值？

2 个答案: