I am using jQuery timepicker (/) with the following input fields. When I select an option from the dropdown, the jquery on change event handler doesnt seem to fire. It only seems to work when I manually enter a value and hit the tab key?

<input id="TmOnSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOnSite" aria-invalid="false">
<input id="TmOffSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOffSite" aria-invalid="false">
<input id="TmTotalHrsOnSite" class="" type="text" value="" readonly="true" name="TmTotalHrsOnSite">

<script>

$(function () {

     TimePicker();

});

var TimePicker = function () {

    if ($(".timepicker").length === 0) { return; }

   $(".timepicker").timepicker({
       timeFormat: 'HH:mm',
       interval: 30,
       scrollbar: true
   });

};

var tmTotalHrsOnSite = function () {

    $(document).on('change select', '.js-tm-on-site', function (e) {

       if ($("#TmOnSite") && $("#TmOffSite")) {

           var startTime = moment($("#TmOnSite").val(), "HH:mm");
           var endTime = moment($("#TmOffSite").val(), "HH:mm");
           var duration = moment.duration(endTime.diff(startTime));
           $("#TmTotalHrsOnSite").val(duration.asHours().toFixed(2));
        }
    });

}();

</script>

I am using jQuery timepicker (http://timepicker.co/) with the following input fields. When I select an option from the dropdown, the jquery on change event handler doesnt seem to fire. It only seems to work when I manually enter a value and hit the tab key?

<input id="TmOnSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOnSite" aria-invalid="false">
<input id="TmOffSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOffSite" aria-invalid="false">
<input id="TmTotalHrsOnSite" class="" type="text" value="" readonly="true" name="TmTotalHrsOnSite">

<script>

$(function () {

     TimePicker();

});

var TimePicker = function () {

    if ($(".timepicker").length === 0) { return; }

   $(".timepicker").timepicker({
       timeFormat: 'HH:mm',
       interval: 30,
       scrollbar: true
   });

};

var tmTotalHrsOnSite = function () {

    $(document).on('change select', '.js-tm-on-site', function (e) {

       if ($("#TmOnSite") && $("#TmOffSite")) {

           var startTime = moment($("#TmOnSite").val(), "HH:mm");
           var endTime = moment($("#TmOffSite").val(), "HH:mm");
           var duration = moment.duration(endTime.diff(startTime));
           $("#TmTotalHrsOnSite").val(duration.asHours().toFixed(2));
        }
    });

}();

</script>

• javascript
• jquery
• timepicker

• $('.timepicker').timepicker({ change: function(time) { } }); Read docs timepicker.co/options – Satpal Commented Sep 29, 2017 at 8:08

8 Answers 8

Use change option:

$(".timepicker").timepicker({
   timeFormat: 'HH:mm',
   interval: 30,
   scrollbar: true,
   change: tmTotalHrsOnSite
});

$(function () {

     TimePicker();

});

var TimePicker = function () {

    if ($(".timepicker").length === 0) { return; }

   $(".timepicker").timepicker({
       timeFormat: 'HH:mm',
       interval: 30,
       scrollbar: true,
       change: tmTotalHrsOnSite
   });

};

function tmTotalHrsOnSite () {

    console.log('changed.');

    if ($("#TmOnSite") && $("#TmOffSite")) {

        var startTime = moment($("#TmOnSite").val(), "HH:mm");
        var endTime = moment($("#TmOffSite").val(), "HH:mm");
        var duration = moment.duration(endTime.diff(startTime));                   
        $("#TmTotalHrsOnSite").val(duration.asHours().toFixed(2));
     }

};

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script>
<input id="TmOnSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOnSite" aria-invalid="false">
<input id="TmOffSite" class="timepicker js-tm-on-site" type="text" value="" name="TmOffSite" aria-invalid="false">
<input id="TmTotalHrsOnSite" class="" type="text" value="" readonly="true" name="TmTotalHrsOnSite">

Events don't fire if JS changes values pragmatically. Though on the other hand JS can pragmatically trigger them. When you choose time in the list the plugin does not trigger it. Most of the time plugins like this one will expose their own API with events to bind to. At least if they are good plugins. Update event is a must. Check out http://timepicker.co/options/ for api There is a description of Change event

$('.js-tm-on-site').timepicker({
    change: function(time) {
        /* Code here */
    }
});

This will run the code on each change. But you have to bind this event at the time when the plugin is initialized. This may require restructuring the code.

for me this solution working fine.

 <input
    type="text"
    v-model="time"
    class="form-control timepicker"
    name="time"
 />

 data() {
    return {
       time: "",
    };
  },

mounted() {
    var vm = this;
    $(".timepicker").timepicker({
      timeFormat: "h:mm p",
      interval: 60,
      scrollbar: true,
      change: function (time) {
         vm.time = $(this).val();
      },
    });
  },

Here is the best answer I think please follow this Can you try

$(document).on('change', '.yourSelector', function (e) {
  //code is here work for me
}

This should work

$('#TmOnSite').on('changeTime', function() {
    var x = $("#TmOnSite").val();                    
});

This is the solution:

$('document').ready(
 $('.timePicker').datetimepicker({
  //All de configuration of your datepicker
 });

 // Note that if you want the event to be for a specific element, 
 //  you must put the element ID instead of <<timePicker>>
 $('.timePicker').on('dp.change', function() {
  // What do you want to execute when the value change
 });
)

I am not able to get the change event to fire at all when clicking the select dropdown menus. It does fire when I type text into the input field, but not when I select a dropdown time using only the mouse. To get that to work, you can just use onBlur for the blur event, which fires when you select a time from the dropdown.

$(document).on('blur', '.yourSelector', function (e) {
     console.log("New value :::" + e.target.value + "|");
}

$("#EventStartTime").on('change',
   function (time) {
    console.log("Selected time : " + time.currentTarget.value);
});