senthilraj / timepicki Goto Github PK

When you click on the element and timepicki opens up then go to click off of it on something that's not an input element, timepicki will not go away. I only was able to test this on iphones but I suspect it happens on any actual mobile device (NOT chrome dev tools simulated). It's easy to reproduce this using xcode's iphone simulator.

I believe this has to do with not handling 'touchstart' events and only click. I have a PR coming up to hopefully resolve this.

With overflow enabled, if I decrease a time step when it is about to reach 0, it causes overflow which result the hour to be reduced.
e.g. set
overflow_minutes = true and step_size_minutes = 5
When step from 02:05 -> 02:00, it becomes 01:55 instead of 02:00.

i have tried everything like onchange jquery but did not work

Hello, i have little problem that i cannot figure out. I really like this library and because that i type this. Can you add open,close function or add option openAtStart? I want have open one input timepicker after load page.

Hi,

When decrasing the hour value from 2 O'clock to 1 O'clock it skips 1 o"clock and set the timer to 12 o"clock similarly 00 O'clock skip in 24 hr clock.

Please provide solution ASAP.

Hello,

I use the 24 hour clock and am wondering if it would be relatively easy to change the behaviour when holding down an arrow so that it increases/decreases the value until button release?

I've implemented this functionality before so will have a dig around tomorrow to see if I can find anything useful, but just thought I would check that it is not already an option?

On line 37 of JS file is problem - // mini = Math.min(Math.max(parseInt(mini), 0), 59);

This line is propably to delete. If we remove it, minutes in 24hours time will show in fine way - 00,05 etc.
With this line minutes are 1,2,5 etc.
So online this is correct, but not in the package to download from ready zip file.

Click into a TimePicki enabled textbox. Keep hitting tab until it focuses on the next text box. A new TimePicki popup comes up but the first does not go away.

When i enter 21 hr in 12 hrs format the results are weird .

Only way to close timepicki at the moment is clicking outside input and timepicki.

Hi,

None of the options work, for example this fires the timepicki but options are not applied:

Thank you.

Hi, when I'm trying to user 24hours format and insert 0-9 minutes, it is not formatted correctly. E.g for 23:02, the result is 23:2.
I guess the problem is in timepicki.js on line https://github.com/senthilraj/TimePicki/blob/master/js/timepicki.js#L37 as it ruins previously prepared value for values lower than 10.

While timipicki is open, developer tools shortcuts such as ctr-r or ctrl-shift c don't work.

How to active Keyboard on text field?

Hi! Love this plugin.
I have a question: how to set default value (start_time) using html, not js. Now it works like this:

$(".js-timepicker").timepicki({
    start_time: ["20", "00"]
});

but it is not convenient. Why not just take default value from value attribute?

<input type="text" value="20:00" class="js-timepicker">

Moreover, divider is now " : ", but I want to use ":", without spaces, but there is no option to change this.
Thanks in advance.

Could you add this project to Bower?

Hi.

First of all, this component is amazing, help me a lot.

Sorry about my english, I'm improving it.

Well... I need some help to fix this problem:

I have two timepicki components in a same page, when change the time in a first component, the second change too. Is it simple? Can Help me about that?

Hi,

You got the following line "mini = Math.min(Math.max(parseInt(mini), 0), 59);" twice in var defaults at line 37 in timepicki.js. This causes an issue with the minutes shown in the input field, for minutes lesser than 10 it shows only one digit (example: 9) instead of two (example: 09). Removing the duplicate line in timepicki.js at Line 37 it fixes the issue. Could you also fix the value lesser than 10 shown in ti_tx and mi_tx input field to be two digits when changing them using the Arrow up/Down keys on the Keyboard.

Regards

There should be a callback option also.

I use timepicki in a bootstrap modal as a common element. I want to initialize it when the modal is shown with a start_time and destroy the timepicki when the modal is hided.

SHOW:

$('input[name="data[appointment_time]"]').val(time).timepicki({
　show_meridian: false,
　reset: true,
　step_size_minutes: 5,
　overflow_minutes: true,
　start_time: time.replace(/ /g,'').split(':'),
});

