CODEWITHSUNDEEP
javascriptjquerytimepicker
adam78
adam78

Reputation: 10068

JQuery Timepicker - On change event handler not working?

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>

Upvotes: 4

Views: 20610

Answers (8)

CYoung
CYoung

Reputation: 357

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

Upvotes: 0

matheen ulla
matheen ulla

Reputation: 558

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();
      },
    });
  },

Upvotes: 1

HoldOffHunger
HoldOffHunger

Reputation: 20891

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 + "|");
}

Upvotes: 0

paas
paas

Reputation: 35

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

Upvotes: 0

JiangangXiong
JiangangXiong

Reputation: 2426

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">

Upvotes: 10

Avinash
Avinash

Reputation: 801

This should work

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

Upvotes: 0

Sandeep Kumar
Sandeep Kumar

Reputation: 419

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
}

Upvotes: 0

Gherman
Gherman

Reputation: 7426

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.

Upvotes: 2

Related Questions