I am using WickedKeeps jquery library for selecting time. It display current time that was on page load by default in the text field. This is normally fine but I am not using labels in my form. Instead, I am using placeholder to define what the field is for. However, since on page load the field loads timer by default the placeholder is not seen and it becomes difficult in first view to understand what that field is accepts timer for as it does not have a label. I want the timer appear on text field only after users select a timer after clicking the text field.
Current Result
enter image description here
Expected Result
enter image description here
WickedPicker Library
!(function ($, window, document) {
"use strict";
function Wickedpicker(e, t) {
(this.element = $(e)),
(this.options = $.extend({}, defaults, t)),
this.element.addClass("hasWickedpicker"),
this.element.attr("onkeypress", "return false;"),
this.element.attr("aria-showingpicker", "false"),
this.createPicker(),
(this.timepicker = $(".wickedpicker")),
(this.up = $("." + this.options.upArrow.split(/s+/).join("."))),
(this.down = $("." + this.options.downArrow.split(/s+/).join("."))),
(this.separator = $(".wickedpicker__controls__control--separator")),
(this.hoursElem = $(".wickedpicker__controls__control--hours")),
(this.minutesElem = $(".wickedpicker__controls__control--minutes")),
(this.secondsElem = $(".wickedpicker__controls__control--seconds")),
(this.meridiemElem = $(".wickedpicker__controls__control--meridiem")),
(this.close = $("." + this.options.close.split(/s+/).join(".")));
var i = this.timeArrayFromString(this.options.now);
(this.options.now = new Date(today.getFullYear(), today.getMonth(), today.getDate(), i[0], i[1], i[2])),
(this.selectedHour = this.parseHours(this.options.now.getHours())),
(this.selectedMin = this.parseSecMin(this.options.now.getMinutes())),
(this.selectedSec = this.parseSecMin(this.options.now.getSeconds())),
(this.selectedMeridiem = this.parseMeridiem(this.options.now.getHours())),
this.setHoverState(),
this.attach(e),
this.setText(e);
}
"function" != typeof String.prototype.endsWith &&
(String.prototype.endsWith = function (e) {
return e.length > 0 && this.substring(this.length - e.length, this.length) === e;
});
var isMobile = function () {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
},
today = new Date(),
pluginName = "wickedpicker",
defaults = {
now: today.getHours() + ":" + today.getMinutes(),
twentyFour: !1,
upArrow: "wickedpicker__controls__control-up",
downArrow: "wickedpicker__controls__control-down",
close: "wickedpicker__close",
hoverState: "hover-state",
title: "Timepicker",
showSeconds: !1,
timeSeparator: " : ",
secondsInterval: 1,
minutesInterval: 1,
beforeShow: null,
afterShow: null,
show: null,
clearable: !1,
closeOnClickOutside: !0,
onClickOutside: function () {},
};
$.extend(Wickedpicker.prototype, {
showPicker: function (e) {
"function" == typeof this.options.beforeShow && this.options.beforeShow(e, this.timepicker);
var t = $(e).offset();
if (($(e).attr({ "aria-showingpicker": "true", tabindex: -1 }), this.setText(e), this.showHideMeridiemControl(), this.getText(e) !== this.getTime())) {
var i = this.getText(e),
s = /s[ap]m$/i,
o = s.test(i) ? i.substr(-2, 2) : null,
n = i.replace(s, "").split(this.options.timeSeparator),
r = {};
(r.hours = n[0]), (r.minutes = n[1]), (r.meridiem = o), this.options.showSeconds && (r.seconds = n[2]), this.setTime(r);
}
this.timepicker.css({ "z-index": this.element.css("z-index") + 1, position: "absolute", left: t.left, top: t.top + $(e)[0].offsetHeight }).show(),
"function" == typeof this.options.show && this.options.show(e, this.timepicker),
this.handleTimeAdjustments(e);
},
hideTimepicker: function (e) {
this.timepicker.hide(),
"function" == typeof this.options.afterShow && this.options.afterShow(e, this.timepicker),
{
start: function () {
var e = $.Deferred();
return $('[aria-showingpicker="true"]').attr("aria-showingpicker", "false"), e.promise();
},
}
.start()
.then(
(function (e) {
setTimeout(function () {
$('[aria-showingpicker="false"]').attr("tabindex", e);
}, 400);
})(0)
);
},
createPicker: function () {
if (0 === $(".wickedpicker").length) {
var e =
'<div class="wickedpicker"><p class="wickedpicker__title">' +
this.options.title +
'<span class="wickedpicker__close"></span></p><ul class="wickedpicker__controls"><li class="wickedpicker__controls__control"><span class="' +
this.options.upArrow +
'"></span><span class="wickedpicker__controls__control--hours" tabindex="-1">00</span><span class="' +
this.options.downArrow +
'"></span></li><li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' +
this.options.upArrow +
'"></span><span class="wickedpicker__controls__control--minutes" tabindex="-1">00</span><span class="' +
this.options.downArrow +
'"></span></li>';
this.options.showSeconds &&
(e +=
'<li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' +
this.options.upArrow +
'"></span><span class="wickedpicker__controls__control--seconds" tabindex="-1">00</span><span class="' +
this.options.downArrow +
'"></span> </li>'),
(e +=
'<li class="wickedpicker__controls__control"><span class="' +
this.options.upArrow +
'"></span><span class="wickedpicker__controls__control--meridiem" tabindex="-1">AM</span><span class="' +
this.options.downArrow +
'"></span></li></ul></div>'),
$("body").append(e),
this.attachKeyboardEvents();
}
},
showHideMeridiemControl: function () {
!1 === this.options.twentyFour ? $(this.meridiemElem).parent().show() : $(this.meridiemElem).parent().hide();
},
showHideSecondsControl: function () {
this.options.showSeconds ? $(this.secondsElem).parent().show() : $(this.secondsElem).parent().hide();
},
attach: function (e) {
var t = this;
this.options.clearable && t.makePickerInputClearable(e),
$(e).attr("tabindex", 0),
$(e).on("click focus", function (e) {
$(t.timepicker).is(":hidden") && (t.showPicker($(this)), (window.lastTimePickerControl = $(this)), $(t.hoursElem).focus());
});
var i = function (e) {
if ($(t.timepicker).is(":visible")) {
if ($(e.target).is(t.close)) t.hideTimepicker(window.lastTimePickerControl);
else if ($(e.target).closest(t.timepicker).length || $(e.target).closest($(".hasWickedpicker")).length) e.stopPropagation();
else {
if (("function" == typeof t.options.onClickOutside ? t.options.onClickOutside() : console.warn("Type of onClickOutside must be a function"), !t.options.closeOnClickOutside)) return;
t.hideTimepicker(window.lastTimePickerControl);
}
window.lastTimePickerControl = null;
}
};
$(document).off("click", i).on("click", i);
},
attachKeyboardEvents: function () {
$(document).on(
"keydown",
$.proxy(function (e) {
switch (e.keyCode) {
case 9:
"hasWickedpicker" !== e.target.className && $(this.close).trigger("click");
break;
case 27:
$(this.close).trigger("click");
break;
case 37:
e.target.className !== this.hoursElem[0].className ? $(e.target).parent().prevAll("li").not(this.separator.selector).first().children()[1].focus() : $(e.target).parent().siblings(":last").children()[1].focus();
break;
case 39:
e.target.className !== this.meridiemElem[0].className ? $(e.target).parent().nextAll("li").not(this.separator.selector).first().children()[1].focus() : $(e.target).parent().siblings(":first").children()[1].focus();
break;
case 38:
$(":focus").prev().trigger("click");
break;
case 40:
$(":focus").next().trigger("click");
}
}, this)
);
},
setTime: function (e) {
this.setHours(e.hours), this.setMinutes(e.minutes), this.setMeridiem(e.meridiem), this.options.showSeconds && this.setSeconds(e.seconds);
},
getTime: function () {
return [this.formatTime(this.getHours(), this.getMinutes(), this.getMeridiem(), this.getSeconds())];
},
setHours: function (e) {
var t = new Date();
t.setHours(e);
var i = this.parseHours(t.getHours());
this.hoursElem.text(i), (this.selectedHour = i);
},
getHours: function () {
var e = new Date();
return e.setHours(this.hoursElem.text()), e.getHours();
},
parseHours: function (e) {
return !1 === this.options.twentyFour ? ((e + 11) % 12) + 1 : e < 10 ? "0" + e : e;
},
setMinutes: function (e) {
var t = new Date();
t.setMinutes(e);
var i = t.getMinutes(),
s = this.parseSecMin(i);
this.minutesElem.text(s), (this.selectedMin = s);
},
getMinutes: function () {
var e = new Date();
return e.setMinutes(this.minutesElem.text()), e.getMinutes();
},
parseSecMin: function (e) {
return (e < 10 ? "0" : "") + e;
},
