What I am currently doing is setting up a calendar feature, but when the user selects the date, and then the TIME the event starts (ie startTime = 00:10:00am), that it will then pre-populate the second field (ie: endTime = 00:10:30am).
So I thought maybe the best route would be when you select your time, jQuery would just select the NEXT statement and pick up the 15 minute interval or something of this nature.
I have this code that works to select the exact same time, but that doesn't work well for scheduling obviously, if you select 10am, you don't want your end time to be 10am, you want it to be 10:30am
This is what I have so far, but like I say this just currently selects the same time.
$('.startTime').change(function() {
var startTime = $(this).val();
$('.endTime').val(function() {
return startTime;
});
});
Any guidance would be appreciated.
You'd need to convert startTime into a proper js Date object, then do something like this. If you're using a JS framework, there might already be some utils in place to do this.
This is what works, I don't know if it is efficient or not, but I got this to work. If there is a better answer, I'm all ears.
$('.startTime').change(function() {
var startTime = $(this).val();
var hours = startTime.split(":")[0]; // Hours
var minutes = startTime.split(":")[1]; // Minutes
var seconds = startTime.split(":")[2]; // Seconds
// new Date(year, month, day, hours, minutes, seconds, milliseconds)
var newTime = new Date('0', '0', '0', hours, minutes, seconds, '0');
//alert(newTime.getMinutes());
if(newTime.getMinutes() == '15' || newTime.getMinutes() == '00') {
finalTime = newTime.setMinutes(newTime.getMinutes() + 15);
} else if (newTime.getMinutes() == '30') {
finalTime = newTime.setMinutes(newTime.getMinutes() + 15);
} else if (newTime.getMinutes() == '45') {
finalTime = newTime.setHours(newTime.getHours() + 1, 0);
}
if(newTime.getHours() < 10) {
newHours = '0'+ newTime.getHours();
} else {
newHours = newTime.getHours();
}
if(newTime.getMinutes() < 10) {
newMinutes = '0'+ newTime.getMinutes();
} else {
newMinutes = newTime.getMinutes();
}
if(newTime.getSeconds() < 10) {
newSeconds = '0'+ newTime.getSeconds();
} else {
newSeconds = newTime.getSeconds();
}
var adjustTime = newHours +":"+ newMinutes +":"+ newSeconds;
$('.endTime').val(function() {
return adjustTime;
});
});
Related
I have two nav-pills that I need to hide until a certain time of the day and then hide again at a later time of the same day. However there is a third nav-pill which shouldn´t be affected by this and visible at all times.
function showNavPill() {
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
if (date > 15.30 && date < 17.15) {
nav-pill.show = true;
} else {
nav-pill.show = false;
}
}
showNavPill();
I´m quite new to this so not sure if this makes any sense?
In your example you compare a undefined variable date with two float values 15.30 and 17.15. So let us define date and we will have a chance to get it working.
I simply added const date = hours + (minutes / 100); to convert hours and minutes into a float value that may match your conditions.
function showNavPill() {
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
const date = hours + (minutes / 100);
if (date > 15.30 && date < 17.15) {
nav-pill.show = true;
} else {
nav-pill.show = false;
}
}
showNavPill();
As a result nav-pill.show will be true between 15:31:00 and 17:14:59 (local time!) of your visitor.
But please make yourself aware that nav-pill is not a valid name for a variable in javascript!
I have been trying to get my page to refresh at midnight, but the code I wrote is not working.
This is the code that I have written:
function reloadClock() {
var reloadTime = new Date();
var hrs = reloadTime.getHours();
var min = reloadTime.getMinutes();
var sec = reloadTime.getSeconds();
// I tried this code, it will not work.
if (hrs == 0 && min == 0 && sec == 0) {
alert('this page will now reload');
location.reload();
}
// I also tried this code, still can't get it to work.
if (hrs == 14) { // Works as intended.
alert(hrs);
if (min == 31) { // Works as intended.
alert(min);
if (sec == 0) { // Does not work as intended.
alert(sec);
location.reload();
}
}
}
setTimeout(reloadClock(), 1000);
}
Does anyone know a solution for this?
check this
const timerefresh = setInterval(function(){
const time_ = new Date().toLocaleString('en-GB'); // return 24 hour time format in string, explaination about en-GB you can search on wikipedia, thats bored (:
let date = time_.split(', ')[0].split('/'); // split the time strings to get date in array [day, month, year]
let clock = time_.split(', ')[1].split(':'); // split the time strings to get clock in array [hour, min, sec]
countDownTime(Number(clock[0]),Number(clock[1]),Number(clock[2]));
document.getElementById('time1').innerHTML = 'date:'+date+', clock:'+clock;
},1000);
function countDownTime(h,m,s){
// some match to reverse the clock
document.getElementById('time2').innerHTML = 'countdown to midnight : '+ (23-h)+':'+(59-m)+':'+(60-s);
if(h === 23 && m === 59 && s === 59){ itsMidnight(); } // call its midnight 1 sec before clock 00:00:00
}
function itsMidnight(){
// its midnight, your function here
console.log('midnight! reload.')
window.location.reload();
}
// code below just for testing, you can delete it
let sectomidnight = 50;
function gotoMidnight(){
clearInterval(timerefresh);
setInterval(function(){
sectomidnight += 1;
countDownTime(23,59,sectomidnight);
},1000);
}
<div id="time1"></div>
<div id="time2"></div>
<button onclick="gotoMidnight();">goto 10 sec before midnight</button>
I want to preface this by saying I have very little knowledge of JS as you'll probably be able to tell, I also wasn't sure what to title this.
Anyway, I'm trying to make a simple script where it counts up to 30 minutes and then at 30 minutes returns a message by using a while loop. However, I want the condition where heliTime =! endTime to only run every minute. I can get the script to run every minute however in runs the entire function each minute instead of just one check.
setInterval(function arran() {
var startTime = 0;
var minutes = 1000 * 60;
//var seconds = 1000;
var heliTime = startTime
var endTime = 30 * minutes;
var messageCount = 0;
while (heliTime !== endTime) {
var messageCount = messageCount + 1;
console.log("No heli yet! " + messageCount);
var heliTime = heliTime + minutes;
}
return console.log("Heli should be arriving soon!");
},60 * 1000);
The messageCount variable is just debug so that can be ignored, any help with my problem would be greatly appreciated. :)
I would say that measuring real time by the frequence of callbacks by setInterval as Tobbe Widner suggest seems to me as a strange idea. I think it is better to use some explicit time source such as
function runDelayedWithProgress(waitIntervalSeconds, delayedAction, progressIntervalSeconds, progressAction) {
var startTime = new Date().getTime();
var iid = setInterval(function() {
var curTime = new Date().getTime()
var elapsedSeconds = (curTime - startTime)/1000;
if(elapsedSeconds >= waitIntervalSeconds) {
clearInterval(iid);
delayedAction();
}
else {
progressAction(Math.round(elapsedSeconds));
}
}, progressIntervalSeconds*1000);
}
runDelayedWithProgress(30*60, function() {
console.log("Heli should be arriving soon!")
},
60, function(elapsed){
console.log("No heli yet! " + elapsed);
});
I have built a page that store a message and a user to send the message to in a db. The form has a restriction: you can't use the same user for the next 30 seconds from when you have posted the message to the db.
function undisable (id,time){
setTimeout(function() {
$('#'+id).prop('disabled', false);
}, (30000-time));
}
$('#destinatario option').each(function(){
var ds = $(this).attr('data-ts');
var dateArray = ds.split(" "); // split the date and time
var ds1 = dateArray[0].split("-"); // split each parts in date
var ds2 = dateArray[1].split(":"); // split each parts in time
var newDate = new Date(ds1[0], (+ds1[1] - 1), ds1[2], ds2[0], ds2[1], ds2[2]).getTime(); //parse it
var currentDate = new Date().getTime();
var diff = currentDate - newDate;
if(diff < 30000){
$(this).prop('disabled', true);
var id = $(this).attr('id');
undisable(id,diff);
}
});
Now I'd like to add a new condition: you cannot post to any user from the last minute of an hour to the first minute of the next one. So for example you cannot post from 10:59:00 to 11:01:00 (and so on for each hour of the day).
What is the cleverest way to set the if clause to do this?
What I am trying to build is something like:
if(now(minutes) is between 59 and 01){ //this is the point where I get stuck at
$('#sendbutton').prop('disabled', true); //I cannot post
}else{
$('#sendbutton').prop('disabled', false); //I can post
}
Thanks for any help!
You're right, that complicates things. Here's the code to solve your problem. Relies on setTimeouts to disable and enable the button, and you can edit the times you want to disable the button easily.
function time_disabler()
{
var time_disable = 59; // time in minutes to disable the button
var time_enable = 1; // time in minutes to enable to button
var current_mins = new Date().getMinutes(); // current time (minutes)
var current_secs = new Date().getSeconds(); // current time (seconds)
var total_seconds = current_mins * 60 + current_secs; // current time overall in seconds
var last_min_secs = time_disable*60; // time in seconds to disable the button
var first_min_secs = time_enable * 60; // time in seconds to enable the button
// if in between the two times, disable button
if((total_seconds >= last_min_secs && total_seconds < first_min_secs) || (total_seconds < first_min_secs && first_min_secs < last_min_secs))
{
$('#sendbutton').prop('disabled', true); //I cannot post
var time = (total_seconds >= first_min_secs)? first_min_secs + (60*60) - total_seconds : first_min_secs - total_seconds ;
// set time out to recall this function, which will enable it
var t = setTimeout(function (){
time_disabler();
}, time * 1000 );
} else { // if not between the times, disable it
$('#sendbutton').prop('disabled', false); //I can post
// set time out to recall this function, which will disable it
var t = setTimeout(function(){time_disabler();}, ((last_min_secs> total_seconds ? last_min_secs : last_min_secs + 60*60) - total_seconds) * 1000 );
}
}
time_disabler();
-- Old Answer --
You would just use JavaScript's getMinutes() and getSeconds():
var current_mins = new Date().getMinutes();
var current_secs = new Date().getSeconds();
current_mins += current_secs/60;
if(current_mins >= 59 || current_mins <= 1)
{
$('#sendbutton').prop('disabled', true); //I cannot post
} else {
$('#sendbutton').prop('disabled', false); //I can post
}
I want to validate start time and end time selected using timepicker which is in 12 hr format. The end time should be greater than the start time. I used an if statement but when the test is using values such as 8:00 AM as start time and 1:00 PM as end time, it is not working. What can I do to solve this problem. Someone please help me with this. I am stuck with this since yesterday. I want just time ,i don't need date.
$("#dateTimeAddButton").click(function ()
{
var Date=$('#myDatePickerId').val()
var startTime = $('#i').val();
var endTime = $('#i1').val();
if (startTime > endTime)
{
alert('End time always greater then start time.');
}
});
First convert to lowest denominational (minute here). Then compare it.
st = minFromMidnight(startTime);
et = minFromMidnight(endTime);
if(st>et){
alert("End time must be greater than start time");
}
function minFromMidnight(tm){
var ampm= tm.substr(-2)
var clk = tm.substr(0, 5);
var m = parseInt(clk.match(/\d+$/)[0], 10);
var h = parseInt(clk.match(/^\d+/)[0], 10);
h += (ampm.match(/pm/i))? 12: 0;
return h*60+m;
}
please try that below code in case you have length of time more than 6 char like 10:00am instead of 9:00am will throw error above code.
I did minor changes in above code and it worked like charm for me.
$('#btnSubmit').on('click', function () {
var startTime = $('#txtJobStartTime').val();
var endTime = $('#txtJobEndTime').val();
var st = minFromMidnight(startTime);
var et = minFromMidnight(endTime);
if (st > et) {
alert('End time always greater then start time.');
return false;
}
function minFromMidnight(tm) {
var ampm = tm.substr(-2);
var clk;
if (tm.length <= 6) {
clk = tm.substr(0, 4);
} else {
clk = tm.substr(0, 5);
}
var m = parseInt(clk.match(/\d+$/)[0], 10);
var h = parseInt(clk.match(/^\d+/)[0], 10);
h += (ampm.match(/pm/i)) ? 12 : 0;
return h * 60 + m;
}
});