select all checkboxes at a particular time in html or js - javascript

I am in need of having a3 checkboxes that should have a tick mark from 2 pm till 11 pm IST in javascript or HTML. This is what I tried
<html>
<body>
<center>
<span style="margin-left:50px; margin-top:0px;">
<p align="left"><font color="white"> <b> India Time: 2pm to 11pm IST </b>
</br>
<input type="checkbox" id="user1" name="user1" value="user1" > User1<br>
<input type="checkbox" id="user2" name="user2" value="user2" > User2<br>
<input type="checkbox" id="user3" name="user3" value="user3" > User3<br>
</p>
<img border="1" src="https://i.postimg.cc/VkPzvHCJ/gh.png" style=" margin-top:-129px;" >
</span>
<h3 style= "font-family: "Gotham A","Gotham B",sans-serif;>
<br> <p align="center" style=" margin-top:-30px;"> <font color="#339933"> <b>RStudio Dashboard
</h3></P>
</body>
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
var today = dd+'/'+mm+'/'+yyyy;
var holidays = [];
holidays = ["01/01/2019" , "26/01/2019" , "20/02/2019" , "01/05/2019" , "27/05/2019" , "04/06/2019", "04/07/2019" , "15/08/2019" , "02/09/2019" , "10/09/2019" , "02/10/2019" , "28/11/2019" , "25/12/2019"];
//var n = str.indexOf("welcome");
if {
var startTime = '2:00 PM';
var endTime = '11:00 PM';
var curr_time = getval();
//var curr_time = '12:39 AM';
//alert(curr_time);
if (get24Hr(curr_time) > get24Hr(startTime) && get24Hr(curr_time) < get24Hr(endTime)) {
//in between these two times
//alert("Yes")
document.getElementById("sid").checked = true;
document.getElementById("anil").checked = true;
document.getElementById("vin").checked = true;
} else {
//document.getElementById("user1").checked = true;
//document.getElementById("user2").checked = true;
}
function get24Hr(time){
var hours = Number(time.match(/^(\d+)/)[1]);
var AMPM = time.match(/\s(.*)$/)[1];
if(AMPM == "PM" && hours<12) hours = hours+12;
if(AMPM == "AM" && hours==12) hours = hours-12;
var minutes = Number(time.match(/:(\d+)/)[1]);
hours = hours*100+minutes;
console.log(time +" - "+hours);
return hours;
}
function getval() {
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10) minutes = "0" + minutes;
var suffix = "AM";
if (hours >= 12) {
suffix = "PM";
hours = hours - 12;
}
if (hours == 0) {
hours = 12;
}
var current_time = hours + ":" + minutes + " " + suffix;
return current_time;
}
}
else
{
print ("hello")
}
</script>
</html>
This is what I tried. The code is working, but it seems a bit complicated. Is there any simple method?
The only requirement is to tick the checkboxes from 2 pm to 11 pm IST

Add this js function. And then add "onClick" on every Input. Also the name must be the same.
<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('user');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" onClick="toggle(this)" id="user1" name="user" value="user1" > User1<br>
<input type="checkbox" onClick="toggle(this)" id="user2" name="user" value="user2" > User2<br>
<input type="checkbox" onClick="toggle(this)" id="user3" name="user" value="user3" > User3<br>

Related

Time difference calculating program being slightly off

