Here three time zone range input pakistan, afghanistan and india
here time zone offset in seconds
location offset seconds
pakistan 18000
afghanistan 16200
indian 19800
input range 1 to 24 hour
when I click on any input the range displays all time according to their time zone.
But the problem is when I click on the afghanistan or india input time range it returns wrong time.
when when I click end the input range (mean 24 hour) it return 30 minute behind from the original value
$("#comission div").on("click", "input", function() {
var value = parseInt($(this).val())
var hours1 = Math.floor(value / 60);
var minutes1 = value - (hours1 * 60);
var targetTime = new Date(0);
targetTime.setMinutes(minutes1);
targetTime.setHours(hours1);
if (value > 1430) {
targetTime.setMinutes(59);
targetTime.setHours(23)
}
var timeZoneFromDB = $(this).find('.comissionLabel').attr("data-offset");
$('#comission .time').each(function() {
var timeZoneFromDB = $(this).find('.comissionLabel').attr("data-offset");
var tzDifference = (parseInt(timeZoneFromDB) / 60) + targetTime.getTimezoneOffset();
var date = new Date(targetTime.getTime() + tzDifference * 60000);
var totallv = parseInt(date.getHours() * 60) + date.getMinutes();
$(this).find('.tooltip').css('margin-left', totallv / 3);
$(this).find('.tooltip').html(date.getHours() + ':' + date.getMinutes());
$(this).find('.comissionLabel').html(date.getHours() + ':' + date.getMinutes());
$(this).find('.custom-range').val(totallv)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<br><br><br> <br><br><br>
<div id="comission" class="col-md-6 col-md-offset-2">
<div class="col-md-12 mb-3 44 time">afghanistan
<span class="comissionLabel" data-offset='16200'>time: </span>
<input class="custom-range" value="60" type="range" min="0" max="1440" step="15">
</div>
<div class="col-md-12 mb-3 45 time"> Pakistan
<span class="comissionLabel" data-offset='18000'>time: </span>
<input class="custom-range" value="620" type="range" min="0" max="1440" step="15">
</div>
<div class="col-md-12 mb-3 46 time">indian
<span class="comissionLabel" data-offset='19800'>time: </span>
<input class="custom-range" value="620" type="range" min="0" max="1440" step="15">
</div>
</div>
</div>
Related
I'm trying to change link the times input. When I choose a hour in the eventStartTime, I would like to fill, depend of a time passing through the minutesToHours function (in minutes), the eventEndTime (an addition : the eventStartTime + the minutes I've added)
I have tried to do it by myself, but i didn't get any results :
$( document ).ready(function() {
$('#eventStart').on('input', function () {
var convertDuration = minuteToHours(6);
$('#eventEnd').val($(this).val() + moment(convertDuration).format('HH:mm'));
});
});
function minuteToHours(num) {
var hours = Math.floor(num / 60);
var minutes = num % 60;
return hours + ":" + minutes;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="col-md-4">
<div class="form-group">
<label class="form-label" for="eventStart">Heure début</label>
<input class="form-control" id="eventStart" type="time">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="form-label" for="eventEnd">Heure Fin</label>
<input class="form-control" id="eventEnd" type="time">
</div>
</div>
Thanks for your help !
I am asking users to select a Start Date and End Date from the calendar.
I want to display the dates they have picked in a summary page.
For Example:
Your Start Date : [Date User has picked from Calendar in DD MM YYY]
Your End Date : [Date User has picked from Calendar in DD MM YYY]
Is there any way for me to do this?
function calculateDate() {
var startDate = document.getElementById("startDate").value;
var endDate = document.getElementById("endDate").value;
var dvtextless60 = document.getElementById("dvtextless60");
var dvtext61182 = document.getElementById("dvtext61182");
var dvtextmore183 = document.getElementById("dvtextmore183");
var Difference_In_Time = new Date(endDate).getTime() - new Date(startDate).getTime();
var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
if (Difference_In_Days < 60){
document.getElementById("dvtextless60").style.display = "block";
} else if (Difference_In_Days > 60 && Difference_In_Days <= 182){
document.getElementById("dvtext61182").style.display = "block";
} else {
document.getElementById("dvtextmore183").style.display = "block";
}
document.getElementById("numofdays").innerHTML = Difference_In_Days;
document.getElementById("displaysummary").innerHTML = startDate;
}
function resetForm(){
document.getElementById('rCalculator').reset();
location.reload();
}
<body>
<form id="rCalculator">
<pre>
Enter Start Date: <input type="date" name="startDate" id="startDate"/><br>
Enter End Date: <input type="date" name="endDate" id="endDate"/><br>
Total Days : <span id="numofdays"></span>
<span id="displaysummary"></span>
<div id="dvtextless60" style="display:none">
<span style="font-size:18px"><b>Too Short</b></span>
<br>
</div>
<div id="dvtext61182" style="display:none">
<span style="font-size:18px"><b>Almost There</b></span>
</div>
<div id="dvtextmore183" style="display:none">
<span style="font-size:18px"><b>Too Long</b></span>
</div>
<button type="button" id="calculate" onclick="calculateDate();">Calculate</button> <button type="button" id="startover" onclick="resetForm();">Reset</button>
</pre>
</form>
</body>
function calculateDate() {
var startDate = document.getElementById("startDate").value;
var endDate = document.getElementById("endDate").value;
var dvtextless60 = document.getElementById("dvtextless60");
var dvtext61182 = document.getElementById("dvtext61182");
var dvtextmore183 = document.getElementById("dvtextmore183");
var Difference_In_Time = new Date(endDate).getTime() - new Date(startDate).getTime();
var Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
if (Difference_In_Days < 60){
document.getElementById("dvtextless60").style.display = "block";
} else if (Difference_In_Days > 60 && Difference_In_Days <= 182){
document.getElementById("dvtext61182").style.display = "block";
} else {
document.getElementById("dvtextmore183").style.display = "block";
}
document.getElementById("numofdays").innerHTML = Difference_In_Days;
document.getElementById("displaysummary").innerHTML ="Your Start Date :" + getFormattedDate(startDate) + "<br>Your End Date :" + getFormattedDate(endDate);
}
function resetForm(){
document.getElementById('rCalculator').reset();
location.reload();
}
function getFormattedDate(d){
return d.substr(8,2) + " " + d.substr(5,2) + " " + d.substr(0,4)
}
<body>
<form id="rCalculator">
<pre>
Enter Start Date: <input type="date" name="startDate" id="startDate"/><br>
Enter End Date: <input type="date" name="endDate" id="endDate"/><br>
Total Days : <span id="numofdays"></span>
<span id="displaysummary"></span>
<div id="dvtextless60" style="display:none">
<span style="font-size:18px"><b>Too Short</b></span>
<br>
</div>
<div id="dvtext61182" style="display:none">
<span style="font-size:18px"><b>Almost There</b></span>
</div>
<div id="dvtextmore183" style="display:none">
<span style="font-size:18px"><b>Too Long</b></span>
</div>
<button type="button" id="calculate" onclick="calculateDate();">Calculate</button> <button type="button" id="startover" onclick="resetForm();">Reset</button>
</pre>
</form>
</body>
I have three fields like "Duration,Repeat,Complete Duration". User will enter the duration in time format(HH:MM:SS) and they will enter the repeat field value like "5,10,4,9,7 etc". Based on the two fields value the complete duration field should be filled.
I have tried using angular NgModel of both text fields and I multiplied the value with repeat field value. But the conversion was not happened properly.
<div>
<input type="value" [(ngModel)]="user.hrDuration">
<input type="value" [(ngModel)]="user.minDuration">
<input type="value" [(ngModel)]="user.secDuration">
</div>
<div>
<input type="value" [(ngModel)]="user.repeat">
</div>
<div>
<input type="value" [(ngModel)]="user.hrDuration*user.repeat">
<input type="value" [(ngModel)]="user.minDuration*user.repeat">
<input type="value" [(ngModel)]="user.secDuration*user.repeat">
</div>
I have tried like this, but the thing is it is directly multiplied the values, I need to convert and then it should multiply with the repeat field value.
Thanks in Advance!
You should subscribe to the input's input event so you'll know when they're changing:
<div>
<input type="value" [(ngModel)]="user.hrDuration" (input)="updateResult()">
<input type="value" [(ngModel)]="user.minDuration" (input)="updateResult()">
<input type="value" [(ngModel)]="user.secDuration" (input)="updateResult()">
</div>
<div>
<input type="value" [(ngModel)]="user.repeat" (input)="updateResult()">
</div>
<div>
<input type="text" [ngModel]="result.hrDuration">
<input type="text" [ngModel]="result.minDuration">
<input type="text" [ngModel]="result.secDuration">
</div>
and then in the Component have the listening method:
export class AppComponent {
user = {
hrDuration: 1,
minDuration: 1,
secDuration: 1,
repeat: 1
}
result = {
hrDuration: this.user.hrDuration * this.user.repeat,
minDuration: this.user.minDuration * this.user.repeat,
secDuration: this.user.secDuration * this.user.repeat
}
updateResult() {
// do your conversion here
this.result.hrDuration = this.user.hrDuration * this.user.repeat;
this.result.minDuration = this.user.minDuration * this.user.repeat;
this.result.secDuration = this.user.secDuration * this.user.repeat;
}
}
Here is a working stackblitz: https://stackblitz.com/edit/angular-2aukww
I think you should use an onchange event listener and a function that returns the result:
HTML:
<div>
<input type="value" [ngModel]="user.hours" (ngModelChange)="getResult()">
<input type="value" [ngModel]="user.minutes" (ngModelChange)="getResult()">
<input type="value" [ngModel]="user.seconds" (ngModelChange)="getResult()">
</div>
<div>
<input type="value" [ngModel]="user.repeat" (ngModelChange)="getResult()">
</div>
<div>
<input type="value" (ngModel)="user.result" readonly>
</div>
JS:
function getResult() {
if (isNaN($scope.user.hours) ||
isNaN($scope.user.minutes) ||
isNaN($scope.user.seconds) ||
isNaN($scope.user.repeat)) return $scope.user.result = "";
var total = ($scope.user.hours*60*60 + $scope.user.minutes*60 + $scope.user.seconds) * $scope.user.repeat;
var hh = Math.floor(total / (60*60));
if ( hh < 10 ) hh = '0' + hh;
var diff = total % (60*60);
var mm = Math.floor(diff / 60);
if ( mm < 10 ) mm = '0' + mm;
var ss = Math.floor(diff % 60);
if ( ss < 10 ) ss = '0' + ss;
$scope.user.result = hh + ':' + mm+ ':' + ss;
// of course you could also output something like
// 'X hours, Y minutes, Z seconds'
}
Showing the result as a single value will show more clearly the final value, since multiplying each variable (hours, minutes and seconds) by the repeats would be less intuitive.
Actually i want get the exact time difference between two date and time local and time should be update after every second ? I used Math. function to calculate hours minutes seconds & days Here is the code i used.
<html>
<div class="form-group">
<label for="exampleInputName" style="color: #ffffff;">Start Time</label>
<input id="sdt" value="" type="datetime-local" class="form-control" name="Sdt">
</div>
<div class="form-group">
<label for="exampleInputName" style="color: #ffffff;">End Time</label>
<input id="edt" value="" type="datetime-local" class="form-control" name="Edt">
</div>
<input id="btnAdded" onclick="st()" type="button" class="btn btn-primary btn-block" name="sub" value="Start" style="width:100px;width:100px; margin-left:10px;display:flex;justify-content: center;border-radius: 20px;">
<p id="demo" style=" text-align: center;
font-size: 60px;
margin-top: 0px; margin-left: 170px;
float: left;"></p>
<script>
function st()
{
var endtime = document.getElementById("edt").value;
var x = setInterval(function() {
var starttime = document.getElementById("sdt").value;
var distance = endtime - starttime;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);}
</script>
You could try this. I have refactored the code a bit.
<div class="form-group">
<label for="exampleInputName" style="color: #ffffff;">Start Time</label>
<input id="sdt" value="" type="datetime-local" class="form-control" name="Sdt">
</div>
<div class="form-group">
<label for="exampleInputName" style="color: #ffffff;">End Time</label>
<input id="edt" value="" type="datetime-local" class="form-control" name="Edt">
</div>
<input id="btnAdded" onclick="st()" type="button" class="btn btn-primary btn-block" name="sub" value="Start" style="width:100px;width:100px; margin-left:10px;display:flex;justify-content: center;border-radius: 20px;">
<p id="demo" style="text-align: center;font-size: 60px;margin-top: 0px; margin-left: 170px;float: left;"></p>
<script>
function getVals (diff) {
var days = Math.floor(diff / (24 * 60 * 60));
var hours = Math.floor(diff / (60 * 60)) % 24;
var minutes = Math.floor(diff / 60) % 60;
var secs = diff % 60;
return {
days, hours, minutes, secs,
};
}
function st() {
var endtime = document.getElementById("edt").valueAsNumber;
var starttime = document.getElementById("sdt").valueAsNumber;
var distance = (endtime - starttime)/1000;
var x = setInterval(function() {
distance -= 1;
// Time calculations for days, hours, minutes and seconds
var time = getVals(distance);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = time.days + "d " + time.hours + "h "
+ time.minutes + "m " + time.secs + "s ";
// If the count down is over, write some text
if (distance < 0) {
console.log('Comes here');
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
}
</script>
You need convert the value of date pickers to Date. And then get the milliseconds using getTime(). And decrease distance by 1000(1 second) during each function call.
function st()
{
var starttime = document.getElementById("sdt").value;
var endtime = document.getElementById("edt").value;
//this is correct way to get time gap between two dates
var distance = (new Date(endtime)).getTime() - (new Date(starttime)).getTime();
console.log(starttime,endtime);
var x = setInterval(function() {
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
//This line is added to decrease distance by 1 second
distance -= 1000
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);}
<div class="form-group">
<label for="exampleInputName" style="color: #ffffff;">Start Time</label>
<input id="sdt" value="" type="datetime-local" class="form-control" name="Sdt">
</div>
<div class="form-group">
<label for="exampleInputName" style="color: #ffffff;">End Time</label>
<input id="edt" value="" type="datetime-local" class="form-control" name="Edt">
</div>
<input id="btnAdded" onclick="st()" type="button" class="btn btn-primary btn-block" name="sub" value="Start" style="width:100px;width:100px; margin-left:10px;display:flex;justify-content: center;border-radius: 20px;">
<p id="demo" style=" text-align: center;
font-size: 60px;
margin-top: 0px; margin-left: 170px;
float: left;"></p>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Time difference</title>
</head>
<body>
<form id="calculate" action="">
<div>
<p><label>Start Hour: <input type="time" name="formShiftStartTime" id="formShiftStartTime"/></label></p>
<p><label>End Hour: <input type="time" name="formShiftEndTime" id="formShiftEndTime" /></label></p>
<!-- <p><label>duration</label></p><p id="formDuration"><label>Duration: </label></p> -->
<div class="form-group">
<label class="col-md-4 control-label" >Duration</label>
<div class="col-md-8">
<input id="formDuration" >
<!-- <input type="text" class="form-control " id="formDuration" name="formDuration" > -->
</div>
</div>
<!-- <p id="formDuration">time:<input type="text" name="formDuration" id="formDuration"/></p> -->
<!-- <p><input id="calculate_time" type="button" value="Calculate Time" /></p> -->
</div>
</form>
<script language="javascript" type="text/javascript">
function showTime(hours, minutes) {
return ((hours < 10) ? '0' : '') + hours +
':' +
((minutes < 10) ? '0' : '') + minutes;
}
function calculate_time(formShiftStartTime, formShiftEndTime) {
startTime = new Date('1-1-1 ' + formShiftStartTime);
endTime = new Date('1-1-1 ' + formShiftEndTime);
var difference = endTime - startTime;
difference /= 1000 * 60; // convert to minutes
var hours = Math.floor(difference / 60);
var mins = Math.floor(difference % 60);
document.getElementById('formDuration').innerHTML = showTime(hours, mins);
}
document.getElementById('formShiftEndTime').onchange = function () {
var start = this.form.elements.formShiftStartTime.value;
var end = this.form.elements.formShiftEndTime.value;
// calculate_time(start, end);
document.getElementById("formDuration").value = calculate_time(start, end);
// $('#formDuration').val(calculate_time(start, end));
};
</script>
</body>
</html>
i am new to js.could anyone please help me with this.I want to find the difference between two time from text box(24 hr format) and display the output in another text box.
if the display the time within a <p> tag or a <label> tag. It works fine.
Let me know whether it worked for you . Happy Coding :)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Time difference</title>
</head>
<body>
<form id="calculate" action="">
<div>
<p><label>Start Hour: <input type="time" name="formShiftStartTime" id="formShiftStartTime"/></label></p>
<p><label>End Hour: <input type="time" name="formShiftEndTime" id="formShiftEndTime" /></label></p>
<div class="form-group">
<label class="col-md-4 control-label" >Duration</label>
<div class="col-md-8">
<input type="text" class="form-control " id="formDuration" name="formDuration" >
</div>
</div>
</form>
<script language="javascript" type="text/javascript">
function showTime(hours, minutes) {
return ((hours < 10) ? '0' : '') + hours +
':' +
((minutes < 10) ? '0' : '') + minutes;
}
function calculate_time(formShiftStartTime, formShiftEndTime) {
startTime = new Date('1-1-1 ' + formShiftStartTime);
endTime = new Date('1-1-1 ' + formShiftEndTime);
var difference = endTime - startTime;
difference /= 1000 * 60; // convert to minutes
var hours = Math.floor(difference / 60);
var mins = Math.floor(difference % 60);
document.getElementById('formDuration').value = showTime(hours, mins);
}
$("#formShiftEndTime").on("change", function(){
var startHour = $("#formShiftStartTime").val();
var endHour = $("#formShiftEndTime").val();
calculate_time(startHour, endHour);
})
</script>
</body>
</html>
select the first date field as from and second date field as to.
the calculation is done based on to - from.
click on the calculate it will show the days in the text field
check console it will show milli seconds and days.
Please let me know did it worked.
function calculateDate(){
var firstDate = document.getElementsByName("first")[0].value;
var secondDate = document.getElementsByName("second")[0].value;
var differenceInTime = Math.abs(new Date(secondDate).getTime() - new Date(firstDate).getTime());
var differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24));
console.log(differenceInTime + " milli seconds ", differenceInDays + " days")
document.getElementById("output").value = differenceInDays
}
<label for="first">From Date</label>
<input type="date" name="first" id="first">
<label for="second">To Date</label>
<input type="date" name="second" id="second">
<input type="button" onclick="calculateDate()" value="calculate">
<input type="text" id="output">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$("#formShiftEndTime").on("change", function(){
var startHour = $("#formShiftStartTime").val();
var endHour = $("#formShiftEndTime").val();
calculate_time(startHour, endHour);
// console.log(startHour);
})
function showTime(hours, minutes) {
return ((hours < 10) ? '0' : '') + hours +
':' +
((minutes < 10) ? '0' : '') + minutes;
}
var startHour = $("#formShiftStartTime").val();
var endHour = $("#formShiftEndTime").val();
function calculate_time(formShiftStartTime, formShiftEndTime) {
if( ($("#formShiftStartTime").val()) < ( $("#formShiftEndTime").val()))
{
startTime = new Date('1-1-1 ' + formShiftStartTime);
endTime = new Date('1-1-1 ' + formShiftEndTime);
}
else{
startTime = new Date('1-1-1 ' + formShiftStartTime);
endTime = new Date('1-2-1 ' + formShiftEndTime);
}
var difference = endTime - startTime;
difference /= 1000 * 60; // convert to minutes
var hours = Math.floor(difference / 60);
var mins = Math.floor(difference % 60);
document.getElementById('formDuration').value = showTime(hours, mins);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Time difference</title>
</head>
<body>
<form id="calculate" action="">
<div>
<p><label>Start Hour: <input type="time" name="formShiftStartTime" id="formShiftStartTime"/></label></p>
<p><label>End Hour: <input type="time" name="formShiftEndTime" id="formShiftEndTime" /></label></p>
<div class="form-group">
<label class="col-md-4 control-label" >Duration</label>
<div class="col-md-8">
<input type="text" class="form-control " id="formDuration" name="formDuration" >
</div>
</div>
</form>
</html>