I'm working on my project where I have three drop down boxes. User can pick Start time, Meeting Length and End time. My function works fine but I'm missing one more thing, so If user select all of three drop downs they will get all end times in last drop down but now I want if they change meeting length or start time, my end time drop box should give them values with the valid records. Current code works fine if they select everything once but if they change start time or meeting length my end time is still the same.
Here is my jsfiddle with the working example:
https://jsfiddle.net/dmilos89/vy0yy7h9/4/
I tried to reset my function with something like this:
$('#meet_leng').on('chnage');
inside of my existing function but that did not help. If anyone knows how I can refresh my function each time after I change values in my start time and meeting length drop downs please let me know.
$(function() {
//This loop populate values fro meeting length dropdown
for (var i = 5; i <= 60; i += 5) {
$('#meet_leng').append('<option value="' + i + '">' + i + ' min' + '</option>')
}
//Populate start time dropdown with values
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 AmPm = " AM";
//set hours 12 to PM
if (hours == 12) {
AmPm = " PM";
}
//format all hours greater than to PM
if (hours > 12) {
hours = hours - 12;
AmPm = " PM";
}
//populate stime with values
$('#stime').append('<option value="' + ('0' + (hours)).slice(-2) + ':' + ('0' + mins).slice(-2) + AmPm + '">' + ('0' + (hours)).slice(-2) + ':' + ('0' + mins).slice(-2) + AmPm + ' </option>')
}
//onChange function set end time based on start time and meeting length
$('#meet_leng').on('change', function() {
if ($('#stime').val() == '0') {
alert('You have to pick start time first.')
} else {
if ($('#meet_leng').val() == '0') {
$('#hideSlots').hide();
} else {
//convert variables for start and end time to new Date
var time1 = new Date();
var time2 = new Date();
//meeting length converts to int
var meetingLength = parseInt($('#meet_leng').val());
//start time split into hours and minutes
var startTime = $('#stime').val();
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
//end time split into hours and minutes
var endTime = '05:00 PM';
var endHour = endTime.split(':')[0];
var endMin = endTime.split(':')[1].replace(/AM|PM/gi, '');
//Check if start time is PM and adjust hours to military
if (startTime.indexOf('PM') > -1) {
if (startHour != 12) {
startHour = parseInt(startHour) + 12;
} else {
startHour = parseInt(startHour);
}
}
//Check if end time is PM and adjust hours to military
if (endTime.indexOf('PM') > -1) {
endHour = parseInt(endHour) + 12;
}
//Date API start time set hours and minutes
time1.setHours(parseInt(startHour));
time1.setMinutes(parseInt(startMin));
//Date API end time set hours and minutes
time2.setHours(parseInt(endHour));
time2.setMinutes(parseInt(endMin));
//Adding meeting length to start time
time1.setMinutes(time1.getMinutes() + meetingLength);
//while loop checks for time values and increment end time for meeting interval
while (time1 <= time2) {
var amPm = " AM";
var hourEnd = time1.getHours();
var minEnd = time1.getMinutes();
if (hourEnd >= 12) {
hourEnd = (hourEnd == 12) ? hourEnd : hourEnd - 12;
amPm = " PM";
}
if (hourEnd == 24) {
hourEnd = 12;
}
minEnd = ('' + minEnd).length > 1 ? minEnd : '0' + minEnd;
$('#etime').append('<option value="' + hourEnd + ':' + minEnd + ' ' + amPm + '">' + hourEnd + ':' + minEnd + ' ' + amPm + '</option>');
time1.setMinutes(time1.getMinutes() + meetingLength);
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<th>Start Time:</th>
<td>
<select name="stime" id="stime">
<option value="0">--Select start time--</option>
</select>
</td>
</tr>
<br/>
<tr>
<th>Metting Length:</th>
<td>
<select name="meet_leng" id="meet_leng">
<option value="0">--Select length--</option>
</select>
</td>
</tr>
<br/>
<tr>
<th>End Time:</th>
<td>
<select name="etime" id="etime" />
<option value="0">--Select end time--</option>
</select>
</td>
</tr>
You want to either set the value:
$('#etime').val("new value");
or select the index:
$('#etime').get(0).selectedIndex = 1;
remember that indexes start at 0.
you would do this after the while loop that populates all the end time options.
Please try below code
$('#meet_leng').on('chnage',function(){
$('#etime').val("FirstIndexValue")
});
//FirstIndexValue= #etime default value
Related
The problem is that when I'm taking the current time using localdate(this is my start time) variable and I'm also taking end time so I print the time between this values with 15 min of increasing time.
Example: current time is 13:04 so the further time slots will be 13:19, 13:34 and so on till end time.
function ShowLocalDate() {
var time1 = new Date();
var time2 = new Date();
var dNow = new Date();
var localdate = dNow.getHours() + ':' + dNow.getMinutes();
//meeting length
var meetingLength = parseInt('15');
//start time
var startTime = localdate
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
//end time
var endTime = '11:00 PM';
var endHour = endTime.split(':')[0];
var endMin = endTime.split(':')[1].replace(/AM|PM/gi, '');
//Check if start time is PM and adjust hours to military
if (startTime.indexOf('PM') > -1) {
if (startHour != 12) {
startHour = parseInt(startHour) + 12;
} else {
startHour = parseInt(startHour);
}
console.log(startHour);
}
//Check if end time is PM and adjust hours to military
if (endTime.indexOf('PM') > -1) {
endHour = parseInt(endHour) + 12;
console.log(endHour);
}
//Date API start time
time1.setHours(parseInt(startHour));
time1.setMinutes(parseInt(startMin));
//Date API end time
time2.setHours(parseInt(endHour));
time2.setMinutes(parseInt(endMin));
//Adding meeting length to start time, this value will be use for end time
time1.setMinutes(time1.getMinutes() + meetingLength);
while (time1 < time2) {
$('#etime').append('<option value="' + time1 + '">' + time1 + '</option>');
time1.setMinutes(time1.getMinutes() + meetingLength);
}
}
ShowLocalDate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="etime" id="etime">
<option value="">--Select end time--</option>
</select>
</td>
</tr>
</tr>
JSFiddle: https://jsfiddle.net/6n458ze9/18/
But I want that, suppose the start time means current time is 13:04 so the next time will be 13:20 not 13:19 and one more time is 13:35 not 13:34, till ending time.
End time will be 11:00 PM(this is fixed).
Thank you in advance.
If you want to round up time to 05, 10, 15 etc minutes you can easily add few more minutes to original time until you get minutes mod by 5 equals zero, something like this
//Adding meeting length to start time, this value will be use for end time
var endTime = time2.getMinutes() + meetingLength;
while (endTime % 5 != 0)
endTime++
time1.setMinutes(endTime);
You can just round off the start time in your code.
in below solution i am doing the same.
hope this helps
function getRoundOffDate() {
var now = new Date();
var minutes = now.getMinutes();
minutes += 5 - minutes % 5;
if (minutes == 60) {
now.setHours(now.getHours() + 1);
now.setMinutes(0);
} else {
now.setMinutes(minutes);
}
return now;
}
function ShowLocalDate() {
var time1 = new Date();
var time2 = new Date();
var dNow = getRoundOffDate();
var localdate = dNow.getHours() + ':' + dNow.getMinutes();
//meeting length
var meetingLength = parseInt('15');
//start time
var startTime = localdate
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
//end time
var endTime = '11:00 PM';
var endHour = endTime.split(':')[0];
var endMin = endTime.split(':')[1].replace(/AM|PM/gi, '');
//Check if start time is PM and adjust hours to military
if (startTime.indexOf('PM') > -1) {
if (startHour != 12) {
startHour = parseInt(startHour) + 12;
} else {
startHour = parseInt(startHour);
}
console.log(startHour);
}
//Check if end time is PM and adjust hours to military
if (endTime.indexOf('PM') > -1) {
endHour = parseInt(endHour) + 12;
console.log(endHour);
}
//Date API start time
time1.setHours(parseInt(startHour));
time1.setMinutes(parseInt(startMin));
//Date API end time
time2.setHours(parseInt(endHour));
time2.setMinutes(parseInt(endMin));
//Adding meeting length to start time, this value will be use for end time
time1.setMinutes(time1.getMinutes() + meetingLength);
while (time1 < time2) {
$('#etime').append('<option value="' + time1 + '">' + time1 + '</option>');
time1.setMinutes(time1.getMinutes() + meetingLength);
}
}
ShowLocalDate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="etime" id="etime">
<option value="">--Select end time--</option>
</select>
</td>
</tr>
</tr>
If end time is fixed to 11:00PM, then you can start from backwards
function ShowLocalDate() {
var time1 = new Date();
var time2 = new Date();
var dNow = new Date();
var localdate = dNow.getHours() + ':' + dNow.getMinutes();
//meeting length
var meetingLength = parseInt('15');
//start time
var startTime = localdate
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
//end time
var endTime = '11:00 PM';
var endHour = endTime.split(':')[0];
var endMin = endTime.split(':')[1].replace(/AM|PM/gi, '');
//Check if start time is PM and adjust hours to military
if (startTime.indexOf('PM') > -1) {
if (startHour != 12) {
startHour = parseInt(startHour) + 12;
} else {
startHour = parseInt(startHour);
}
console.log(startHour);
}
//Check if end time is PM and adjust hours to military
if (endTime.indexOf('PM') > -1) {
endHour = parseInt(endHour) + 12;
console.log(endHour);
}
//Date API start time
time1.setHours(parseInt(startHour));
time1.setMinutes(parseInt(startMin));
//Date API end time
time2.setHours(parseInt(endHour));
time2.setMinutes(parseInt(endMin));
time2.setSeconds(0);
//Adding meeting length to start time, this value will be use for end time
time1.setMinutes(time1.getMinutes() + meetingLength);
while (time1 < time2) {
$('#etime option:first').after('<option value="' + ('00' + time2.getHours()).slice(-2) + ':' + ('00' + time2.getMinutes()).slice(-2) + '">' + ('00' + time2.getHours()).slice(-2) + ':' + ('00' + time2.getMinutes()).slice(-2) + '</option>');
time2.setMinutes(time2.getMinutes() - meetingLength);
}
$('#etime option:first').after('<option value="' + ('00' + time1.getHours()).slice(-2) + ':' + ('00' + time1.getMinutes()).slice(-2) + '">' + ('00' + time1.getHours()).slice(-2) + ':' + ('00' + time1.getMinutes()).slice(-2) + '</option>');
}
ShowLocalDate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="etime" id="etime">
<option value="">--Select end time--</option>
</select>
</td>
</tr>
</tr>
var dateObj = new Date();
var month = dateObj.getUTCMonth() +1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var nowhour = dateObj.getHours();
var nowday = dateObj.getUTCDate();
var hour = "03";
var min = "00";
var hour2 = "18";
var min2 = "00";
var hour3 = "21";
var min3 = "00";
if(hour == 03)
{
day++;
}
document.write(nowhour);
newdate = year + "/" + month + "/" + day;
hourdate = " " + hour + ":" + min;
hourdate2 = " " + hour2 + ":" + min3;
hourdate3 = " " + hour2 + ":" + min3;
$("#bifrost")
if(nowhour > hour && day > nowday)
{
.countdown(newdate + hourdate, function (event) {$(this).text(event.strftime('%H:%M:%S'));});
}else if(nowhour > hour2)
{
.countdown(newdate + hourdate2, function (event) {$(this).text(event.strftime('%H:%M:%S'));});
}else{
.countdown(newdate + hourdate3, function (event) {$(this).text(event.strftime('%H:%M:%S'));});
}
Hello, i wanna make a countdown timer for events. I have 3 different event time,i wanna show up coming event here is my javascript code.
can anyone help me ?
ps: sorry for my bad english.
If countdown is a global function, you do not need the period before the call, just
countdown(parameters ... );
If countdown is a jquery plugin you have, and you are trying to call it on the jQuery object you created before the if statements, you must do it like this
$("#bifrost").countdown(parameters ... );
And repeat the jQuery selector in each of your if statements.
There is built in function setTimeout(function,milliseconds,param1,param2,...). Please see for examples in here.
setTimeout(function_to_do, miliseconds to wait) - will be triggered once;
setInterval(function_to_do, miliseconds to wait) - will be triggered periodically.
By the way - function name can't start with dot - and you have three calls to something .countdown(... There is you error.
I am trying to have a div show the current time but it always shows it in military time, so I went to use an if / else statement to help but it doesn't seem to work.
Javascript
var time = new Date(Date.now());
var timeHour = time.getHours();
var timeHourFix = timeHour;
var timeMinute = time.getMinutes();
var formatted = timeHourFix + ":" + timeMinute;
if(time.getHours() > 12) {
timeHourFix = time.getHours() - 12 + "PM";
}else {
timeHourFix = time.getHours() + "AM";
};
$( document ).ready(function() {
$('#hourmin').text(formatted)
});
it should display the time like 5:35 PM but it still shows 17:35
That's because your are declaring the variable formatted before the timeHourFix is actually modified. Try the code below.
var time = new Date(Date.now());
var hour = time.getHours();
var t_hour = hour > 12 ? (hour - 12) : ((hour == 0) ? hour + 12 : hour);
var formatted = t_hour + " : " + time.getMinutes() + (hour > 11 ? " PM" : " AM");
$( document ).ready(function() {
$('#hourmin').text(formatted)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id=hourmin>
The time is not being formatted because the variable formatted is being set before timeHourFix or timeHour is being set. I think it's easiest to set formatted in the if else statement directly:
var time = new Date(Date.now());
var timeHour = time.getHours();
var timeMinute = time.getMinutes();
var formatted;
if(time.getHours() > 12) {
formatted = time.getHours() - 12 + ":" + timeMinute + " PM";
} else {
formatted = time.getHours() + ":" + timeMinute + " AM";
};
$( document ).ready(function() {
$('#hourmin').text(formatted)
});
In your case the problem was you were modifying the variable timeHourFix after it was appended to the string, there is no live linking between the string and the timeHourFix variable so any changes you make to the variable after the string concatenation will not be reflected in the original value.
Also there are multiple other issues like the AM/PM should be at the end of the string so that also have to be changed. Also there are other issues with timeHourFix like how the value 0030 will be handled, it should be shown as 12:30 AM not 00:30 AM
var time = new Date(Date.now());
var timeHour = time.getHours();
//set the hour part
var timeHourFix = timeHour > 12 ? timeHour - 12 : timeHour == 0 ? 12 : timeHour;
var timeMinute = time.getMinutes();
var formatted = timeHourFix + ":" + timeMinute;
//set the AM/PM at the end of the string
formatted += timeHour >= 12 ? ' PM' : ' AM';
$(document).ready(function() {
$('#hourmin').text(formatted)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hourmin"></div>
Because you set formatted before setting the right values to timeHourFix. Move the assignment of formatted to below the else block.
You could always do something like this if you want to simplify your code.
var time = new Date(Date.now());
var timeHour = time.getHours();
var timeHourFix = timeHour;
var timeMinute = time.getMinutes();
$(document).ready(function() {
var timeofday = "";
if(timeHour > 12) {
timeHourFix = timeHour - 12;
timeofday = "PM";
}else {
timeHourFix = timeHour;
timeofday = "AM";
};
var formatted = timeHourFix + ":" + timeMinute + " " + timeofday;
$('#hourmin').text(formatted)
});
This is perfectly working full code.
var time = new Date(Date.now());
var timeHour = time.getHours();
var timeHourFix = timeHour;
var timeMinute = time.getMinutes();
var formatted = timeHourFix + ":" + timeMinute;
if(time.getHours() > 12) {
time = time.getHours() - 12 + " : " + timeMinute + " PM";
}
else {
time = time.getHours() +" : " + timeMinute + " AM";
};
$( document ).ready(function() {
$('#hourmin').text(time)
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<p id="hourmin">Time Display</p>
</body>
</html>
need to create a log of messages where the message be saved along with the time.
I have this code, but the acresentar a new message is deleted the old and replaced by the new.
var textons = prompt("Digite sua mensagem para a ONS", "");
var areaons = prompt("Digite a area onde o problema ocorreu", "");
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var mes = date.getMonth() + 1;
var month = (mes < 10) ? '0' + mes : mes;
var yy = date.getYear();
var year = (yy > 100) ? yy - 100 : yy;
var hours = date.getHours();
var min = date.getMinutes();
var minutes = (min < 10) ? '0' + min : min;
var sec = date.getSeconds();
var seconds = (sec < 10) ? '0' + sec : sec;
if (areaons != null && textons != null) {
document.getElementById("logdescricao").innerHTML =
"ONS: " + textons;
document.getElementById("logarea").innerHTML =
areaons;
document.getElementById("loghoracos").innerHTML =
day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;
document.getElementById("loghoralocal").innerHTML =
day + "/" + month + "/" + year + " " + hours + ":" + minutes + ":" + seconds;
}
}
I thought about using the .append (function) but did not succeed.
how can I make the text stop being rewritten and pass to get saved?
thank
If I've understood you correctly, you just want it to add to each section in stead of overwriting?
Then all you have to do is "+=" instead of "="
document.getElementById("logdescricao").innerHTML += "ONS: " + textons
However, this is probably not the best way of doing this.
You could try:
var logdescricaoText = document.createTextNode("ONS: "+textons);
document.getElementById("logdescricao").appendChild(logdescricaoText);
But, really, if you want to make a list of things, then you should be using a table. This will allow for much neater and structured styling.
In your HTML:
<table>
<thead>
<tr>
<td>Descricao</td>
<td>LogMessage</td>
<!-- other field headers like 'time' -->
</tr>
</thead>
<tbody id=logs>
</tbody>
</table>
Then you can use the javascript (inside your 'if' block, instead of all your ".innerHTML =" stuff)
var logLine = document.createElement("tr");
document.getElementById("logs").appendChild(logLine);
var descricao = document.createElement("td");
descricao.appendChild(document.createTextNode("ONS: "+textons));
logLine.appendChild(descricao);
var logArea = document.createElement("td");
logArea.appendChild(document.createTextNode(areaons);
logLine.appendChild(logArea);
etc..
Additionally, you might want to apply a CSS styling to the 'thead' part of the HTML
eg. in your CSS file:
thead {
font-weight: bold;
}
i'm trying to use the gethours() method in javascript but it keeps returning military time. can someone please help me out fixing it so that it displays clock time? (1-12). Thank you so much!
// Reroute from the conf.js script
var chat = $( '.chat-output' ),
message = function ( message, userId ) {
var dt = new Date(),
time = dt.getHours() + ":" + dt.getMinutes(); // + ":" + dt.getSeconds();
return $( '<div class="chat-message color-' + users[userId] + '">' +
'<div class="chat-id color-' + users[userId] + '"></div>' +
'<div class="chat-user-message">' + message + '</div>' +
'<div class="chat-time">' + time + '</div>' +
'</div>' );
},
addText = function ( text ) {
// log.innerHTML += text;
// log.scrollTop = log.scrollHeight;
console.log( text );
},
addRemoteText = function ( userId, text ) {
// addText( '[' + userId + ']: ' + text+'<br>' );
chat.append( message( text, userId ) );
chat.scrollTop( chat.get( 0 ).scrollHeight );
};
function ampm(date){
var dt= date || new Date,
h= dt.getHours(),
m= dt.getMinutes(),
s= dt.getSeconds(),
ampm;
if(h>12){
h-= 12;
ampm= (h%12)? ' PM': ' AM';
}
else ampm= (h%12)? ' AM': ' PM';
m= m<10? '0'+m: m;
s= s<10? '0'+s: s;
return [h, m, s].join(':')+ampm;
}
ampm()
/* returned value: (String)
11:52:55 PM
*/
Something like this?
var dt = new Date();
var hours = dt.getHours();
var ampm = hours > 11 ? 'PM' : 'AM';
if (hours > 12) {
hours -= 12;
} else if (hours === 0) {
hours = 12;
}
var time = hours + ":" + dt.getMinutes() + ' ' + ampm;
Fiddle
Here's another version of formatting a time in 12 hour format:
// Returns formatted time for given Date object, or
// current system time if d is falsey.
function getTime(d) {
d = d || new Date();
var hrs = d.getHours();
var pad = function(n){return (n<10?'0':'')+ +n};
return pad(hrs%12 || 12) + ':' + pad(d.getMinutes()) + ' ' + (hrs<12? 'AM':'PM');
}
console.log(getTime(new Date(2014,2,24, 0, 5))); // 12:05 AM
console.log(getTime(new Date(2014,2,24,10,25))); // 10:25 AM
console.log(getTime(new Date(2014,2,24,20,15))); // 08:15 PM
Note that 24hr time is preferred in many cases to avoid anomalies like 12:00 AM (which is really neither AM or PM) and 12:00 AM being before 01:00 AM.