jquery - In Wickedpicker how to set my time like "08:00 AM"? -
i want timepicker ui mobile device. trying different plugins. got "wickedpicker" close need.
in not able populate default time in edit page "08:30 am" or "01:30 pm".
it showing current time.
these options plugin:
var options = { now: "12:35", //hh:mm 24 hour format only, defaults current time twentyfour: false, //display 24 hour format, defaults false uparrow: 'wickedpicker__controls__control-up', //the arrow class selector use, custom css downarrow: 'wickedpicker__controls__control-down', //the down arrow class selector use, custom css close: 'wickedpicker__close', //the close class selector use, custom css hoverstate: 'hover-state', //the hover state class use, custom css title: 'timepicker', //the wickedpicker's title, showseconds: false, //whether or not show seconds, secondsinterval: 1, //change interval seconds, defaults 1 , minutesinterval: 1, //change interval minutes, defaults 1 beforeshow: null, //a function called before wickedpicker shown show: null, //a function called when wickedpicker shown clearable: false, //make picker's input clearable (has clickable "x") }; ref link : https://ericjgagnon.github.io/wickedpicker/
i have tried changing option "now" false , remove still same thing happen.
it helfull if can give link similar jquery plugin time picker time limit set.
in current version (v0.4.1) there isn't way update time programatically, i've modified plugin.
here's how use it:
var mypicker = $('.timepicker').wickedpicker(options); // set time 2pm mypicker.wickedpicker('settime', 0, "14:00"); // 0 index of timepicker. use 0 if 1 present demo: http://plnkr.co/edit/fdhlj3ds6bowzcxc0fr8?p=preview
/** * wickedpicker v0.4.1 - simple jquery timepicker. * copyright (c) 2015-2016 eric gagnon - http://github.com/wickedridge/wickedpicker * license: mit * * 31/07/17 modified k scandrett allow changing time. * example: * var options = {now: "12:35"}; * var mypicker = $('.timepicker').wickedpicker(options); * * mypicker.wickedpicker('settime', 0, "14:00"); // 0 index of timepicker. use 0 if 1 */ (function ($, window, document) { "use strict"; if (typeof string.prototype.endswith != 'function') { /* * checks if string end ends string * * @param {string} string checked * * @return {bool} */ string.prototype.endswith = function (string) { return string.length > 0 && this.substring(this.length - string.length, this.length) === string; } } /* * returns if user agent mobile * * @return {bool} */ var ismobile = function () { return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.useragent); }; var today = new date(); var pluginname = "wickedpicker", defaults = { now: today.gethours() + ':' + today.getminutes(), twentyfour: false, uparrow: 'wickedpicker__controls__control-up', downarrow: 'wickedpicker__controls__control-down', close: 'wickedpicker__close', hoverstate: 'hover-state', title: 'timepicker', showseconds: false, timeseparator: ' : ', secondsinterval: 1, minutesinterval: 1, beforeshow: null, aftershow: null, show: null, clearable: false, closeonclickoutside: true, onclickoutside: function() {}, }; /* * @param {object} input object timepicker attached to. * @param {object} object containing options */ function wickedpicker(element, options) { this.element = $(element); this.options = $.extend({}, defaults, options); 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('.')); //create new date object based on default or passing in value var time = this.timearrayfromstring(this.options.now); this.options.now = new date(today.getfullyear(), today.getmonth(), today.getdate(), time[0], time[1], time[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(element); this.settext(element); } $.extend(wickedpicker.prototype, { /* * show given input's timepicker * * @param {object} input being clicked */ showpicker: function (element) { //if there beforeshow function, call input calling timepicker , // timepicker if (typeof this.options.beforeshow === 'function') { this.options.beforeshow(element, this.timepicker); } var timepickerpos = $(element).offset(); $(element).attr({'aria-showingpicker': 'true', 'tabindex': -1}); this.settext(element); this.showhidemeridiemcontrol(); if (this.gettext(element) !== this.gettime()) { // check meridiem var text = this.gettext(element); var meridiem = /\s\w\w$/.test(text) ? text.substr(-2, 2) : null; var inputtime = text.replace(/\s\w\w$/, '').split(this.options.timeseparator); var newtime = {}; newtime.hours = inputtime[0]; newtime.minutes = inputtime[1]; if (this.options.showseconds) { newtime.seconds = inputtime[2]; newtime.meridiem = meridiem; } else { newtime.meridiem = meridiem; } this.settime(newtime); } this.timepicker.css({ 'z-index': this.element.css('z-index') + 1, position: 'absolute', left: timepickerpos.left, top: timepickerpos.top + $(element)[0].offsetheight }).show(); //if there show function, call input calling timepicker , // timepicker if (typeof this.options.show === 'function') { this.options.show(element, this.timepicker); } this.handletimeadjustments(element); }, /* * hides timepicker shown if not part of timepicker * * @param {object} dom object being clicked on page * * beinnlora: added trigger function call on closing/hiding timepicker. */ hidetimepicker: function (element) { this.timepicker.hide(); if (typeof this.options.aftershow === 'function') { this.options.aftershow(element, this.timepicker); } var pickerhidden = { start: function () { var setshowpickerfalse = $.deferred(); $('[aria-showingpicker="true"]').attr('aria-showingpicker', 'false'); return setshowpickerfalse.promise(); } }; function settabindex(index) { settimeout(function () { $('[aria-showingpicker="false"]').attr('tabindex', index); }, 400); } pickerhidden.start().then(settabindex(0)); }, /* * create new timepicker. single timepicker per page */ createpicker: function () { if ($('.wickedpicker').length === 0) { var picker = '<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>'; if (this.options.showseconds) { picker += '<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>'; } picker += '<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(picker); this.attachkeyboardevents(); } }, /* * hides meridiem control if timepicker 24 hour clock */ showhidemeridiemcontrol: function () { if (this.options.twentyfour === false) { $(this.meridiemelem).parent().show(); } else { $(this.meridiemelem).parent().hide(); } }, /* * hides seconds control if timepicker has showseconds set true */ showhidesecondscontrol: function () { if (this.options.showseconds) { $(this.secondselem).parent().show(); } else { $(this.secondselem).parent().hide(); } }, /* * bind click events input * * @param {object} input element */ attach: function (element) { var self = this; if (this.options.clearable) { self.makepickerinputclearable(element); } $(element).attr('tabindex', 0); $(element).on('click focus', function (event) { //prevent multiple firings if ($(self.timepicker).is(':hidden')) { self.showpicker($(this)); window.lasttimepickercontrol = $(this); //put reference on timepicker global scope unsing in aftershow function $(self.hourselem).focus(); } }); //handle click events closing wickedpicker var clickhandler = function (event) { //todo: fix double firing //only fire hide event when have if ($(self.timepicker).is(':visible')) { //clicking x if ($(event.target).is(self.close)) { self.hidetimepicker(window.lasttimepickercontrol); } else if ($(event.target).closest(self.timepicker).length || $(event.target).closest($('.haswickedpicker')).length) { //clicking wickedpicker or 1 of it's inputs event.stoppropagation(); } else { //everything else if (typeof self.options.onclickoutside === 'function') { self.options.onclickoutside(); } else { console.warn("type of onclickoutside must function"); } if (!self.options.closeonclickoutside) { return; } self.hidetimepicker(window.lasttimepickercontrol); } window.lasttimepickercontrol = null; } }; $(document).off('click', clickhandler).on('click', clickhandler); }, /** * added keyboard functionality improve usabil */ attachkeyboardevents: function () { $(document).on('keydown', $.proxy(function (event) { switch (event.keycode) { case 9: if (event.target.classname !== 'haswickedpicker') { $(this.close).trigger('click'); } break; case 27: $(this.close).trigger('click'); break; case 37: //left arrow if (event.target.classname !== this.hourselem[0].classname) { $(event.target).parent().prevall('li').not(this.separator.selector).first().children()[1].focus(); } else { $(event.target).parent().siblings(':last').children()[1].focus(); } break; case 39: //right arrow if (event.target.classname !== this.meridiemelem[0].classname) { $(event.target).parent().nextall('li').not(this.separator.selector).first().children()[1].focus(); } else { $(event.target).parent().siblings(':first').children()[1].focus(); } break; case 38: //up arrow $(':focus').prev().trigger('click'); break; case 40: //down arrow $(':focus').next().trigger('click'); break; default: break; } }, this)); }, /* * set time on timepicker * * @param {object} date being set */ settime: function (time) { this.sethours(time.hours); this.setminutes(time.minutes); this.setmeridiem(time.meridiem); if (this.options.showseconds) { this.setseconds(time.seconds); } }, /* * time timepicker */ gettime: function () { return [this.formattime(this.gethours(), this.getminutes(), this.getmeridiem(), this.getseconds())]; }, /* * set timpicker's hour(s) value * * @param {string} hours */ sethours: function (hours) { var hour = new date(); hour.sethours(hours); var hourstext = this.parsehours(hour.gethours()); this.hourselem.text(hourstext); this.selectedhour = hourstext; }, /* * hour(s) value timepicker * * @return {integer} */ gethours: function () { var hours = new date(); hours.sethours(this.hourselem.text()); return hours.gethours(); }, /* * returns correct hour value based on type of clock, 12 or 24 hour * * @param {integer} hours value before parsing * * @return {string|integer} */ parsehours: function (hours) { return (this.options.twentyfour === false) ? ((hours + 11) % 12) + 1 : (hours < 10) ? '0' + hours : hours; }, /* * sets timpicker's minutes value * * @param {string} minutes */ setminutes: function (minutes) { var minute = new date(); minute.setminutes(minutes); var minutestext = minute.getminutes(); var min = this.parsesecmin(minutestext); this.minuteselem.text(min); this.selectedmin = min; }, /* * minutes value timepicker * * @return {integer} */ getminutes: function () { var minutes = new date(); minutes.setminutes(this.minuteselem.text()); return minutes.getminutes(); }, /* * return human-readable minutes/seconds value * * @param {string} value seconds or minutes * * @return {string|integer} */ parsesecmin: function (value) { return ((value < 10) ? '0' : '') + value; }, /* * set timepicker's meridiem value, or pm * * @param {string} new meridiem */ setmeridiem: function (inputmeridiem) { var newmeridiem = ''; if (inputmeridiem === undefined) { var meridiem = this.getmeridiem(); newmeridiem = (meridiem === 'pm') ? 'am' : 'pm'; } else { newmeridiem = inputmeridiem; } this.meridiemelem.text(newmeridiem); this.selectedmeridiem = newmeridiem; }, /* * timepicker's meridiem value, or pm * * @return {string} */ getmeridiem: function () { return this.meridiemelem.text(); }, /* * set timepicker's seconds value * * @param {string} seconds */ setseconds: function (seconds) { var second = new date(); second.setseconds(seconds); var secondstext = second.getseconds(); var sec = this.parsesecmin(secondstext); this.secondselem.text(sec); this.selectedsec = sec; }, /* * timepicker's seconds value * * return {string} */ getseconds: function () { var seconds = new date(); seconds.setseconds(this.secondselem.text()); return seconds.getseconds(); }, /* * correct meridiem based on hours given * * @param {string|integer} hours * * @return {string} */ parsemeridiem: function (hours) { return (hours > 11) ? 'pm' : 'am'; }, /* * handles time incrementing , decrementing , passes * operator, '+' or '-', input set after change * , current arrow clicked, decipher if hours, ninutes, or meridiem. * * @param {object} input element */ handletimeadjustments: function (element) { var timeout = 0; //click , click , hold timepicker incrementer , decrementer $(this.up).add(this.down).off('mousedown click touchstart').on('mousedown click', { 'wickedpicker': this, 'input': element }, function (event) { if(event.which!=1) return false; var operator = (this.classname.indexof('up') > -1) ? '+' : '-'; var passeddata = event.data; if (event.type == 'mousedown') { timeout = setinterval($.proxy(function (args) { args.wickedpicker.changevalue(operator, args.input, this); }, this, {'wickedpicker': passeddata.wickedpicker, 'input': passeddata.input}), 200); } else { passeddata.wickedpicker.changevalue(operator, passeddata.input, this); } }).bind('mouseup touchend', function () { clearinterval(timeout); }); }, /* * change timepicker's time base on clicked * * @param {string} + or - operator * @param {object} timepicker's associated input set post change * @param {object} dom arrow object clicked, determines if hours, * minutes, or meridiem base on operator , siblings */ changevalue: function (operator, input, clicked) { var target = (operator === '+') ? clicked.nextsibling : clicked.previoussibling; var targetclass = $(target).attr('class'); if (targetclass.endswith('hours')) { this.sethours(eval(this.gethours() + operator + 1)); } else if (targetclass.endswith('minutes')) { this.setminutes(eval(this.getminutes() + operator + this.options.minutesinterval)); } else if (targetclass.endswith('seconds')) { this.setseconds(eval(this.getseconds() + operator + this.options.secondsinterval)); } else { this.setmeridiem(); } this.settext(input); }, /* * sets give input's text current timepicker's time * * @param {object} input element */ settext: function (input) { $(input).val(this.formattime(this.selectedhour, this.selectedmin, this.selectedmeridiem, this.selectedsec)).change(); }, /* * given input's value * * @param {object} input element * * @return {string} */ gettext: function (input) { return $(input).val(); }, /* * returns correct time format string * * @param {string} hour * @param {string} minutes * @param {string} meridiem * * @return {string} */ formattime: function (hour, min, meridiem, seconds) { var formattedtime = hour + this.options.timeseparator + min; if (this.options.twentyfour) { formattedtime = hour + this.options.timeseparator + min; } if (this.options.showseconds) { formattedtime += this.options.timeseparator + seconds; } if (this.options.twentyfour === false) { formattedtime += ' ' + meridiem; } return formattedtime; }, /** * apply hover class arrows , close icon fonts */ sethoverstate: function () { var self = this; if (!ismobile()) { $(this.up).add(this.down).add(this.close).hover(function () { $(this).toggleclass(self.options.hoverstate); }); } }, /** * wrapping given input field clearable container * , add span contain x, , bind clear * input event span * * @param input */ makepickerinputclearable: function(input) { $(input).wrap('<div class="clearable-picker"></div>').after('<span data-clear-picker>×</span>'); //when x clicked, clear sibling input field $('[data-clear-picker]').on('click', function(event) { $(this).siblings('.haswickedpicker').val(''); }); }, /** * convert options time string format * array * * returns => [hours, minutes, seconds] * * @param stringtime * @returns {*} */ timearrayfromstring: function (stringtime) { if (stringtime.length) { var time = stringtime.split(':'); time[2] = (time.length < 3) ? '00' : time[2]; return time; } return false; }, //public functions /* * returns requested input element's value */ _time: function () { var inputvalue = $(this.element).val(); return (inputvalue === '') ? this.formattime(this.selectedhour, this.selectedmin, this.selectedmeridiem, this.selectedsec) : inputvalue; }, /* ks added function */ _settime: function (stringtime) { this.options.now = stringtime; var time = this.timearrayfromstring(this.options.now); this.options.now = new date(today.getfullyear(), today.getmonth(), today.getdate(), time[0], time[1], time[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.settext(this.element); var inputvalue = $(this.element).val(); return (inputvalue === '') ? this.formattime(this.selectedhour, this.selectedmin, this.selectedmeridiem, this.selectedsec) : inputvalue; }, _hide: function() { this.hidetimepicker(this.element); } }); //optional index if multiple inputs share same class $.fn[pluginname] = function (options, index, time) { if (!$.isfunction(wickedpicker.prototype['_' + options])) { return this.each(function () { if (!$.data(this, "plugin_" + pluginname)) { $.data(this, "plugin_" + pluginname, new wickedpicker(this, options)); } }); } else if ($(this).hasclass('haswickedpicker')) { /* ks added check 'settime' */ if (options === "settime") { if (index !== undefined) { return $.data($(this)[index], 'plugin_' + pluginname)['_settime'](time); } else { return $.data($(this)[0], 'plugin_' + pluginname)['_settime'](time); } } else { if (index !== undefined) { return $.data($(this)[index], 'plugin_' + pluginname)['_' + options](); } else { return $.data($(this)[0], 'plugin_' + pluginname)['_' + options](); } } } }; })(jquery, window, document); 
Comments
Post a Comment