Timepicker is not working when I open modal pop up second time #62

ShriwasAshwin007 opened this Issue Nov 21, 2014 · 1 comment


None yet

1 participant


Issue: I have MVC webgrid in that I have one link on click of that I open one Modal Pop using below code
$(".openPlanScreenDialog").live("click", function (e) {

.attr("id", $(this)
.effect("slide", {}, 2000)
title: $(this).attr("data-dialog-title"),
modal: true,
height: 950,
width: 1100,
center: 0,
hide: {
effect: "explode",
duration: 1000
close: function (event, ui) {

First time when modal pop up open the timepicker plugin works fine and show the times. After that I close my modal popup and re-open the modal popup timepicker plugin is not working i.e. it does not show me the times in textbox when i click.

After analyzing I came to conclusion somehow the plugin is not getting destroyed or re-initialized to its initial stage. I tried below things on document ready function of jquery but still no luck :


When I inspect the element second time I get below error message in console:

Uncaught TypeError: Cannot read property 'children' of undefined
(anonymous function)

Below is the image:

Below is the Timepicker Jquery code which I am using in my partial view:

<script type="text/javascript"> $(document).ready(function () { jQuery(function ($) { $('#StartTime').timepicker({ scrollbar: true, change: function (time) { setTimeout(function () { var startdate = $("#StartDate").datepicker('getDate'); startdate.setHours(time.getHours()); startdate.setMinutes(time.getMinutes()); $("#StartDate").datepicker("option", "minDate", startdate) var endtime = $('#EndTime'), instance = endtime.timepicker(); instance.setTime(time); // select (as in highlight) next time entry after time instance.next(); // set this field time to the time entry highlighted in the previous step instance.setTime(instance.selected().text()); // focus on the #endtime field to allow user to adjust the selected time, // by typing another time entriy or selecting a new one with the UP and DOWN // keys. endtime.focus(); }, 10); } }); }); jQuery(function ($) { $('#EndTime').timepicker({ scrollbar: true, change: function (time) { var endtime = $('#StartTime'), instance = endtime.timepicker(); var startdate = $("#StartDate").datepicker('getDate'); if ((time - instance.getTime()) < 0) { var enddate = $("#EndDate").datepicker('getDate'); enddate.setHours(time.getHours()); enddate.setMinutes(time.getMinutes()); enddate.setDate(enddate.getDate() + 1); $("#EndDate").datepicker("setDate", enddate); } else { $("#EndDate").datepicker("setDate", startdate); } } }); }); }); </script>

Note : #StartDate and #EndDate are two text boxes in my HTML form


In jquery.timepicker.js line number 394


Here it is giving error below error:

Uncaught TypeError: Cannot read property 'children' of undefined
(anonymous function)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment