senthilraj / timepicki Goto Github PK
View Code? Open in Web Editor NEWTimepicki - free Time picker jquery plugin
License: MIT License
Timepicki - free Time picker jquery plugin
License: MIT License
There should be a callback option also.
How to active Keyboard on text field?
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.
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
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.
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);
}
Only way to close timepicki at the moment is clicking outside input and timepicki.
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.
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?
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.
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?
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
please add this project to composer or bower.
thank you.
i have tried everything like onchange jquery but did not work
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.
Hi,
None of the options work, for example this fires the timepicki but options are not applied:
<script type="text/javascript"> $(document).ready(function(){ $(".time_element").timepicki( {step_size_minutes: '10'} ); }); </script>Thank you.
Is there a decent way to change ON/OFF to another words? like OPEN/CLOSE?
Thanks
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.
Could you add this project to Bower?
12:12 PM
AM
instead of PM
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:
Lines 33 to 38 in d4019e2
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
While timipicki is open, developer tools shortcuts such as ctr-r or ctrl-shift c don't 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 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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.