DESTROY:

　$('input[name="data[appointment_time]"]')
　　.off('blur focus')
　　.removeData()
　　.removeAttr('data-timepicki-tim data-timepicki-mini data-timepicki-meri');
　$('input[name="data[appointment_time]"]').next('.timepicker_wrap').remove();
　$('input[name="data[appointment_time]"]').unwrap();
　$('input[name="data[appointment_time]"]').val('');

As you can see I destroy the timepicki with a very hacked way.
Is there a better way?
or is this possible to add a destroy method to the library?
Thx in advance.

Steps to reproduce

1. change your system time to 12:12 PM
2. now try the example It will show AM instead of PM

@senthilraj

If you click the parent input to open TimePicki, then change either the hour, minute, or meridian input using your keyboard, and then click the parent input again, it reverts your new value back to the original value.

Another smaller issue is that when you click the parent input, open_timepicki is unnecessarily called twice.

I've described how I fixed these issues below. Maybe there's a better way to handle this?

Added a timepicki_open data property to the parent element and default it to false.

var ele_par = $(this).parents(".time_pick");
ele_par.data('timepicki_open', false);

Removed timepicki_open() call from document.onClick event. Also removed code that sets CSS position properties and moved it to the timepicki_open function. Check if TimePicki is already open when clicking the parent element, and if so call set_value() to apply values inputted using keyboard.

$(document).on("click", function(event) {
	if (!$(event.target).is(ele_next) && ele_next.css("display")=="block" && !$(event.target).is($('.reset_time'))) {
		if (!$(event.target).is(ele)) {
			set_value(event, !is_element_in_timepicki($(event.target)));
		} else {
			if (ele_par.data('timepicki_open'))
				set_value();
		}
	}
});

Check if TimePicki is already open before calling timepicki_open().

ele.on('focus', function(){
	if (!ele_par.data('timepicki_open'))
		open_timepicki();
});

In inputs.on('focus' function, add call to set_value() so that new input values are applied when tabbing between fields.

inputs.on('focus', function() {
	var input = $(this);
	set_value();
	if (!input.is(ele)) {
		input.select();
	}
});

In the open_timepicki function, add the CSS position code and set timepicki_open data property to true after fading in TimePicki.

function open_timepicki() {
	set_date(settings.start_time);
	ele_next.css({
		"top": ele_hei + "px",
		"left": "0px"
	});
	ele_next.fadeIn();
	ele_par.data('timepicki_open', true);
	...

In close_timepicki function, set timepicki_open data property to false.

function close_timepicki() {
	ele_next.fadeOut();
	ele_par.data('timepicki_open', false);
}

Is there a decent way to change ON/OFF to another words? like OPEN/CLOSE?

Thanks

I i have a problem with this plugin, when i select the time, exemple: 17:50, in input show-me 17:50 but when i submit send me 00:00:17

Can help me please thanks

Hi,

when picking minutes "00", it turns into "0", on the destination input. Checking your code, you have a small bug that turns the value into number before concatenate into a string.

The excerpt of code is the following:

I don't know why are you repeating the math operations here, but it makes no sense to do it after you left padding the number.

Regards,
Fernando

Hi:

Great plugin! However, I wish that the current time was not automatically inserted if the user has not clicked any of the TimePicki arrows and intentionally selected a time. In other words, once the user clicks in the field - perhaps out of curiosity - and then clicks off of the timePicki panel in order to make it go away, the only way the user can get rid of the value (the current time) that timePicki automatically inserts, is to click in the input field again in order to bring up TimePicki again, and then click "reset"; I think this is a little annoying to users who may have clicked in the input field just to see what happens - so again, in other words, is there a way to make TimePicki NOT automatically insert the current time value in the input on close, but rather only insert a time value in the input if the user has in fact clicked on any of the TimePicki arrows in order to intentionally select a time? Thanks

please add this project to composer or bower.
thank you.

I believe, styling would be a little bit better, if you guys has targeted from a parent.
I mean, instead of writing
.prev {
..........
......
}

.time_pick .prev {
........
}

Rules from your '.prev' class overrode into my project's '.prev' class.