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>
Related
I have a reset function in my codes that is keeping my form on a reloading loop.
When I click on my Calculate Button, the divtext that I am trying to display just "Blink" and it will go off.
I only want it to reset when reset button is clicked though. Don't know where it went wrong. Here are my codes.
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("daysCalculator").innerHTML = greeting;
}
function resetForm(){
document.getElementById('rCalculator').reset();
}
<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="daysCalculator"></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 id="calculate" onclick="calculateDate();">Calculate</button> <button id="reset" onclick="resetForm();">Reset</button>
</pre>
You can solve this adding a type="button" to your reset button.
Considering the fact that you are using html form
I suggest you to edit your button with <type="submit"> and <type="reset">
and you can remove the button onClick and use form onsubmit={}
<form id="rCalculator" onsubmit="calculateDate()">
Enter Start Date: <input type="date" name="startDate" id="startDate"/><br>
Enter End Date: <input type="date" name="endDate" id="endDate"/><br>
<button id="calculate" type="submit">Calculate</button>
<button id="reset" type="reset">Reset</button>
</form>
Have an event.preventDefault() method in your calculate function. This way you can eliminate resetForm() function.
I'm making a page to easily calculate when I could go home from work. The page should set a start date when loaded. That way I don't have to know when I started working and just open my browser. Then by clicking one of the buttons it should just add some hours.
The example is one of the many things I've tried already. But this one is close I think. Any suggestions are welcome. I didn't include jquery because of the small scale this has.
function reset() {
var date = new Date();
var hour = date.getHours(),
min = date.getMinutes();
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;
var timestamp = hour + ":" + min;
document.getElementById("start_time").value = timestamp;
}
function add_time_76() {
var start = document.getElementById("start_time").value;
document.getElementById("end_time").value = start + 7, 6;
}
function getTotal() {
var start = document.getElementById("start_time").value;
var end = document.getElementById("end_time").value;
document.getElementById("total").value = end - start;
}
<body onload="reset()">
<p>Start time: <input name="start_time" type="time" /></p>
<p>Time to go home: <input name="end_time" type="time" /></p>
<p>Total hours: <input type="text" name="total" readonly></p>
<button onclick="add_time_76()">Add 7,6h</button>
<button onclick="add_time_8()">Add 8h</button>
<br><br>
<button onclick="getTotal()">Calculate Total</button>
<br><br>
<button onclick="reset()">Reset</button>
</body>
The time fields aren't getting populated when I want them to be.
Just add a id to your inputs.
<p>Start time: <input id="start_time" name="start_time" type="time" /></p>
<p>Time to go home: <input id="end_time" name="end_time" type="time" /></p>
<p>Total hours: <input id="total" type="text" name="total" readonly></p>
I was implementing a LiveCart updating method using JavaScript that calculates the total amount. But the JavaScript function is not being invoked. It was working before using Django variables as HTML values. But now even after removing them the function is not being invoked.
function display() {
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var fd = document.getElementById("search-input-in").value;
var sd = document.getElementById("search-input-out").value;
var firstDate = new Date(fd);
var secondDate = new Date(sd);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (oneDay)));
var ind = document.getElementById("search-input-min").value;
var base = document.getElementById("search-input").value;
var button = document.getElementById("search-button");
if (base == "Cottage and Food"
or "Cottage") {
base = 2000;
}
if (base == "Other") {
base = 1500;
}
if (diffDays == 0) {
diffDays = 1;
}
num = base * ind * diffDays;
str1 = "Pay Rs.";
str2 = num.toString();
res = str1.concat(str2);
if (isNaN(num)) {
button.value = "Pay Rs.0";
alert(".........");
} else {
button.value = res;
return num;
}
}
<div class="form-div">
<form class="form-control" action="#" method="post">{% csrf_token %}
<script type="text/javascript" src="{% static 'js/livecart.js' %}">
display();
</script>
<h1 id="search-text">\ Checkout \</h1>
<hr>
<br>
<label class="search-input" for="select-package">Package </label><br>
<select required id="search-input" name="package-type">
<option class="search-input" value={{package}}>{{package}}</option>
</select>
<br>
<label class="search-input" for="in-date">Check-in date </label><br>
<input required id="search-input-in" type="date" name="in-date" value={{inDate}}><br>
<label class="search-input" for="out-date">Check-out date </label><br>
<input required id="search-input-out" type="date" name="out-date" value={{outDate}}><br>
<label class="search-input" for="indiviuals">Indiviuals</label><br>
<input required id="search-input-min" type="number" name="individuals" value="0" onchange="display();"><br>
<hr>
<input id="search-button" type="submit" name="search" value="Pay Rs.0">
</form>
</div>
According to this tutorial.
If src is set, the script content is ignored.
So try this:
<script src="{% static 'js/livecart.js' %}"></script>
<script type="text/javascript">
display();
</script>
You have an issue in the JavaScript code in the if condition (base == "Cottage and Food" or "Cottage"). Replace it with (base == "Cottage and Food" || base == "Cottage").
See the code below.
function display() {
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var fd = document.getElementById("search-input-in").value;
var sd = document.getElementById("search-input-out").value;
var firstDate = new Date(fd);
var secondDate = new Date(sd);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (oneDay)));
var ind = document.getElementById("search-input-min").value;
var base = document.getElementById("search-input").value;
var button = document.getElementById("search-button");
if (base == "Cottage and Food" ||
base == "Cottage") {
base = 2000;
}
if (base == "Other") {
base = 1500;
}
if (diffDays == 0) {
diffDays = 1;
}
num = base * ind * diffDays;
str1 = "Pay Rs.";
str2 = num.toString();
res = str1.concat(str2);
if (isNaN(num)) {
button.value = "Pay Rs.0";
alert(".........");
} else {
button.value = res;
return num;
}
}
<div class="form-div">
<form class="form-control" action="#" method="post">{% csrf_token %}
<script type="text/javascript" src="{% static 'js/livecart.js' %}">
display();
</script>
<h1 id="search-text">\ Checkout \</h1>
<hr>
<br>
<label class="search-input" for="select-package">Package </label><br>
<select required id="search-input" name="package-type">
<option class="search-input" value={{package}}>{{package}}</option>
</select>
<br>
<label class="search-input" for="in-date">Check-in date </label><br>
<input required id="search-input-in" type="date" name="in-date" value={{inDate}}><br>
<label class="search-input" for="out-date">Check-out date </label><br>
<input required id="search-input-out" type="date" name="out-date" value={{outDate}}><br>
<label class="search-input" for="indiviuals">Indiviuals</label><br>
<input required id="search-input-min" type="number" name="individuals" value="0" onchange="display();"><br>
<hr>
<input id="search-button" type="submit" name="search" value="Pay Rs.0">
</form>
</div>
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>
<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>