JS: Custom Timepicker

custom_picker.js

/**
 * Custom Picker that convert inpuit texts into a dropdowns in xx:xx AM/PM format
 * @param  object $ options
 * @return dropdowns
 */
jQuery(function($) {

	$.fn.customTimepicker = function(options) {
		$(this).each(function(index) {
			options = $.extend({
				'hours': ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
				'minutes' : ['00', '15', '30', '45'],
				'amPm': ["am", "pm"],
				'class': ''
			}, options);

			var that = $(this);

			var currentTime = that.attr('value').split(':');
			var hours = options.hours;
			var minutes = options.minutes;
			var amPm = options.amPm;
			var amSelect = 'am';
			var d = new Date();
			var id = Math.floor(Math.random() * 101);

			var h = (currentTime[0]) ? currentTime[0] : parseInt(d.getHours());
			if (h > 12) {
				h -= 12;
				amSelect = 'pm';
			} else if (h === 0) {
				h = 12;
			}

			var m = (currentTime[1]) ? currentTime[1] : parseInt(d.getMinutes());
			var closest = 0;
			$.each(minutes, function(i, minute) {
				if (Math.abs(minute - m) < Math.abs(closest - m)) {
					if (m > 45) {
						h = h + 1;
					}
					closest = minute;
				}
			});


			var selects = '<select data-ct-type="hour" data-ct-id="' + id + '" class="' + options.class + '">';
			$.each(hours, function(i, hour) {
				selects += '<option value="' + hour + '"' + ((h == hour) ? ' selected ' : '') + '>' + hour + '</option>';
			});
			selects += '</select>';

			selects += '<select data-ct-type="minutes" data-ct-id="' + id + '" class="' + options.class + '">';
			$.each(minutes, function(i, minute) {
				selects += '<option value="' + minute + '"' + ((minute == closest) ? ' selected ' : '') + '>' + minute + '</option>';
			});
			selects += '</select>';

			selects += '<select data-ct-type="amPm" data-ct-id="' + id + '" class="' + options.class + '">';
			$.each(amPm, function(i, am) {
				selects += '<option value="' + am + '"' + ((amSelect == am) ? ' selected ' : '') + '>' + am + '</option>';
			});
			selects += '</select>';

			that.hide().after(selects);

			$('[data-ct-id="' + id + '"]').on('change', function() {
				var time = 0;
				var timezone = $('[data-ct-type="amPm"][data-ct-id="' + id + '"]').find('option:selected').val();
				var selectedHour = $('[data-ct-type="hour"][data-ct-id="' + id + '"]').find('option:selected').val();
				var selectedMinute = $('[data-ct-type="minutes"][data-ct-id="' + id + '"]').find('option:selected').val();
				if (timezone == "pm") selectedHour = parseInt(selectedHour) + 12;
				that.val(selectedHour + ':' + selectedMinute);
			}).change();

			return that;
		});
	};

});