0

I'm using bootstrap date time picker in my project and I need to listen the change of a input tag in order to modify the value of a second one. I tried to liste to it with vanilla Js, jQuery and even Stimulus.js without success. I can properly listen the click event but the change doesn't work.

Here's my picker with some of attempts to listen the change event:

$('.datetimepicker').datetimepicker({
    format: 'LT',
    locale: 'PT-BR',
    icons: {
      up: "fa fa-chevron-up",
      down: "fa fa-chevron-down",
      time: "far fa-clock",
    },
    enabledHours: permittedHours(),
    stepping: 15,
  })

Vanilla:

const handleHourStart = () => {
  let hourStart = document.getElementById('order_hour_start'); 
  hourStart.addEventListener('input', () => {
    alert('CHANGED!');
  })
}

jQuery:

$(document).ready(function(){
  $("#order_hour_start").change(function(){
      alert($(this).val());
  });
});

Stimulus.js

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ 'hour_start', 'hour_finish' ];

  connect() {
    console.log(this.hour_startTarget);
  }

  update() {
    alert('Changed');
  }
}

All they responds well to the click event, but doesn't for change...

I really don't know how to manage it with the picker functions, the docs are very confused to me...

João Ramires
  • 723
  • 10
  • 23
  • 1
    Does this answer your question? [jQuery bootstrap-datetimepicker change event](https://stackoverflow.com/questions/31858920/jquery-bootstrap-datetimepicker-change-event) – Safal Pillai Jun 11 '20 at 21:38
  • @SafalPillai it almost work. The only problem is that the alert now is being shown when the pages loads. But it properly show when the value change... How can I avoid the first display? – João Ramires Jun 11 '20 at 21:46
  • If the initial firing of the event doesn't produce a date value, you can put your change logic inside an if condition. – Safal Pillai Jun 11 '20 at 21:56

0 Answers0