CODEWITHSUNDEEP
javascripthtmljquerykendo-uidatetimepicker
impo
impo

Reputation: 777

KendoUI datetime picker - Calling an on click function when previous/next month is selected

I'd like to trigger an on click event when the user clicks the previous/next month buttons on the Kendo UI date time picker.

Kendo UI datetime picker image

The documentation tells me there isn't an event that is triggered when this happens, so I need to make an on click event.

The buttons don't have id's but do have unique classes: k-nav-prev for the previous month button and k-nav-next for the next month button.

However, when I try to put an alert for the on click event for those classes nothing happens. Would anyone know what I am doing wrong, or if there is a better way to trigger an event when these buttons are clicked?

I have attached a code sample. Thanks for any help.

$(document).ready(function() {
  // create DateTimePicker from input HTML element
  $("#datetimepicker").kendoDateTimePicker({
    value: new Date(),
    dateInput: true
  });

  $(".k-nav-prev").click(function() {
    alert("previous month button clicked");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/datetimepicker/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>

<body>
        <div id="example">
            <div class="demo-section k-content">
                <h4>Remind me on</h4>
                <input id="datetimepicker" title="datetimepicker" style="width: 100%;" />
            </div>
            <p id="test">
              Hello world
            </p>
        </div>
</body>
</html>

Upvotes: 0

Views: 1937

Answers (1)

GaloisGirl
GaloisGirl

Reputation: 1516

The thing is that Kendo is already binding to clicks to those links and intercepting them. You need to use capture to well, capture the event before they do.

The following code will do it, but sometimes it will capture the click on the a.k-nav-prev element, and sometimes on the span with the icon inside:

document.addEventListener('click', function(e) {
  console.log(e);
  if (!e.target.classList.contains("k-nav-prev") && !e.target.parentNode.classList.contains("k-nav-prev")) {
    return;
  }
  console.log("Do your thing here");
}, true);

Demo: https://dojo.telerik.com/@GaloisGirl/etEwOYEp

More on capture here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Upvotes: 1

Related Questions