How's a "duration picker" called and does it exist? - javascript

I'm looking for something like a "duration picker". Because googling "duration picker" doesn't give me any result, I would like to know if there is a technical name for it which can help in searching it. Time picker and Time Span picker doesn't bring anything helpful at the moment.
If something similar exists and someone can point me to that, it's ok instead of the technical name.
Update 1:
Sorry I completely forgot to explain what I mean by duration picker.
It's not a time picker, but a way to choose how much time will last doing something, not relative to a date. For example, cooking a given recipe will take (duration) 4 hours and 10 minutes. Traveling from here to there will take 4 days and 10 hours.
My basic idea is the possibility to configure the picker for the "bigger" unit to use (days probably), the duration will be expressed in seconds internally. So I can say 20 days and 23 hours and 0 minutes or if the "bigger" unit is days (for a software development job for example), I can write 150 hours and 30 minutes and 0 seconds.
It would be nice the option to hide some smaller fields, like minutes/seconds.
Update 2:
A very simple ui example:

You could use a set of customized jQuery spinners
$('#seconds').spinner({
spin: function (event, ui) {
if (ui.value >= 60) {
$(this).spinner('value', ui.value - 60);
$('#minutes').spinner('stepUp');
return false;
} else if (ui.value < 0) {
$(this).spinner('value', ui.value + 60);
$('#minutes').spinner('stepDown');
return false;
}
}
});
like this:
http://jsfiddle.net/xHzMw/1/

I know this question is old, but it seems like a satisfactory answer wasn't reached. I made a jQuery plugin for this exact use case, i'll post it for anyone that comes looking in the future like I did.
https://github.com/Tartarus762/jquery-duration-picker

Bootstrap Duration picker - Github, npm.
Dependencies: jQuery and Bootstrap 3 (for styling only).

Its called just like you called it and exists at http://shop.ekerner.com/index.php/shop/javascript/duration-picker-detail

I think you're looking for something like this jQuery plugin: http://www.jqueryscript.net/time-clock/Lightweight-Duration-Picker-Plugin-For-jQuery-Semantic-UI.html

Related

Change FlipClock duration seconds timer setting

I have FlipClock code as following
var clockDuration = $('.clock-duration').FlipClock({
// ... your options here
});
Clock working fine but I have requirement as follows
For e.x - Normally Clock start as 00:00(mm:ss) and after 60 seconds it shows 00:59(mm:ss) and after that it will change minute 01:00(mm:ss) but I want change this when clock start it should be started as 00:01 and after 60 seconds it should shown as 00:60 and after that 01:00
Basically I need to change FlipClock start and end seconds setting
Can you please help me out from this stuck?
I refer following site for this but not found solution for this
FlipClock
With such requirements I can see only 4 solutions:
Change core code of FlipClock javascript file.
Make javascript callback funcion on seconds change in FlipClock and change text in time block manually. It's pretty complex with many exeptions that will be finded.
As you want to show after 60 seconds time: 00:60 and then 01:00, so you want in 1 second show 2 seconds... That's very strange behavior that makes no sense and no real profit. Best solution - give up in this idea, because it will cost much time with bad results in the end.
Make your own timer.
I think 3 is best. Next best is 4 alternative.

Ionic / Angular 2 Countdown timer solutions

