Time Picker not working in Safari

[bernardbaker]

I'm working with the Time Picker in Safari and it doesn't work correctly.

In Chrome it is working fine.

$(function(){
	var elements = document.querySelectorAll("input[data-name='time-picker-01']")
	for(var i = 0; i < elements.length; i++) {
		$('#'+elements[i].getAttribute('id')).timepicker({
			minuteStep: 1,
			template: false,
			appendWidgetTo: 'body',
			showSeconds: false,
			showMeridian: false,
			defaultTime: false,
			disableFocus: true
		});

		$('#'+elements[i].getAttribute('id')).timepicker().on('changeTime.timepicker', function(e) {
			var event = new CustomEvent('changeTime.timepicker',
			{
				payload: {
					hours: e.time.hours,
					minutes: e.time.minutes
				}
			})
            document.dispatchEvent(event)
		});
	}
})

[juanfranem]

same here!

[ntkhang0910]

        if (window.navigator.userAgent.indexOf("Safari") != -1) {
          var index_highest = 0;
          $(".modal").each(function () {
            // always use a radix when using parseInt
            var index_current = parseInt($(this).css("zIndex"), 10);
            if (index_current > index_highest) {
              index_highest = index_current;
            }
          });
          zIndex = parseInt(this.$element.parents().filter(function () { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + index_highest;
        }

add in file boostrap-timepicker.js below line "var zIndex = parseInt(this.$element.parents().filter(function () { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + 10;"

[luqmanrom]

I added this styles and it fixes the problem so far

 .bootstrap-timepicker-widget {
            z-index: 1060 !important;
            display: block !important;
        }