I'm fairly new to JS and making a program that's supposed to count the number of days in between the given date and current date. Then it's supposed to calculate the number of years, months and remaining days between them from the calculated days. It's off by a couple of days for bigger dates. Any help would be greatly appreciated.
I've been trying it on dates such as 23.01.2076 and 23.01.1940 and changing the year and month one up or one down. For most of them it's off by 1-3 days.
HTML:
<html>
<head>
<meta charset="utf-8">
<script src="main.js"></script>
</head>
<body>
<div>
<input type="number" id="day" autocomplete="off">
<select id="month">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<input type="number" id="year" autocomplete="off">
</div>
<input type="button" id="date-button" value="Count">
<div id="result" >
</div>
</body>
</html>
Javascript:
let gram_start, difference;
const one_day = 24*60*60*1000;
let months_list = {
"January": [1,31],
"February": [2,28],
"March": [3,31],
"April": [4,30],
"May": [5,31],
"June": [6,30],
"July": [7,31],
"August": [8,31],
"September": [9,30],
"October": [10,31],
"November": [11,30],
"December": [12,31]
};
let month_index = Object.keys(months_list);
function leapyear(year) {
return (year % 100 === 0 ? year % 400 === 0 : year % 4 === 0);
}
window.onload = function count() {
document.getElementById("date-button").addEventListener("click", () => {
let years_write = 0;
let months_write = 0;
let day = parseInt(document.getElementById("day").value);
let month = document.getElementById("month").value;
let year = parseInt(document.getElementById("year").value);
let month_obj = months_list[month];
let target_date = new Date(year, month_obj[0]-1, day);
let today_date = new Date();
let matcher = new Date(today_date.getFullYear(),today_date.getMonth(), today_date.getDate());
//this works fine
if(target_date > today_date) {
gram_start = "There are that many days left to this date: <br>";
difference = Math.ceil((target_date - today_date) / one_day);
}
else if(target_date < today_date) {
gram_start = "There has been that many days since that date: <br>";
difference = Math.round((today_date - target_date) / one_day);
}
if(target_date < matcher)
difference--;
let remaining_days = difference;
if(target_date > today_date) {
while(remaining_days >= (leapyear(year) ? 366 : 365)) {
remaining_days -= leapyear(year) ? 366 : 365;
years_write++;
year--;
}}
else if(target_date < today_date) {
while(remaining_days >= (leapyear(year) ? 366 : 365)) {
remaining_days -= leapyear(year) ? 366 : 365;
years_write++;
year++;
}}
if(leapyear(year))
months_list.Luty[1] = 29;
else
months_list.Luty[1] = 28;
let i = month_obj[0]-1;
if(target_date > today_date) {
while(remaining_days >= (months_list[month_index[i]][1])) {
remaining_days -= (months_list[month_index[i]][1]);
months_write++;
i--;
}}
else if(target_date < today_date) {
while(remaining_days >= months_list[month_index[i]][1]) {
remaining_days -= months_list[month_index[i]][1];
months_write++;
i++;
}}
document.getElementById("result").innerHTML = gram_start + difference + " days, so:" + years_write + " years, " + months_write + " months and " + remaining_days + " days.";
})};

Trigger alarm when input values equals to current time

I want to create multiple alarm clocks and trigger any of the alarm if at any time the value of that alarm (hour and minute) equals the current time (hour and minute). I generates the alarm from user inputs, where the user input the set time (hour and minute) that they want the alarm to trigger, and any time the user input matches the current time, the alarm should be triggered.
The problem here is that, the alarm doesn't ring. The set time will pass and the alarm will refuse to ring.
Here is my code.
CSS
#ring {display:none;}
li {list-style-type: none; border: solid gray 1px; padding:10px; margin: 3px;}
HTML
<body onload="startTime()">
<div id="txt"></div> <br>
<h1 id="ring">Ring!!!!!!!!!</h1>
<input type="text" placeholder="hour" id="hour">
<input type="text" placeholder="minute" id="minute">
<button onclick="addAlarm()">Set alarm</button>
<ul id="list">
<!--Alarm clocks goes here-->
</ul>
</body>
JAVASCRIPT
function startTime(alarmHour, alarmMinute) {
var today = new Date();
var currentHour = today.getHours();
var currentMinute = today.getMinutes();
var currentSecond = today.getSeconds();
document.getElementById('txt').innerHTML =
currentHour + ":" + currentMinute + ":" + currentSecond;
var t = setTimeout(startTime, 500);
if(currentHour == alarmHour && currentMinute == alarmMinute) {
document.getElementById("ring").style.display = "block"
}
};
var list = document.getElementById("list");
var alHour = document.getElementById("hour");
var alMinute = document.getElementById("minute");
function newAlarm(hour, minute){
startTime(hour, minute)
theAlarm = `<li><span>${hour}:</span><span>${minute}</span></li>`;
var position = "afterbegin";
list.insertAdjacentHTML(position, theAlarm);
}
function addAlarm(){
var hour = parseInt(alHour.value);
var minute = parseInt(alMinute.value);
if (hour, minute) {
newAlarm(hour, minute);
alHour.value ="";
alMinute.value ="";
}
};
Um I dont get your question to much but here I fixed the code according to what you said
var alarmhour;
var alarmminute;
setInterval(function() {
var today = new Date();
var currentHour = today.getHours();
var currentMinute = today.getMinutes();
var currentSecond = today.getSeconds();
document.getElementById('txt').innerHTML =
currentHour + ":" + currentMinute + ":" + currentSecond;
if (currentHour == alarmhour && currentMinute == alarmminute) {
document.getElementById("ring").style.display = "block";
}
}, 500)
var list = document.getElementById("list");
var alHour = document.getElementById("hour");
var alMinute = document.getElementById("minute");
function newAlarm(hour, minute) {
alarmhour = hour;
alarmminute = minute;
theAlarm = `<li><span>${hour}:</span><span>${minute}</span></li>`;
var position = "afterbegin";
list.insertAdjacentHTML(position, theAlarm);
}
function addAlarm() {
var hour = parseInt(alHour.value);
var minute = parseInt(alMinute.value);
if (hour, minute) {
newAlarm(hour, minute);
alHour.value = "";
alMinute.value = "";
}
};
#ring {
display: none;
}
li {
list-style-type: none;
border: solid gray 1px;
padding: 10px;
margin: 3px;
}
<body>
<div id="txt"></div> <br>
<h1 id="ring">Ring!!!!!!!!!</h1>
<input type="text" placeholder="hour" id="hour">
<input type="text" placeholder="minute" id="minute">
<button onclick="addAlarm()">Set alarm</button>
<ul id="list">
<!--Alarm clocks goes here-->
</ul>
</body>
Click the run snippet above to see the code running

Javascript validation form return false not working on Safari Browser in IOS

