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!');
}
Related
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>
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
}
I'm trying to fetch javascript variavle value to text field, but I'm getting an error.
[object Object]
I'm trying to calculate difference between two dates and want to show that in text field and after that want to save it in database.
When I'm displaying the result in span tab and it gives me proper result.
Here is my code: View file
<div class="col-md-3">
<div class="form-group">
<div class="col-md-11">
<div class='input-group date' name="exam_date" id='from_date' data-date="" data-date-format="yyyy-mm-dd">
<input type='text' class="form-control" id="datepicker1" id="yes" name="property_gas_issue_date" placeholder="Issue Date " />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div class="col-md-11">
<div class='input-group date' name="exam_date" id='from_date' data-date="" data-date-format="yyyy-mm-dd">
<input type="text" class="form-control" id="datepicker8" name="property_gas_expiry_date" placeholder="Gas expiry date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div class="col-md-11">
<!-- <input type="text" id="diff" name="property_gas_certificate_duration_days" placeholder="duration in days" value="" class="form-control"> -->
<strong><span> Renewal days count:</span> <span id='diff'> - </span> <span> Days</span></strong>
</div>
</div>
</div>
Note: In above code I just comment textbox code.
JS code:
<script>
$('#datepicker1').datepicker();
$('#datepicker8').datepicker();
$('#datepicker8').change(function () {
var diff = $('#datepicker1').datepicker("getDate") - $('#datepicker8').datepicker("getDate");
$('#diff').text(diff / (1000 * 60 * 60 * 24) * -1);
});
</script>
This JS code for textbox field:
<script>
$('#datepicker1').datepicker();
$('#datepicker8').datepicker();
$('#datepicker8').change(function () {
var diff = $('#datepicker1').datepicker("getDate") - $('#datepicker8').datepicker("getDate");
var result = $('#diff').text(diff / (1000 * 60 * 60 * 24) * -1);
document.getElementById("diff").value = result;
});
</script>
Any kind of help is welcome, thanks in advance.
Updated question:
here is my code:
<script>
var date1 = new Date();
date1.setMonth(date1.getMonth() + 12);
$('#datepicker4').datepicker("setDate", new Date());
$('#datepicker5').datepicker("setDate", date1);
//$('#datepicker4').datepicker();
$("#datepicker4").datepicker({ onSelect: function(dateText) { var dateofDatePicker1 = dateText ;
$('#datepicker5').trigger('change'); } });
$('#datepicker5').datepicker();
$('#datepicker5').change(function () {
var gasDiff= $('#datepicker5').datepicker("getDate") - $('#datepicker4').datepicker("getDate");
var result = gasDiff / (1000 * 60 * 60 * 24) * -1;
document.getElementById("gasDiff").value = result;
});
</script>
output:
In above picture the result textbox is empty.
Update result variable in here, try it
<script>
$('#datepicker1').datepicker();
$('#datepicker8').datepicker();
$('#datepicker8').change(function () {
var diff = $('#datepicker1').datepicker("getDate") - $('#datepicker8').datepicker("getDate");
var result = diff / (1000 * 60 * 60 * 24) * -1 ;
document.getElementById("diff").value = result;
});
</script>
To Add month to date use date.js plugin.
Please reference datejs and use below to add month as below
and traigger change
$("#datepicker4").datepicker({
onSelect: function (dateText) {
var nextMonth = new Date(dateText).add(1).month().toString('MM/dd/yyyy');
$('#datepicker5').val(nextMonth);
$('#datepicker5').trigger('change');
}
});
$('#datepicker5').datepicker();
$('#datepicker5').change(function () {
var diff = $('#datepicker4').datepicker("getDate") - $('#datepicker5').datepicker("getDate");
$('#diff').val(diff / (1000 * 60 * 60 * 24) * -1);
});
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.
I have the following code:
HTML:
<form onsubmit="return false;">
<div class="col-5">
<label>
Page Time
<input id="pageTime" name="pageTime" type="time" step="1" tabindex="9">
</label>
</div>
<div class="col-5">
<label>
Ack Time
<input id="ackTime" name="ackTime" type="time" step="1" tabindex="10">
</label>
</div>
<div class="col-5">
<label>
Arrival Time
<input id="arrivalTime" name="arrivalTime" type="time" step="1" tabindex="11">
</label>
</div>
<div class="col-5">
<label>
Start Replace / Root Cause Found
<input id="startReplace" name="startReplace" type="time" step="1" tabindex="12">
</label>
</div>
<div class="col-5">
<label>
Replaced / Repair Completed
<input id="replaced" name="replaced" type="time" step="1" tabindex="13">
</label>
</div>
<div class="col-4">
<label>
Engagement
<input type="text" id="engagement" name="engagement" value="" readonly="readonly" />
</label>
</div>
<div class="col-4">
<label>
Arrival
<input type="text" id="arrival" name="arrival" value="" readonly="readonly" />
</label>
</div>
<div class="col-4">
<label>
Investigation
<input type="text" id="investigation" name="investigation" value="" readonly="readonly" />
</label>
</div>
<div class="col-4">
<label>
Mitigate
<input type="text" id="mitigate" name="mitigate" value="" readonly="readonly" />
</label>
</div>
<div class="col-1" style="text-align: center">
<label>
Total Ops Phases
<input type="text" name="totalOpsPhases" id="totalOpsPhases" value="" readonly="readonly" />
</label>
</div>
<div class="col-submit">
<button class="submitbtn" tabindex="14" onclick="opsTime();">Do the Math</button>
</div>
</form>
JS:
function toSeconds(time_str) {
// Extract hours, minutes and seconds
var parts = time_str.split(':');
var sum = 0;
// compute and return total seconds
for (c = 0; c <= 2; c++) {
if (c === 0) {
sum += parts[0] * 3600;
} else if (c === 1) {
sum += parts[1] * 60;
} else if (c === 2) {
if (parts[2] !== 'undefined') {
sum += parts[2];
}
}
}
return sum;
}
function opsTime() {
var time = [document.getElementById('pageTime').value, document.getElementById('ackTime').value, document.getElementById('arrivalTime').value, document.getElementById('startReplace').value, document.getElementById('replaced').value];
// Created an array to easily do the math :)
// Array mapping:
// 0 = pageTime
// 1 = ackTime
// 2 = arrivalTime
// 3 = startReplaceTime
// 4 = replacedTime
for (i = 0; i <= 4; i++) {
if (i === 4) {
var start = time[0];
var end = time[4];
} else {
start = time[i];
end = time[i + 1];
}
var startSec = toSeconds(start);
var endSec = toSeconds(end);
var difference = Math.abs(endSec - startSec);
// format time differnece
var result = [
Math.floor(difference / 3600), // an hour has 3600 seconds
Math.floor((difference % 3600) / 60), // a minute has 60 seconds
difference % 60
];
// 0 padding and concatation
result = result.map(function (v) {
return v < 10 ? '0' + v : v;
}).join(':');
var res = [];
res[i] = result;
}
document.getElementById('engagement').value = res[0];
document.getElementById('arrival').value = res[1];
document.getElementById('investigation').value = res[2];
document.getElementById('mitigate').value = res[3];
document.getElementById('totalOpsPhase').value = res[4];
}
What I'm trying to do is to pick the times filled in the inputs and show the difference in the inputs boxes below.
Engagement should be the time difference between Page Time and Ack Time;
Arrival should be the time difference between Ack Time and Arrival Time;
Investigation should be the time difference between Arrival and Start Replace Time;
Mitigate should be the time difference between Start Replace and Replaced time;
Total Ops Phases should be the time difference between Replaced and Page time.
I'm stuck on the code above for almost 8 hours, changed a lot of things trying to do the math and put each time difference inside an array and then use it to fill the inputs, but it seems the array isn't get filled with data.
Unfortunately I have to use the seconds as well, and I couldn't find much material with different solutions to calculate the difference of times using it.
I will be glad if someone can see another way to solve this matter.
Thanks in advance!
PS: Tried to insert a print of the form but I don't have the reputation needed.
The type="time" attribute is only supported by chrome, not Firefox or Internet Explorer so you should be using a compatibility library like these or one of your own making. If you just want to use chrome you can use valueAsNumber:
v.valueAsNumber
56013000
v.valueAsDate
Thu Jan 01 1970 10:33:33 GMT-0500 (EST)
v.value
"15:33:33"
Note that the Chrome console will show you these options with auto suggest.
Also jsfiddle