Currently working on a project where I have to build time picker with start, end time and interval of meeting. User first pick start time for example 7:15am, then next step is to pick meeting interval that range from 5 min up to 60 min, and last step is end time that should start based on picked start time and meeting interval. So if user pick 7:30am for start time, and pick meeting interval 50 min, my end time should start at 8:20am, 9:10am, 10:00am,... all the way up to 5pm but not greater than. First problem with my current is Start Time picker, in drop down next to 12 hour value I should have PM. My code gives me AM. Second is End Time works fine if I pick meeting interval from 5 min up to 45 min, but if I pick meeting length 50 min or 55 min I'm not getting correct end time values in drop down.
HTML:
<tr>
<th>Start Time:</th>
<td>
<select name="stime" id="stime" />
<option value="">--Select start time--</option>
</select>
</td>
<br />
<th>Meeting Length:</th>
<td>
<select name="meet_leng" id="meet_leng" onClick="setEndTime()">
<option value="">--Select length--</option>
</select>
</td>
<br />
<th>End Time:</th>
<td>
<select name="etime" id="etime"/>
<option value="">--Select end time--</option>
</select>
</td>
</tr>
JavaScript:
$(function() {
for(var i=5; i <= 60; i+=5){
$('#meet_leng').append('<option value="'+i+'">'+i+' min'+'</option>');
}
for(var i=700; i<= 1700; i+=15){
var mins = i % 100;
var hours = parseInt(i/100);
if (mins > 45) {
mins = 0;
hours += 1;
i = hours * 100;
}
var standardTime = ' AM';
if(hours > 12){
standardTime = ' PM';
hours %= 13;
hours++;
}else{
hours %= 13;
}
$('#stime').append('<option value="'+i+'">'+('0' + (hours)).slice(-2)+':'+('0' +mins).slice(-2)+standardTime+'</option>');
}
});
function setEndTime(){
var meetingLength = $('#meet_leng').val();
var selectedTime = $('#stime').val();
var sum = meetingLength + selectedTime;
for(var i=sum; i <= 1700; i+=meetingLength){
var mins = i % 100;
var hours = parseInt(i/100);
if (mins > 59) {
var new_mins = mins % 60;
hours += 1;
i = (hours * 100) + new_mins;
}
$('#etime').append('<option value="'+i+'">'+i+'</option>');
}
}
Here is my working example: https://jsfiddle.net/dmilos89/rhuh6qum/22/.
If anyone can help with this problem please let me know.
basically you could look at using the Date api instead. In the bottom example, we have a startTime which can be a string,
we split it into integers
create a new Date object and set the time to the startTime
add your change in minutes
then pull out the new hour/minutes and format as you please
(i think there are ways to get this via the Date api, but i figured heavy handed was fine for the example)
https://jsfiddle.net/2fpg3rte/1/
var time = new Date();
var startTime = "12:01 PM";
var timeChange = 60; //60 minutes
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
time.setHours(parseInt(startHour));
time.setMinutes(parseInt(startMin));
$("#start").html(getFormattedTime(time));
//adjusted time
time.setMinutes(time.getMinutes() + timeChange);
$("#end").html(getFormattedTime(time));
function getFormattedTime(time) {
var postfix = "AM";
var hour = time.getHours();
var min = time.getMinutes();
//format hours
if (hour > 12) {
hour = (hour - 12 === 0) ? 12 : hour - 12;
postfix = hour === 0 ? "AM" : "PM";
}
//format minutes
min = (''+min).length > 1 ? min : '0' + min;
return hour + ':' + min + ' ' + postfix;
}
Related
I want to have a continuous daily countdown where the plan will have 2 schedule/specific time daily.
I am now still troubleshoot at 1 specific time.
The following is modification from this answer https://stackoverflow.com/a/23512971/20903104
<script type="text/javascript">
function executeAction (target){
console.log(target);
//next schedule
};
var date;
var remaining = document.getElementById("remaining");
var schedule1 = document.getElementById("schedule1").value.split(":");
var target = schedule1[0];
setInterval(function () {
date = new Date();
var currenthours = date.getHours();
var hours;
var minutes;
var secondes;
if (currenthours != target) {
if (currenthours < target) hours = target - 1 - currenthours;
else hours = target + (24 - currenthours);
minutes = 60 - date.getMinutes();
secondes = 60 - date.getSeconds();
remaining.innerHTML = hours + ":" + minutes + ":" + secondes;
} else {
remaining.innerHTML = "LIVE NOW";
executeAction(target);
//continue to next schedule
};
}, 1000);
</script>
Let say, now is 11:00 (AM) the next schedule is 10:00 (AM) the output is:
enter image description here
it should be 23:00:00 and counting down
I want to add second (or third schedule) and add this code :
<input type="time" id="schedule1" value="10:00:00" readonly />
<div id="remaining"></div>
<input type="time" id="schedule2" value="22:00:00" readonly />
<div id="remaining2"></div>
How to proceed to next schedule continuously?
complete code : https://jsfiddle.net/kuraba/6or71L90/14/
I have a timesheet that I use jQuery to auto calculate the value between the start and stop times and then dynamically populate other input boxes based on the values from start and stop times. It was working fine until my boss wanted to change the start and stop times to only have 30 minute increments in them, so 7:00 AM, 7:30 AM etc. So since I don't know of a way to make the html tag of "time" increment by 30 min I just changed the input to a select and kept all the class names and field names the same and added the option values. The form still works, I get my values in all the boxes I want and it totals them up as well but now the values are not adding up correctly. If you select 8:00 AM in the start and 8:00 PM in the stop it totals 24 instead of 12. It seems to work up to around 10 hours then it falls apart. I've also just noticed going from something like 10:00 AM to 11:00 PM will only total 1 hour.
Here is the fiddle:
can someone tell me why it works fine when the field is an input but now that it's a select it falls apart?
//Event on change in START or STOP.
$(".start, .stop").on('change', function() {
//Look into $(this) to find the new TR group (row) with the class rowTR.
//This is dynamic and works for all ROWS modified
var start = $(this).parent().parent().find('.start').val().split(':');
var stop = $(this).parent().parent().find('.stop').val().split(':');
var hours1 = parseInt(start[0], 10) || 0;
hours2 = parseInt(stop[0], 10) || 0;
mins1 = parseInt(start[1], 10) || 0;
mins2 = parseInt(stop[1], 10) || 0;
var hours = hours2 - hours1,
mins = 0;
if (hours < 0) hours = 24 + hours;
if (mins2 >= mins1) {
mins = mins2 - mins1;
} else {
mins = (mins2 + 60) - mins1;
hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
$(this).parent().parent().find('.hours').val(hours);
$(this).parent().parent().find('.dailyTotalGeneric').val(hours);
//Calculate all the daily total by row.
calculateWeeklyTotal()
});
$(".lunch").on('change', function() {
//get the value
var num = parseFloat($(this).parent().parent().find('.dailyTotalGeneric').val());
//If is checked, the lunch will be discount from hours.
if ($(this).is(':checked')) {
//Use newNum with discount of LUNCH
$(this).parent().parent().find('.dailyTotalGeneric').val(num - 0.5);
} else {
//else, add 0.5 to hours
$(this).parent().parent().find('.dailyTotalGeneric').val(num + 0.5);
}
//Calculate the daily total again
calculateWeeklyTotal()
});
function calculateWeeklyTotal() {
var total = 0;
$('.dailyTotalGeneric').each(function() {
total += ($(this).val() && !isNaN($(this).val())) ? parseFloat ($(this).val()) : parseFloat(0);
});
//Only 2 decimals
$('#total').val(total.toFixed(2))
}
After reading your note to me in Chris Cousins' answer, I did a little research and found that it isn't at all difficult to get the time tag to display in half-hour increments. Just use the step attribute, so:
<input type="time" step="1800">
The step amount has to be in seconds, so 1800 seconds for a half hour. Here's the doc on it, which may give you some other interesting ideas. Note that there are some caveats in the doc which suggest that there may be some issues using step in some browsers (seems to work fine in Chrome).
Change the option values to 24hr format
<option value="00:00">12:00 AM</option>
<option value="00:30">12:30 AM</option>
<option value="01:00">1:00 AM</option>
<option value="01:30">1:30 AM</option>
...
<option value="22:30">10:30 PM</option>
<option value="23:00">11:00 PM</option>
<option value="23:30">11:30 PM</option>
then update the change function
$(".start, .stop").on('change', function() {
//Look into $(this) to find the new TR group (row) with the class rowTR.
//This is dynamic and works for all ROWS modified
var start = $(this).parent().parent().find('.start').val().split(':');
var stop = $(this).parent().parent().find('.stop').val().split(':');
var hours1 = parseInt(start[0], 10) || 0;
var hours2 = parseInt(stop[0], 10) || 0;
var mins1 = parseInt(start[1], 10) || 0;
var mins2 = parseInt(stop[1], 10) || 0;
var startDate = new Date(0, 0, 0, hours1, mins1, 0);
var endDate = new Date(0, 0, 0, hours2, mins2, 0);
var diff = 0
if (startDate < endDate) {
diff = (endDate - startDate) / 36e5
}
//Apply changes dynamically, searching the main TR and looking into this to change the values of hours/dailyTotal inputs
$(this).parent().parent().find('.hours').val(diff);
$(this).parent().parent().find('.dailyTotalGeneric').val(diff);
//Calculate all the daily total by row.
calculateWeeklyTotal()
});
Change the top part of your function,so that it splits the values with a space and then identifies AM or PM. For PM it adds 12 hours into the hour.
var startParts = $(this).parent().parent().find('.start').val().split(' ');
var start = startParts[0];
var startType = startParts[1];
var stopParts = $(this).parent().parent().find('.stop').val().split(' ');
var stop = stopParts[0];
var stopType = stopParts[1];
var hours1 = parseInt(start[0], 10) || 0;
hours2 = parseInt(stop[0], 10) || 0;
mins1 = parseInt(start[1], 10) || 0;
mins2 = parseInt(stop[1], 10) || 0;
if (startType == 'PM') {
hours1+= 12;
}
if (stopType == 'PM') {
hours2+= 12;
}
How do i go about calculating the duration between two times in HHMM format by Javascript.
The input format will always be HHMM
The input time will always be for the same day.
Thank you for your inputs.
------------------- lame attemp --------------------
<html>
<div>
STA:<input type="text" id="STA" onClick="timed();"> ATA: <input type="text"
id="ATA"onClick="timed();">
DIFF: <input type="text" id="DIFF" onClick="timed();">
</div>
<div></div>
</html>
<script>
function timed(){
var x=0;
var y=0;
var o=0;
var l=0;
var a=0;
var b=0;
o=document.getElementById("STA").value;
l=document.getElementById("ATA").value;
a=o/100;
b=l/100;
x=a.split('.');
y=b.split('.');
document.getElementById("DIFF").value=x[0]-y[0]+":"+x[1]-y[1];
}
</script>
Have a look at this script:
It works using the input you say is provided the HHMM format.
function timed(){
var time1 = document.getElementById("STA").value;
var time2 = document.getElementById("ATA").value;
if ( time1.match(/^[0-9]{4}$/g) && time2.match(/^[0-9]{4}$/g) )
{
//lets calculate the difference. But values consist of four digits.
var time1Seconds = toSeconds(time1.substr(0,2), time1.substr(2));
var time2Seconds = toSeconds(time2.substr(0,2), time2.substr(2));
if (!time1Seconds || !time2Seconds)
{
//input is not correct.
return false;
}
var difference = time1Seconds - time2Seconds;
if (difference < 0)
{
difference = Math.abs(difference);
}
var hours = parseInt(difference/3600)
hours = hours < 10 ? "0" + hours : hours;
var minutes = parseInt((difference/3600) % 1 *60)
minutes = minutes < 10 ? "0" + minutes : minutes;
document.getElementById("DIFF").value = hours + ":" + minutes;
}
}
function toSeconds(hours, minutes)
{
var seconds = 0;
if ( (hours >= 0 && hours < 24) && (minutes >= 0 && minutes < 60))
{
seconds += (parseInt(hours)*3600) + (parseInt(minutes)*60);
return seconds
}
else
{
return false;
}
}
How it works.
It retrieves the values from the inputs. Then it checks if both inputs have numeric input that is exactly 4 digits long. If not this function doesn't return anything.
Second divide the string into two sections. Hours and minutes for both inputs. Convert them to seconds by using toSeconds. This functions checks if the hours and minutes are valid, if not this function returns false. When both converted times are not false the function continues. It subtracts the values from each other. If the value is lower than zero convert it to a positive. Then convert the seconds back to hours and minutes and display in the difference input. Enjoy.
I use the following javascript to show a countdown timer for shipping that day
var timerRunning = setInterval(
function countDown() {
var target = 14; // This is the cut-off point
var now = new Date();
//Put this in a variable for convenience
var weekday = now.getDay();
var despatchday = 'TODAY!';
if (weekday == 0) { //Sunday? Add 24hrs
target += 24;
despatchday = 'on Monday';
} //keep this before the saturday, trust me :>
if (weekday == 6) { //It's Saturday? Add 48hrs
target += 48;
despatchday = 'on Monday';
}
if ((weekday == 5) && (now.getHours() > target) && (now.getHours() <= 24)) {
target += 72;
despatchday = 'on Monday';
}
//If between Monday and Friday,
//check if we're past the target hours,
//and if we are, abort.
if ((weekday >= 1) && (weekday <= 5)) {
if ((now.getHours() > target) && (now.getHours() <= 24)) { //stop the clock
target += 24;
despatchday = 'tomorrow';
} else if (now.getHours() > target) { //stop the clock
return 0;
despatchday = 'today';
}
}
var hrs = (target) - now.getHours();
if (hrs < 0) hrs = 0;
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = 'Order in the next ' + hrs + 'hrs ' + mins + 'mins ' + secs + 'secs for despatch ' + despatchday;
document.getElementById('countdownTimer').innerHTML = str;
}, 1000
);
The problem I have is that if I set the cut off time to anything other than a full hour the timer does not work.
The correct output is Order in the next xx hrs, xx mins xx secs for despatch today
If I set
var target = 14; // This is the cut-off point
as 14:30 it gives "Just checking the time"
I assumed that it needed the mins as a decimal but if I set it as 14.5 it is adding 0.5 hrs to the output; ie 23.5hrs 50mins 30secs
I have set up a fiddle here. http://jsfiddle.net/4eu4o6k0/
Ideally I need it to be able to handle time in the format of hh:mm as that is the format of the time stored in the database. Is there a correct way to process partial hours in this type of script?
you need to hand the decimal place of hrs:
var rem =hrs%1;
mins = mins + (rem*60);
hrs = hrs - rem;
if (mins > 59) {
mins = mins - 60;
hrs= hrs +1;
}
Also I think you meant to spell dispatch
I'd personally advise against writing own code for handling time intervals because it's known to be error-prone. Use moment.js or date.js for such things
Here's sample for Moment.js
I have two sets of 'select' elements where the user can enter in two times. It looks like this:
Start:
[hour] [minute] [meridian]
End:
[hour] [minute] [meridian]
I'm trying to take those times and figure out the difference. So I can then output:
Difference: 1.25 HRS
The decimal format, as you probably know, means 1 hour and 15 minutes.
There's also a checkbox the user can click which, if selected, will take away 30 minutes. Here's what my current code looks like:
var startHours = parseInt($start.find('.times:eq(0)')[0].value);
var startMinutes = parseInt($start.find('.times:eq(1)')[0].value);
var startMeridian = $start.find('.times:eq(2)')[0].value
if (startMeridian == 'PM')
startHours += 12;
var finishHours = parseInt($finish.find('.times:eq(0)')[0].value);
var finishMinutes = parseInt($finish.find('.times:eq(1)')[0].value);
var finishMeridian = $finish.find('.times:eq(2)')[0].value
if (finishMeridian == 'PM')
finishHours += 12;
// compute the difference
var completeHours = finishHours - startHours;
var completeMinutes = finishMinutes - startMinutes;
var newTime = 0;
if (completeHours < 0 || completeMinutes < 0)
newTime = '0.0';
else
newTime = completeHours + '.' + completeMinutes;
var hadBreak = $parent.parents('tr').next('tr').find('.breakTaken')[0].checked;
if (hadBreak)
{
time = newTime.split('.');
hours = time[0];
minutes = time[1];
minutes = minutes - 30;
if (minutes < 0)
{
minutes = 60 - (minutes * 1);
hours = hours - 1;
}
newTime = (hours < 0) ? '0.0' : hours + '.' + minutes;
}
$parent.parents('tr').next('tr').find('.subtotal')[0].innerHTML = newTime;
total += parseFloat(newTime);
It's failing... What am I doing wrong?
To save you some hassle, I would recommend using the Date object, which is very convenient:
var startDate = new Date(year, month, date, hour, minute, second, millisecond);
var endDate = new Date(year, month, date, hour2, minute2, second2, millisecond2);
// You can skip hours, minutes, seconds and milliseconds if you so choose
var difference = endDate - startDate; // Difference in milliseconds
From there you can calculate the days, hours and minutes that passed between those two dates.
The line
newTime = (hours < 0) ? '0.0' : hours + '.' + minutes;
is wrong - minutes might be 15, but you want it to print out the fraction. Hence you need:
var MinutesDisplay = minutes/60*100;
newTime = (hours < 0) ? '0.0' : hours + '.' + (MinutesDisplay.toFixed(0));