Question

我正在使用bootstrap datepicker inline ，当我click on a year时，我看到{{1}中的 ciao 就可以了但是，当我点击console或prev，然后点击next一年时，click未显示 ciao 即可。我尝试了很多不同的东西，其中一个是以下内容，而console正在解雇而不是goDateClick()在其中

click event

试一试，点击一年就可以了，点击下一个或上一个，年份不会出现

jsFiddle here

我已根据＆＃34;重复＆＃34;尝试了建议的答案。它没有工作检查http://jsfiddle.net/vwmHF/281/

Answer 1

不是每次都创建新的侦听器，而是只向容器添加一个侦听器，然后选择e.target以获取单击的元素。用以下内容替换整个脚本：

document.querySelector('.datepicker').addEventListener('click', e => {
  if (e.target.tagName !== 'SPAN') return;
  document.querySelector('#my_year').textContent = e.target.textContent;
  e.target.classList.add('selected_year', 'active', 'focused');
});

Answer 2

您可以找到仅使用datepicker事件的最小代码，请查看以下代码段：

click to view demo

$('#sandbox-container div').datepicker({
  format: "yyyy",
  viewMode: "years", 
  minViewMode: "years",
}).on('changeYear', function(e) {
  $('#my_date').text(e.date.getFullYear());
});

所以这里我只是在点击年份时使用默认的on('changeYear', function(e){})来触发。

Answer 3

只需使用原生bootstrap-datepicker的事件即可 changedate和 changeyear

这是更改后的代码in js fiddle

$('#sandbox-container div').datepicker({
  format: "yyyy",
  viewMode: "years", 
  minViewMode: "years"
}).on("changeDate", function(e) {
   goDateClick(e)
}).on("changeYear", function(e) {
   goDateClick(e)
});

function goDateClick(e) {
    $this = $(e.target)
     $("#my_year").text($this.text());
    $("#sandbox-container span").removeClass("selected_year").removeClass("focused").removeClass("active");
    $this.attr("class", "selected_year").addClass("active focused");
};

你可以看到我添加了.on（＆＃34; changeDate＆＃34;）和.on（＆＃34; changeYear＆＃34;）并将事件对象传递给你的cutom函数。在你的函数goDateClick中，没有必要添加on-click处理程序，因为事件已经由bootstrap-datepickers的本机事件处理。只需要正确处理e和e.target。

事件未在datepicker上触发

3 个答案: