Develop Reference

Countdown timer for every day and hour

I have a difficult task. I need to make a countdown timer that counts every day and every set time for a certain event. First I want to figure out how to make it possible to select specific times for each day (for example the event starts on Monday at 10:30 and have the same event on Monday at 20:00) and how to save them to the databases.
Second I want to figure out how after I write them down so that it shows the earliest time until the next event for each day and so it repeats every week.
Something like this i want - https://i.imgur.com/4kOtMnk.png
<form method="post" action="/adminpanel/event">
#csrf
<div class="card-body">
<div class="form-group">
<label for="FileName">Event Name</label>
<input type="text" class="form-control" id="name" name="event">
</div>
<div class="form-group">
<label for="FileName">Event Name</label>
<select id="select" multiple onchange="showDiv()">
<optgroup label="Weekdays">
<option value="1">Every Day</option>
<option value="2">Monday</option>
</optgroup>
</select>
</div>
<!-- Every Day -->
<div class="form-group" id="hidden_div1" style="display: none;">
<label for="FileName">Every Day</label>
<input type="text" class="form-control" id="name" name="everyday"
placeholder="Event hours in Every Day seperated with comma ( , ) Time format hh:mm (must be sorted by time asc)">
</div>
<!-- Monday -->
<div class="form-group" id="hidden_div2" style="display: none;">
<label for="FileName">Monday</label>
<input type="text" class="form-control" id="name" name="monday"
placeholder="Event hours in Monday seperated with comma ( , ) Time format hh:mm (must be sorted by time asc)">
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary col-12">Submit</button>
</div>
</form>
Countdown HTML
<!-- Countdown -->
<script type="text/javascript">var newdate = 'here i need to put time';</script>
<div class="countdowntitle">
<div id="timer"></div>
</div>
Countdown JS
function updateTimer() {
future = Date.parse(newdate);
now = new Date();
diff = future - now;
days = Math.floor(diff / (1000 * 60 * 60 * 24));
hours = Math.floor(diff / (1000 * 60 * 60));
mins = Math.floor(diff / (1000 * 60));
secs = Math.floor(diff / 1000);
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
document.getElementById("timer")
.innerHTML =
'<div>' + d + '<span>Days</span></div>' +
'<div>' + h + '<span>Hours</span></div>' +
'<div>' + m + '<span>Minutes</span></div>' +
'<div>' + s + '<span>Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
And this is Controller
public function do_event(Request $request)
{
$this->validate($request,[
'event'=>'unique:XWEB.XWEB_EVENT,event',
'monday'=>'date_format:H:i',
]);
$insert = DB::connection('XWEB')->table('XWEB_EVENT')
->insert(['event' => $request->event, 'time' => $request->monday]);
return redirect()->back()->withSuccess('You have added this event successfully!');
}

How do I get the number of days from 2 user inputs and then multiply it with another user input which is amount in JavaScript?

I'm trying to create a simple fine calculator, I have two user input dates and a user input amount.
I need to subtract the 2 dates and then multiply the number of days by the fine amount. I went through a bunch of videos about dates, but none of them ever take user input. I am very new to javascript so I don't know why it won't show me my result. Could someone tell me what's wrong with my code?
if (isset($_POST['calcDiff'])) {
$("#bdate").datetimepicker({
timepicker: false,
format: 'y-m-d'
});
$("#rdate").datetimepicker({
timepicker: false,
format: 'y-m-d'
});
function calcDiff() {
var bdate = new Date($("#bdate").val());
var rdate = new Date($("#rdate").val());
var amount = $('#amount').val();
var timeDifference = rdate.getTime() - bdate.getTime();
var milliSecondsInOneSecond = 1000;
var secondInOneHour = 3600;
var hourInOneDay = 24;
var daysDiff = timeDifference / (milliSecondsInOneSecond * secondInOneHour * hourInOneDay);
var fine = daysDiff * amount.val();
alert(fine);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="finecalc" action="" method="post">
<p>
Borrowed date
<input type="date" name="bdate" id="bdate" required="required" value="<?php echo $bdate; ?>" />
</p>
<p>
Return date</b>
<input type="date" name="rdate" id="rdate" required="required" value="<?php echo $rdate; ?>" /> <b>
</p>
<p>Enter fine amount per day</b>
<input type="text" name="amount" size="10"><b>
</p><button onclick="calcDiff()">Calculate Fine</button><p id="display"></p>
</form>

You can get the value from each input, then actually just subtract the dates to get the epoch difference and with that number you can convert it to days and multiply by the fine.
I added a JS that does just that.
function calcDiff(){
const date1 = new Date(document.querySelector('#bdate').value);
const date2 = new Date(document.querySelector('#rdate').value);
const penalty = document.querySelector('input[name="amount"]').value;
const diff_ms = date2 - date1;
// ms -> s -> min -> h -> days
const days = diff_ms / 1000 / 60 / 60 / 24;
const amount_to_pay = days * penalty;
console.log('$' + amount_to_pay);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="finecalc" action="" method="post">
<p>
Borrowed date
<input type="date" name="bdate" id="bdate" required="required" value="<?php echo $bdate; ?>" />
</p>
<p>
Return date</b>
<input type="date" name="rdate" id="rdate" required="required" value="<?php echo $rdate; ?>" /> <b>
</p>
<p>Enter fine amount per day</b>
<input type="text" name="amount" size="10"><b>
</p><button type="button" onclick="calcDiff()">Calculate Fine</button><p id="display"></p>
</form>

var amount = $('#amount').val();
...
var fine = daysDiff * amount.val();
Maybe no need to use amount.val()?
var fine = daysDiff * amount;
Also, remove the comma in this line:
var daysDiff = timeDifference / (, milliSecondsInOneSecond * secondInOneHour * hourInOneDay);

First you need to calculate difference between 2 dates and total number of days
const date1 = new Date('7/13/2010');
const date2 = new Date('12/15/2010');
const diffTime = Math.abs(date2 - date1);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // calculate number of days
console.log(diffDays + " days");
var amount = $('#amount').val(); //store Amount value into amount variable
Then calculate fine:
var fine = daysDiff * amount;

This is what wound up working for me, thank you to all that helped.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="enterbooks.css" />
</head>
<body style="background: url(library.png); background-size: 100%;">
<div class="content">
<h1>Hey admin calulate you fines here!</h1>
<script>
function calcDiff() {
const date1 = new Date(document.querySelector('#bdate').value);
const date2 = new Date(document.querySelector('#rdate').value);
const penalty = document.querySelector('input[name="amount"]').value;
const diff_ms = date2 - date1;
// ms -> s -> min -> h -> days
const days = diff_ms / 1000 / 60 / 60 / 24;
const amount_to_pay = days * penalty;
alert(amount_to_pay);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="finecalc" action="" method="post">
<p>
Borrowed date
<input type="date" id="bdate" required="required" value="<?php echo $bdate; ?>" />
</p>
<p>
Return date</b>
<input type="date" id="rdate" required="required" value="<?php echo $rdate; ?>" /> <b>
</p>
<p>Enter fine amount per day</b>
<input type="text" name="amount" size="10"><b>
</p><button type="button" onclick="calcDiff()">Calculate Fine</button>
<p id="display"></p>
</form>
</div>
</body>
</html>

How to calculate the total number of days between two date pickers and display the result in another text field? [duplicate]

This question already has answers here:
How to calculate number of days between two dates?
(42 answers)
Closed 2 years ago.
https://drive.google.com/file/d/1XDXDKO2CjwBkBZEbY0PwGcx1S3gVXCiN/view?usp=sharing
<div class="col-lg-6">
<label>Check-In</label>
<input type="date" name="checkin" class="form-control" id="checkin" />
</div>
<div class="col-lg-6">
<label>Check-Out</label>
<input type="date" name="checkout" class="form-control" id="checkout" />
</div>

Use below:
var checkin = $("#checkin").val();
var checkout = $("#checkout").val();
if(checkout >= checkin) {
var diffTime = Math.abs(checkout - checkin);
var days = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
} else {
//logic error
}

Javascript Add 30 or 20, 22 days to an original date?

I'm trying to write a javascript that adds 10, 14, 15, 20, 21, 28, 30, 31, 45, 49, 60, 70 or 90 days to a date you input. The only thing is I'm missing something. If any could help that would be great or if there's is a WordPress plugin that would be great.
I can't seem to find what's missing in my code to make it work
<td id="main_content" valign="top" align="left">
<div id="date-cal" align="left">
<br/>
<div align="left" id="form-field"><strong>Step 1:</strong>
<br/>Enter your commencement date:
<br/>
<span class="tips">
(eg date of receipt of FOI Request)
</span>
</div>
<form method="post" name="calcform" style="margin-bottom: 0;">
<span style="font-family: Arial, Helvetica, sans-serif">
<!-- calendar attaches to existing form element -->
</span>
<input type="text" name="txtdate" class="datepicker" value="dd/mm/yy" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'calcform',
// input name
'controlname': 'txtdate'
});
</script>
<br />
<br />
<div id="form-field2"><strong>Step 2:</strong>
<br/>Select your relevant period:
<br/>
<span class="tips">
(eg days to make an FOI decision)
</span>
</div>
<!-- No of days selection dropdown -->
<select name="daycount">
<option>10</option>
<option>14</option>
<option>15</option>
<option>20</option>
<option>21</option>
<option>28</option>
<option>30</option>
<option>31</option>
<option>45</option>
<option>49</option>
<option>60</option>
<option>70</option>
<option>90</option>
</select>
<label>days</label>
<p style="margin-top: 0; margin-bottom: 0">
<br />
<!-- submit button -->
<input type="submit" value="Calculate" />
<br />
</p>
<p style="margin-top: 0; margin-bottom: 0;">
<br />
<span></span>
</p>
</form>
</div>
</td>

var log = console.log;
var d = new Date();
var daysToAdd = 5; //for example
var msInDay = 1000 * 60 * 60 * 24; //milliseconds in day
log("Before:",d.toLocaleString());
//add 5 days
d.setTime(d.getTime() + daysToAdd * msInDay);
//
log("After :",d.toLocaleString());

Alternative calculations:
<script>
console.clear();
var log = console.log;
var d = new Date();
var daysToAdd = 5; //for example
var msInDay = 1000 * 60 * 60 * 24; //milliseconds in day
log("Before:",d.toLocaleString());
//add 5 days
d.setTime(d.getTime() + daysToAdd * msInDay);
//
log("After :",d.toLocaleString());
// alternative
log()
var d = new Date();
log("Before:",d.toLocaleString());
// add 5 days
d = new Date(d.getFullYear(),d.getMonth(),d.getDate()+5);
//
log("After :",d.toLocaleString());
// Note: can add hours, minutes, seconds if needed.
</script>

Adding Military Time - Textbox for HH and Texbox for MM?

I've been able to get this working GREAT when using a single textbox that has the HH:MM split with :, but when the HH are in a separate textbox from MM I'm completely lost. I'm needing to calculate time worked from the time entered and then outputted to the decimal format then minus the lunch. Any help would be awesome!
// adding military time
$(function () {
function calculate () {
var time1 = $("#element_33_1").val(), time1_1 = $("#element_33_2").val(), time2 = $("#element_34_1").val(), time2_1 = $("#element_34_2").val();
var hours1 = (time1),
hours2 = (time2),
mins1 = (time1_1),
mins2 = (time2_1);
var hours = hours2 - hours1, mins = 0;
if(hours <= 0) hours = 0 + 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);
$("#element_509").val(hours);
}
$("#element_33_1,#element_33_2,#element_34_1,#element_34_2").keyup(calculate);
calculate();
});
//Hours Billed Total
$(document).ready(function() {
$("#element_29,#element_509,#element_33_1,#element_33_2,#element_34_1,#element_34_2,#element_39").keyup(function(ev){
var val1=parseFloat($("#element_509").val());
var val2=parseFloat($("#element_39").val());
$("#element_29").val((val1 - val2).toFixed(2));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="li_33" class="time_field column_4">
<fieldset>
<legend style="display: none">Start Time</legend>
<span class="description">Start Time <span id="required_33" class="required">*</span></span>
<span>
<input id="element_33_1" name="element_33_1" class="element text " size="2" type="text" maxlength="2" value="" />
<label for="element_33_1">HH</label>
</span>
<span>
<input id="element_33_2" name="element_33_2" class="element text " size="2" type="text" maxlength="2" value="" />
<label for="element_33_2">MM</label>
</span>
</fieldset>
</li> <li id="li_39" class="column_4 guidelines_bottom">
<label class="description" for="element_39">Lunch Hour <span id="required_39" class="required">*</span></label>
<div>
<input id="element_39" name="element_39" class="element text medium" type="text" value="" />
</div>
</li> <li id="li_34" class="time_field column_4">
<fieldset>
<legend style="display: none">Stop Time</legend>
<span class="description">Stop Time <span id="required_34" class="required">*</span></span>
<span>
<input id="element_34_1" name="element_34_1" class="element text " size="2" type="text" maxlength="2" value="" />
<label for="element_34_1">HH</label>
</span>
<span>
<input id="element_34_2" name="element_34_2" class="element text " size="2" type="text" maxlength="2" value="" />
<label for="element_34_2">MM</label>
</span>
</fieldset>
<input id="element_509" value="" name="Subtotal"/>
</li> <li id="li_29" class="column_4">
<label class="description" for="element_29">Hours Billed <span id="required_29" class="required">*</span></label>
<div>
<input id="element_29" name="element_29" class="element text medium" type="text" data-quantity_link="element_44" value="" />
</div>

You definitely want to convert to a common unit (minutes) first.
It looks like you're attempting that with:
mins = mins / 60
but that's not correct.
{correction: it is technically correct, but you could potentially lose/gain time when converting back to your billing units. See the additional info below.}
You want something like:
var totalMinutes = mins + (hours * 60);
Also, fix the typo on line 7:
time2_1 = $("#element_33_2").val();
Should be:
time2_1 = $("#element_34_2").val();
Added:
To hide the NaNs and negative values, you could test the vars before assigning to val and also clear previous results if there are errors:
var val3 = (val1 - val2).toFixed(2);
if (isNaN(val3) || val3 < 0)
{
$("#element_29").val("");
}
else
{
$("#element_29").val(val3);
}
I would still recommend working with minutes-as-integers rather than hours-as-floats. The comments on this question have some good info on time reporting.