I am looking to build a simple Angular 2 (4) / Ionic 2 Countdown timer for my application, but I can't seem to find any open-source solutions available, so I wanted to see what suggestions you guys had.
Here's an example of what I'm looking for:
Now the best 'solution' that i've found is: MobiScroll CountdownTimer
But the catch with MobiScroll is that it has a pretty hefty licensing fee associated with it (almost $200). Which isn't really feasible considering I'm just trying to make something for fun right now.
So I was wondering if there were any open-source solutions out there, that I could utilize, or if i'll have to implement a custom solution, what animation / libraries you think I should start looking at?
I've searched the StackOverflow questions for a solution, but I have yet to find a solid source yet, so I apologize if this is a duplicate, but I don't think that it is.
it would be much easier "in my opinion" and less time consuming to create your own very easily.
you can go here : https://ionicframework.com/docs/api/components/datetime/DateTime/
to use the datetime picker from ionic, which will give your picker a native look, and simply use typescript to count down to zero from the time the user inputs.
Example:
private timer;
private maxTime = //get this from user input in the ionic time picker and convert it to seconds maybe.
StartTimer() {
this.timer = setTimeout(x =>
{
if(maxTime <= 0) { alert("timer done";}
maxTime -= 1;
StartTimer();
}, 1000);

setInterval function using jquery is causing a "blink"

Personal project using jQuery.
I'm trying to create a function that runs on the hour for 5 seconds. I've done this by getting the current minutes and acting when they are at '00'. (Although for testing the minutes need to be manually changed to the next minute, unless you want to wait an hour to see it run again.)
The function acts on 2 objects, one to add/remove a class, the other to slideUp/Down.
It works, but after the initial running, the slideDown/Up jQuery causes a "blink" every 5 seconds for the rest of the current minute.
I've tried setting the setInterval for 5000, however that hasn't solved the issue. I'm at my wits end really.
While I am also using moment.js elsewhere. This function isn't using moment(). Primarily because I haven't been able to get functions working with moment() either.
Just head to the ....
jsFiddle example
Remember to set the =='00' to the next minute -- sure makes testing easier I really appreciate anyone waiting for this to run. I know it can be a pain to have to wait a minute to see the function at work.
If you watch the function run for 5 seconds, it will stop... but continue watching.. the slideDown() will repeat every 5 seconds until the minute is no longer XX.
How can I stop this repeat??
Thanks!
There're two place for fix.
1. miss usage for 'clearInterval'
clearInterval parameter is The ID of the timer returned by the setInterval() method.
reference this link, w3c definition for clearInterval.
var intervalId = setInterval(function() { alarm(); }, 5000);
...
clearInterval(intervalId );
2. secs >= "05" condition is wrong
change string "05" to int 5.
Believe it or not I sorted it a few moments after posting this.
My conditional was off, and I thought I tried everything. Guess not.
This works
if((mins == "29") && (secs <= '05')) {
$('#focus').slideDown(500);
$('.projcnt').addClass('jump');
} else {
$('#focus').slideUp(300);
$('.projcnt').removeClass('jump');
}
And the ...
working, updated fiddle

Use minute(of the day) for showing hours in dc js x axis

I have minutes of a day i.e., form 0 to 1440.
Currently I am showing these minutes as it is, but how do I show it into hours.
For example:
3:AM ......... 4:AM.........5:AM
I tried several others things but no luck till now.
Here is what I am doing currently:
.x(d3.scale.linear().range(1, chartWidth).domain([1, 1440]))
And here is what I have tried:
d3.time.scale().domain([new Date(2013,0,2), new Date(2013, 0, 3)])
This show the time exactly how I want but the graph doesn't show up.
Sounds like you may not have set the .xUnits correctly. You probably want .xUnits(d3.time.hours) for what you are doing.
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#xunitsxunits-function
Basically, .xUnits always has to match the scale.
This is a very common gotcha with dc.js and we'd like to eliminate the xUnits, but we don't know how to. It is used to determine the number of points/bars.

Livestamp Plugin Jquery - how to show a time?

I use this jquery plugin: livestamp.
If you know, tell please, how to show time (hours, minutes ago) only for the current day. After 24 hours on next day - to show label "yesterday" or simple date.
Thank you!
By default, I don't think livestamp can do this.
But, at the bottom of livestamp's examples, they have some code to animate the text when it changes by hooking into the change.livestamp event.
We can use moment.js to modify this code to do what you're asking.
$('#animation').on('change.livestamp', function(event, from, to) {
event.preventDefault(); // Stop the text from changing automatically
// Get the original timestamp out of the event
var originalTS = event.timeStamp;
// Make a new moment object to compare the timestamp to
var newDate = moment();
// Use moment's .diff method to get the ms difference between timestamps
var delta = newDate.diff(originalTS);
// If the difference is less than a day's worth of ms
if (delta < 86400000){
// Use formatted text provided by the change event
$(this).html(to);
}
else {
// Format the moment object with whatever moment format you want
$(this).html( newDate.format("dddd M/D/YYYY") );
}
}).livestamp();
I haven't used livestamp, but it seems to rely on moment existing for its formatting options, so this should just work.
Livestamp's source is super small, so consider hacking on it yourself if you have other stuff you want to be able to do.

Categories