I have written condition on checking date and if lead time is less than 4 hours, show error message and do not allow further action to happen. In Android mobile and website it is working fine.
In Iphone safari browser it doesnt show my message and doesnot return false and continues to perform next action. What is wrong with my code
function validate_form() {
var mytext = "";
document.getElementById("mytext").innerHTML = "";
if ($("#pickup_time").val().trim() !== "") {
var inputDate = new Date($("#pickup_time").val().trim());
var todaysDate = new Date();
if (inputDate.setHours(0, 0, 0, 0) == todaysDate.setHours(0, 0, 0, 0)) {
var pickup_time = $("#pickup_time").val().trim();
var pickup_min = pickup_time.substr(pickup_time.length - 2);
pickup_time = pickup_time.substr(pickup_time.length - 5);
pickup_time = pickup_time.substr(0, 2);
var date = new Date();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
hours = hours + 4;
if (pickup_time === hours) {
if (pickup_min >= minutes) {
return true;
} else {
document.getElementById("mytext").innerHTML = "Minimum lead time required is 4Hrs to schedule a Car!";
return false;
}
} else if (pickup_time < hours) {
document.getElementById("mytext").innerHTML = "Minimum lead time required is 4Hrs to schedule a Car!";
return false;
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="success.html" method="post" class="chafviews" id="booknow" onsubmit="return validate_form(event)">
<div class="pickCont">
<input type="text" class="textField pick_datepicker" value="" name="pickup_time" id="pickup_time" placeholder="Select start date" />
<div class="fieldLable">Pickup Date and Time</div>
</div>
<div class="pickCont">
<input type="text" class="textField drop_datepicker" value="" name="dropoff_time" id="dropoff_time" placeholder="Select end date" />
<div class="fieldLable">Drop-off Date and Time</div>
</div>
<p id="mytext" style="color: red; margin-top: 50px; font-size: 13px;"></p>
<input type="submit" class="selfBook" value="Proceed" />
</form>

Contact Form 7 Datepicker: Automatically switch the date after a specified time of day

I'm using Contact Form 7 as a booking tool for a restaurant. The date you can book a table is set on next day by default. Also booking for the present day is not possible.
I want the tool to show the present date until 2pm and after 2pm it automatically switches to the next day's date. Also it makes booking for the present day unpossible after 2pm.
I'm a complete newbie in coding, I hope you guys can help me out.
This is how the Contact Form is currently set up:
<label> Personenanzahl *
[select* res-number "1 Person" "2 Personen" "3 Personen" "4 Personen" "5 Personen" "6 Personen"] </label>
<label> Datum *
[date* res-date id:datepicker min:today] </label>
<div class="vc_col-sm-6 padding-column"><label> Start *
[select* res-start id:start-time "17:00" "17:15" "17:30" "17:45" "18:00" "18:15" "18:30" "18:45"
"19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30" "20:45" "21:00" "21:15" "21:30" "21:45"
"22:00" "22:15" "22:30" "22:45" "23:00" "23:15" "23:30" "23:45" "00:00" "00:15" "00:30" "00:45"
"01:00"] </label></div>
<div class="vc_col-sm-6 padding-column"><label> Ende *
[select* res-end id:end-time "17:00" "17:15" "17:30" "17:45" "18:00" "18:15" "18:30" "18:45"
"19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30" "20:45" "21:00" "21:15" "21:30" "21:45"
"22:00" "22:15" "22:30" "22:45" "23:00" "23:15" "23:30" "23:45" "00:00" "00:15" "00:30" "00:45"
"01:00"] </label></div>
<label> Name *
[text* res-name] </label>
<label> Telefon *
[tel* res-tel] </label>
<label> E-Mail Adresse *
[email* res-email] </label>
[submit "Senden"]
And this is additional code which is implemented on the website:
<script type="text/javascript">
// initialize datepicker
var datepicker = jQuery('#datepicker');
var today = new Date();
var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var dd = today.getDate();
var mm = today.getMonth()+1; // January is 0!
var yyyy = today.getFullYear();
var tomday = tomorrow.getDate();
var tommonth = tomorrow.getMonth() + 1;
var tomyear = tomorrow.getFullYear();
if(tomday<10){tomday='0'+tomday} if(tommonth<10){tommonth='0'+tommonth} tomorrow = tomyear+'-'+tommonth+'-'+tomday;
jQuery(datepicker).attr('value', tomorrow);
// initialize time boxes
var startTimeBox = jQuery('#start-time')[0];
var endTimeBox = jQuery('#end-time')[0];
jQuery(startTimeBox).val("17:00");
jQuery(endTimeBox).val("18:45");
// handling of time changes
jQuery(startTimeBox).change(function (event) {
var startTimeValue = event.currentTarget.value;
var startHour = Number(startTimeValue.slice(0,2));
var startMinute = Number(startTimeValue.slice(3,5));
var endHour = 0;
var endMinute = 0;
if ((startHour == 23) || (startHour == 0) || (startHour == 1)) {
if ((startHour == 23) && (startMinute == 0)) {
endHour = 0;
endMinute = 45;
} else {
endHour = 1;
endMinute == 0;
}
} else {
if (startMinute == 0) {
endHour = startHour + 1;
endMinute = 45;
} else if (startMinute == 15) {
endHour = startHour + 2;
endMinute = 0;
} else if (startMinute == 30) {
endHour = startHour + 2;
endMinute = 15;
} else if (startMinute == 45) {
endHour = startHour + 2;
endMinute = 30;
}
if (endHour == 24) {
endHour = 0;
}
}
if (endHour == 24) {
endHour = 0;
}
var endHourString = endHour.toString();
var endMinuteString = endMinute.toString();
if (endHourString.length == 1) {
endHourString = "0" + endHourString;
}
if (endMinuteString.length == 1) {
endMinuteString = "0" + endMinuteString;
}
var endTimeString = endHourString + ":" + endMinuteString;
jQuery(endTimeBox).val(endTimeString);
});
</script>
Thank you very much!
You can use contact form7 date picker plugin its easy and usefull for time and date with curent tim

How to get value from onchange?

Hi I basically am trying to disable another input field if the day is set to today from another input field (date). I can't seem to force an onchange onto an input field and grab that value into a variable to make this work.
I've had success placing the onchange(this) onto the input field but I have to take it out and force a JS onchange onto it instead.
I've tried the following code. As you can see, it is supposed to do something when the time is past 10am and the date is selected as today:
<script>
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
var hrs = date.getHours();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
date = yyyy+'-'+mm+'-'+dd;
var userDateEntry = document.getElementById("fm_deliverydate").onchange().value;
if (hrs >= 10 && userDateEntry == date) {
alert("Shipping for today has ended. Your order will arrive tomorrow");
document.getElementById('fm_deliverytime').disabled= true;
}
else{
document.getElementById('fm_deliverytime').disabled= false;
}
</script>
<input type="date" name="DateName" id="fm_deliverydate" />
<input type="time" name="TimeName" id="fm_deliverytime" />
You aren't attaching the event correctly. You attach an event using addEventListener.
Fiddle: http://jsfiddle.net/AtheistP3ace/125jnvwp/1/
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yyyy = date.getFullYear();
var hrs = date.getHours();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
date = yyyy + '-' + mm + '-' + dd;
var userDateEntry = document.getElementById("fm_deliverydate");
userDateEntry.addEventListener('change',
function () {
if (hrs >= 10 && userDateEntry.value == date) {
alert("Shipping for today has ended. Your order will arrive tomorrow");
document.getElementById('fm_deliverytime').disabled = true;
} else {
document.getElementById('fm_deliverytime').disabled = false;
}
}
);
If you wanted to add the onclick event listener to the html then you really only need to remove the onchange method you have attached in your dateEntered function and move it to the html, nothing else changes then.
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
var hrs = date.getHours();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
date = yyyy+'-'+mm+'-'+dd;
function dateEntered(){
var userDateEntry = document.getElementById("fm_deliverydate").value;
if (hrs >= 10 && userDateEntry == date) {
document.getElementById('fm_deliverytime').disabled = true;
} else {
console.log('shipping enabled');
document.getElementById('fm_deliverytime').disabled = false;
};
}
Your html would look like this:
<input onchange="dateEntered()" type="date" name="DateName" id="fm_deliverydate" placeholder="yyyy-mm-dd"/>
<input type="time" name="TimeName" id="fm_deliverytime" placeholder="enter date"/>
Here's the fiddle: https://jsfiddle.net/o73fze9r/
Try adding the event listener to the element instead, and firing your function when it changes. Try it out on jsFiddle. You could also consider adding a case where the date entered is lower than the current date. As of now you can enter a date in the past and still be able to enter a time.
<input type="date" name="DateName" id="fm_deliverydate" />
<input type="time" name="TimeName" id="fm_deliverytime" />
<script>
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
var hrs = date.getHours();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
date = yyyy+'-'+mm+'-'+dd;
(function(){
document.getElementById("fm_deliverydate").onchange = function() {
dateEntered();
}
})();
function dateEntered(){
var userDateEntry = document.getElementById("fm_deliverydate").value;
if (hrs >= 10 && userDateEntry == date) {
alert("Shipping for today has ended. Your order will arrive tomorrow");
document.getElementById('fm_deliverytime').disabled= true;
}
else{
document.getElementById('fm_deliverytime').disabled= false;
}
}
</script>

Categories