Event not fired on datepicker

Question

I am using bootstrap datepicker inline, when i click on a year, it is fine as i see ciao in console, however, when I click on prev or next, and then I click on a year, console is not showing ciao. I have tried a lot of different things, one of which is the following and goDateClick() is firing but not the click event within it

  goDateClick();

  $("#sandbox-container .prev").on("click", function(e) {
    goDateClick();
  });

  $("#sandbox-container .next").on("click", function(e) {
    goDateClick();
  });

  function goDateClick() {
    $("#sandbox-container span").on("click", function(e) {
       console.log("ciao");
    });
  };

Try it, click a year and it's fine, click next or prev and the year won't show up

jsFiddle here

I have tried the suggested answer as per "duplicated" and it doesn't work check http://jsfiddle.net/vwmHF/281/

Is the problem that you can't select the `.prev` and `.next` elements properly? Can you post the HTML? — CertainPerformance, Mar 24 '18 at 07:37
I can select .prev or .next, but the year change in the html and then it is not more picking it up @CertainPerformance — rob.m, Mar 24 '18 at 07:38
Could u please check if there span exist after next previous click? — RIYAJ KHAN, Mar 24 '18 at 07:38
basically it's like the event callback isn't working on the inline calendar as I have followed their doc with no success http://bootstrap-datepicker.readthedocs.io/en/latest/events.html — rob.m, Mar 24 '18 at 07:40
`$(document)).on("click", "#sandbox-container .prev", function(e) { goDateClick(); });` — connexo, Mar 24 '18 at 08:11

score 1 · Answer 1 · edited Mar 24 '18 at 09:08

1

Instead of creating new listeners every time, only add a single listener to the container, and then select e.target to get the element that was clicked on. Replace the whole script with this:

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');
});

edited Mar 24 '18 at 09:08

Vishal Taj PM

1,223
10
20

answered Mar 24 '18 at 08:34

CertainPerformance

260,466
31
181
209

please update snippet to working example. The snippet is not functioning now. – Vishal Taj PM Mar 24 '18 at 08:57
Forgot to clarify - replace the entire original script with just this. – CertainPerformance Mar 24 '18 at 09:00

score 1 · Accepted Answer · answered Mar 24 '18 at 08:52

1

you can find a minimal code which only used datepicker events please view the snippet below :

click to view demo

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

so here I just used the default on('changeYear', function(e){}) to trigger whenever we click on the year.

answered Mar 24 '18 at 08:52

Vishal Taj PM

1,223
10
20

oh thank you! That's actually what I was trying, I didn't see getFullyear, link to a doc pelase? – rob.m Mar 24 '18 at 09:08
it's a javascript date function you can find it here [Javascript Date Functions](https://www.w3schools.com/js/js_date_methods.asp) – Vishal Taj PM Mar 24 '18 at 09:11
oh right didn't think of using plain js functions, thought to just follow the plugin doc, thanks a lot – rob.m Mar 24 '18 at 09:12

score 0 · Answer 3 · edited Mar 24 '18 at 10:02

Just use native bootstrap-datepicker's events changedate and changeyear

and here is the changed code 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");
};

You can see that I added .on("changeDate") and .on("changeYear") and pass event objects to your cutom function. And in your function goDateClick there is no need to add on-click handler as the event already handled by bootstrap-datepickers's native events. Only proper handling of e and e.target is needed.

Event not fired on datepicker

3 Answers3