How to Sum up the table column using javascript

How to Sum up the table column using javascript - javascript

How to sum up the time taken column and display inside total time cell?
Example: If the user select the option from drop down list it will create a table row with start and end time along with time difference. Everything is working fine I need to add additional one more script. The total time should display at the bottom and it has to loop.
var myTime = new Date().toLocaleString(navigator.language, {hour: '2-digit', minute: '2-digit', second: '2-digit'});
function getValue(data)
{
var selectedText = $("#ddselect").find("option:selected").text();
if(selectedText!="None"){
var display = document.getElementById("display");
var newRow = display.insertRow(display.rows.length);
var cell1 = newRow.insertCell(0);
cell1.innerHTML = myTime;
var cell2 = newRow.insertCell(1);
cell2.innerHTML = selectedText;
/* stop time */
var stopTime = new Date().toLocaleString(navigator.language, {hour: '2-digit', minute: '2-digit', second: '2-digit'});
var cell3 = newRow.insertCell(2);
cell3.innerHTML = stopTime;
var timeDifference = timediff(myTime,stopTime);
var cell4 = newRow.insertCell(3);
//cell4.innerHTML = new Date(stopTime.getTime() - myTime.getTime());
cell4.innerHTML = timeDifference;
}
}
function timeobject(t){
a = t.replace('AM','').replace('PM','').split(':');
h = parseInt(a[0]);
m = parseInt(a[1]);
s = parseInt(a[2]);
ampm = (t.indexOf('AM') !== -1 ) ? 'AM' : 'PM';
return {hour:h,minute:m,seconds:s,ampm:ampm};
}
function timediff(start,end){
start = timeobject(start);
end = timeobject(end);
end.hour = (end.ampm === 'PM' && start.ampm !== 'PM' && end.hour < 12) ? end.hour + 12 : end.hour;
hourDiff = Math.abs(end.hour-start.hour);
minuteDiff = end.minute - start.minute;
secondDiff = end.seconds - start.seconds;
if(minuteDiff < 0){
minuteDiff = Math.abs(60 + minuteDiff);
hourDiff = hourDiff - 1;
}
if(secondDiff < 0){
secondDiff = Math.abs(60 + secondDiff);
minuteDiff = minuteDiff - 1;
}
var totDiff = hourDiff+'hr '+ Math.abs(minuteDiff)+"min " + Math.abs(secondDiff) +"sec";
return totDiff;
}
<!DOCTYPE html>
<html>
<body>
<select id="ddselect" onchange="getValue()">
<option value="">None</option>
<option value="1">Initial</option>
<option value="2">Revision</option>
<option value="3">Final</option>
</select>
<table id="display" border="1">
<tr>
<th>Start Time</th>
<th>Activity</th>
<th>Stop Time</th>
<th>Time Taken</th>
</tr>
<table border="1">
<th>Total Time:</th>
<th> </th>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
</html>

I found the solution :)
var myTime = new Date().toLocaleString(navigator.language, {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
function getValue(data) {
var selectedText = $("#ddselect").find("option:selected").text();
if (selectedText != "None") {
var display = document.getElementById("display");
var newRow = display.insertRow(display.rows.length);
var cell1 = newRow.insertCell(0);
cell1.innerHTML = myTime;
var cell2 = newRow.insertCell(1);
cell2.innerHTML = selectedText;
/* stop time */
var stopTime = new Date().toLocaleString(navigator.language, {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
var cell3 = newRow.insertCell(2);
cell3.innerHTML = stopTime;
var timeDifference = timediff(myTime, stopTime);
var cell4 = newRow.insertCell(3);
//cell4.innerHTML = new Date(stopTime.getTime() - myTime.getTime());
cell4.innerHTML = timeDifference;
}
}
var timeArray = [];
function timeobject(t) {
a = t.replace('AM', '').replace('PM', '').split(':');
h = parseInt(a[0]);
m = parseInt(a[1]);
s = parseInt(a[2]);
ampm = (t.indexOf('AM') !== -1) ? 'AM' : 'PM';
return {
hour: h,
minute: m,
seconds: s,
ampm: ampm
};
}
function timediff(start, end) {
start = timeobject(start);
end = timeobject(end);
end.hour = (end.ampm === 'PM' && start.ampm !== 'PM' && end.hour < 12) ? end.hour + 12 : end.hour;
hourDiff = Math.abs(end.hour - start.hour);
minuteDiff = end.minute - start.minute;
secondDiff = end.seconds - start.seconds;
if (minuteDiff < 0) {
minuteDiff = Math.abs(60 + minuteDiff);
hourDiff = hourDiff - 1;
}
if (secondDiff < 0) {
secondDiff = Math.abs(60 + secondDiff);
minuteDiff = minuteDiff - 1;
}
var timeTaken = hourDiff + ':' + Math.abs(minuteDiff) + ":" + Math.abs(secondDiff);
var totDiff = hourDiff + 'hr ' + Math.abs(minuteDiff) + "min " + Math.abs(secondDiff) + "sec";
timeArray.push(timeTaken);
console.log(addTime(timeArray));
return totDiff;
}
function addTime(arr) {
var pad = function(num) {
return ("0" + num).slice(-2);
}
var totalTime = [];
var totalSeconds = 0;
for (var i = 0; i < arr.length; i++) {
totalTime = arr[i].split(":");
var hrs = parseInt(totalTime[0], 10);
var min = parseInt(totalTime[1], 10);
var sec = parseInt(totalTime[2], 10);
var currDurationSec = sec + (60 * min) + (60 * 60 * hrs);
totalSeconds += currDurationSec;
}
var hours = Math.floor(totalSeconds / 3600);
totalSeconds %= 3600;
var minutes = Math.floor(totalSeconds / 60);
var seconds = totalSeconds % 60;
var sumTime = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
document.getElementById('sumoftime').innerHTML = sumTime;
}
<!DOCTYPE html>
<html>
<body>
<select id="ddselect" onchange="getValue()">
<option value="">None</option>
<option value="1">Initial</option>
<option value="2">Revision</option>
<option value="3">Final</option>
</select>
<table id="display" border="1">
<tr>
<th>Start Time</th>
<th>Activity</th>
<th>Stop Time</th>
<th>Time Taken</th>
</tr>
<table border="1">
<th>Total Time:</th>
<th id="sumoftime"> </th>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
</script>
</body>
</html>

Related

Hour is not showing in 00 format

I have this code:
<span id="live_time">Server Time: <strong><?php echo date('h:i:s A'); ?></strong></span>
<script type="text/javascript">
// use php to get the server time
var serverdate = new Date('<?php echo date('F d, Y h:i:s'); ?>');
function refresh_time(){
serverdate.setSeconds(serverdate.getSeconds() + 1);
var hh=serverdate.getHours();
var m=serverdate.getMinutes();
var s=serverdate.getSeconds();
m=checkTime(m);
s=checkTime(s);
var dd = " AM";
var h = hh;
if (h >= 12) {
h = hh-12;
dd = " PM";
}
if (h == 0) {
h = 12;
}
var output = h+":"+m+":"+s+""+dd;
document.getElementById("live_time").innerHTML = 'Server Time: <strong>'+output+'</strong>';
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
window.onload = function(){
setInterval("refresh_time()", 1000);
}
</script>
When I access page first time it show me 07:11:14 AM after one second time become 7:11:15 AM How I can output at every refresh in H format? like 07:11:15 ?

just add the 0 manually:
var date = new Date();
currentHours = date.getHours();
var currentHours2 = 6;
var currentHours3 = 18;
currentHours = ("0" + currentHours).slice(-2);
currentHours2 = ("0" + currentHours2).slice(-2);
currentHours3 = ("0" + currentHours3).slice(-2);
console.log(currentHours)
console.log(currentHours2)
console.log(currentHours3)

You can use ES8 padStart() to pad the hour with 0.
var h = "5";
console.log(h.padStart(2, "0"));
Or if not use the older syntax
var h = "5";
console.log(h.length == 1 ? "0"+h : h);

Print Time Slot In JavaScript

The problem is that when I'm taking the current time using localdate(this is my start time) variable and I'm also taking end time so I print the time between this values with 15 min of increasing time.
Example: current time is 13:04 so the further time slots will be 13:19, 13:34 and so on till end time.
function ShowLocalDate() {
var time1 = new Date();
var time2 = new Date();
var dNow = new Date();
var localdate = dNow.getHours() + ':' + dNow.getMinutes();
//meeting length
var meetingLength = parseInt('15');
//start time
var startTime = localdate
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
//end time
var endTime = '11:00 PM';
var endHour = endTime.split(':')[0];
var endMin = endTime.split(':')[1].replace(/AM|PM/gi, '');
//Check if start time is PM and adjust hours to military
if (startTime.indexOf('PM') > -1) {
if (startHour != 12) {
startHour = parseInt(startHour) + 12;
} else {
startHour = parseInt(startHour);
}
console.log(startHour);
}
//Check if end time is PM and adjust hours to military
if (endTime.indexOf('PM') > -1) {
endHour = parseInt(endHour) + 12;
console.log(endHour);
}
//Date API start time
time1.setHours(parseInt(startHour));
time1.setMinutes(parseInt(startMin));
//Date API end time
time2.setHours(parseInt(endHour));
time2.setMinutes(parseInt(endMin));
//Adding meeting length to start time, this value will be use for end time
time1.setMinutes(time1.getMinutes() + meetingLength);
while (time1 < time2) {
$('#etime').append('<option value="' + time1 + '">' + time1 + '</option>');
time1.setMinutes(time1.getMinutes() + meetingLength);
}
}
ShowLocalDate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="etime" id="etime">
<option value="">--Select end time--</option>
</select>
</td>
</tr>
</tr>
JSFiddle: https://jsfiddle.net/6n458ze9/18/
But I want that, suppose the start time means current time is 13:04 so the next time will be 13:20 not 13:19 and one more time is 13:35 not 13:34, till ending time.
End time will be 11:00 PM(this is fixed).
Thank you in advance.

If you want to round up time to 05, 10, 15 etc minutes you can easily add few more minutes to original time until you get minutes mod by 5 equals zero, something like this
//Adding meeting length to start time, this value will be use for end time
var endTime = time2.getMinutes() + meetingLength;
while (endTime % 5 != 0)
endTime++
time1.setMinutes(endTime);

You can just round off the start time in your code.
in below solution i am doing the same.
hope this helps
function getRoundOffDate() {
var now = new Date();
var minutes = now.getMinutes();
minutes += 5 - minutes % 5;
if (minutes == 60) {
now.setHours(now.getHours() + 1);
now.setMinutes(0);
} else {
now.setMinutes(minutes);
}
return now;
}
function ShowLocalDate() {
var time1 = new Date();
var time2 = new Date();
var dNow = getRoundOffDate();
var localdate = dNow.getHours() + ':' + dNow.getMinutes();
//meeting length
var meetingLength = parseInt('15');
//start time
var startTime = localdate
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
//end time
var endTime = '11:00 PM';
var endHour = endTime.split(':')[0];
var endMin = endTime.split(':')[1].replace(/AM|PM/gi, '');
//Check if start time is PM and adjust hours to military
if (startTime.indexOf('PM') > -1) {
if (startHour != 12) {
startHour = parseInt(startHour) + 12;
} else {
startHour = parseInt(startHour);
}
console.log(startHour);
}
//Check if end time is PM and adjust hours to military
if (endTime.indexOf('PM') > -1) {
endHour = parseInt(endHour) + 12;
console.log(endHour);
}
//Date API start time
time1.setHours(parseInt(startHour));
time1.setMinutes(parseInt(startMin));
//Date API end time
time2.setHours(parseInt(endHour));
time2.setMinutes(parseInt(endMin));
//Adding meeting length to start time, this value will be use for end time
time1.setMinutes(time1.getMinutes() + meetingLength);
while (time1 < time2) {
$('#etime').append('<option value="' + time1 + '">' + time1 + '</option>');
time1.setMinutes(time1.getMinutes() + meetingLength);
}
}
ShowLocalDate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="etime" id="etime">
<option value="">--Select end time--</option>
</select>
</td>
</tr>
</tr>

If end time is fixed to 11:00PM, then you can start from backwards
function ShowLocalDate() {
var time1 = new Date();
var time2 = new Date();
var dNow = new Date();
var localdate = dNow.getHours() + ':' + dNow.getMinutes();
//meeting length
var meetingLength = parseInt('15');
//start time
var startTime = localdate
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
//end time
var endTime = '11:00 PM';
var endHour = endTime.split(':')[0];
var endMin = endTime.split(':')[1].replace(/AM|PM/gi, '');
//Check if start time is PM and adjust hours to military
if (startTime.indexOf('PM') > -1) {
if (startHour != 12) {
startHour = parseInt(startHour) + 12;
} else {
startHour = parseInt(startHour);
}
console.log(startHour);
}
//Check if end time is PM and adjust hours to military
if (endTime.indexOf('PM') > -1) {
endHour = parseInt(endHour) + 12;
console.log(endHour);
}
//Date API start time
time1.setHours(parseInt(startHour));
time1.setMinutes(parseInt(startMin));
//Date API end time
time2.setHours(parseInt(endHour));
time2.setMinutes(parseInt(endMin));
time2.setSeconds(0);
//Adding meeting length to start time, this value will be use for end time
time1.setMinutes(time1.getMinutes() + meetingLength);
while (time1 < time2) {
$('#etime option:first').after('<option value="' + ('00' + time2.getHours()).slice(-2) + ':' + ('00' + time2.getMinutes()).slice(-2) + '">' + ('00' + time2.getHours()).slice(-2) + ':' + ('00' + time2.getMinutes()).slice(-2) + '</option>');
time2.setMinutes(time2.getMinutes() - meetingLength);
}
$('#etime option:first').after('<option value="' + ('00' + time1.getHours()).slice(-2) + ':' + ('00' + time1.getMinutes()).slice(-2) + '">' + ('00' + time1.getHours()).slice(-2) + ':' + ('00' + time1.getMinutes()).slice(-2) + '</option>');
}
ShowLocalDate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="etime" id="etime">
<option value="">--Select end time--</option>
</select>
</td>
</tr>
</tr>

How to reset drop down if value change?

I'm working on my project where I have three drop down boxes. User can pick Start time, Meeting Length and End time. My function works fine but I'm missing one more thing, so If user select all of three drop downs they will get all end times in last drop down but now I want if they change meeting length or start time, my end time drop box should give them values with the valid records. Current code works fine if they select everything once but if they change start time or meeting length my end time is still the same.
Here is my jsfiddle with the working example:
https://jsfiddle.net/dmilos89/vy0yy7h9/4/
I tried to reset my function with something like this:
$('#meet_leng').on('chnage');
inside of my existing function but that did not help. If anyone knows how I can refresh my function each time after I change values in my start time and meeting length drop downs please let me know.
$(function() {
//This loop populate values fro meeting length dropdown
for (var i = 5; i <= 60; i += 5) {
$('#meet_leng').append('<option value="' + i + '">' + i + ' min' + '</option>')
}
//Populate start time dropdown with values
for (var i = 700; i <= 1700; i += 15) {
var mins = i % 100;
var hours = parseInt(i / 100);
if (mins > 45) {
mins = 0;
hours += 1;
i = hours * 100;
}
var AmPm = " AM";
//set hours 12 to PM
if (hours == 12) {
AmPm = " PM";
}
//format all hours greater than to PM
if (hours > 12) {
hours = hours - 12;
AmPm = " PM";
}
//populate stime with values
$('#stime').append('<option value="' + ('0' + (hours)).slice(-2) + ':' + ('0' + mins).slice(-2) + AmPm + '">' + ('0' + (hours)).slice(-2) + ':' + ('0' + mins).slice(-2) + AmPm + ' </option>')
}
//onChange function set end time based on start time and meeting length
$('#meet_leng').on('change', function() {
if ($('#stime').val() == '0') {
alert('You have to pick start time first.')
} else {
if ($('#meet_leng').val() == '0') {
$('#hideSlots').hide();
} else {
//convert variables for start and end time to new Date
var time1 = new Date();
var time2 = new Date();
//meeting length converts to int
var meetingLength = parseInt($('#meet_leng').val());
//start time split into hours and minutes
var startTime = $('#stime').val();
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');
//end time split into hours and minutes
var endTime = '05:00 PM';
var endHour = endTime.split(':')[0];
var endMin = endTime.split(':')[1].replace(/AM|PM/gi, '');
//Check if start time is PM and adjust hours to military
if (startTime.indexOf('PM') > -1) {
if (startHour != 12) {
startHour = parseInt(startHour) + 12;
} else {
startHour = parseInt(startHour);
}
}
//Check if end time is PM and adjust hours to military
if (endTime.indexOf('PM') > -1) {
endHour = parseInt(endHour) + 12;
}
//Date API start time set hours and minutes
time1.setHours(parseInt(startHour));
time1.setMinutes(parseInt(startMin));
//Date API end time set hours and minutes
time2.setHours(parseInt(endHour));
time2.setMinutes(parseInt(endMin));
//Adding meeting length to start time
time1.setMinutes(time1.getMinutes() + meetingLength);
//while loop checks for time values and increment end time for meeting interval
while (time1 <= time2) {
var amPm = " AM";
var hourEnd = time1.getHours();
var minEnd = time1.getMinutes();
if (hourEnd >= 12) {
hourEnd = (hourEnd == 12) ? hourEnd : hourEnd - 12;
amPm = " PM";
}
if (hourEnd == 24) {
hourEnd = 12;
}
minEnd = ('' + minEnd).length > 1 ? minEnd : '0' + minEnd;
$('#etime').append('<option value="' + hourEnd + ':' + minEnd + ' ' + amPm + '">' + hourEnd + ':' + minEnd + ' ' + amPm + '</option>');
time1.setMinutes(time1.getMinutes() + meetingLength);
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<th>Start Time:</th>
<td>
<select name="stime" id="stime">
<option value="0">--Select start time--</option>
</select>
</td>
</tr>
<br/>
<tr>
<th>Metting Length:</th>
<td>
<select name="meet_leng" id="meet_leng">
<option value="0">--Select length--</option>
</select>
</td>
</tr>
<br/>
<tr>
<th>End Time:</th>
<td>
<select name="etime" id="etime" />
<option value="0">--Select end time--</option>
</select>
</td>
</tr>

You want to either set the value:
$('#etime').val("new value");
or select the index:
$('#etime').get(0).selectedIndex = 1;
remember that indexes start at 0.
you would do this after the while loop that populates all the end time options.

Please try below code
$('#meet_leng').on('chnage',function(){
$('#etime').val("FirstIndexValue")
});
//FirstIndexValue= #etime default value

How to set Label Text property based on data selection from DropDownlist using Javascript in Asp.net

I am having two Label controls and a dropdownlist on my web form. I am displaying current date in Label1 and I want to display Expiry Date in Label2 based on selection of dropdownlist. What I am trying to do is I want to display expiry date within Label2 on selecting data from dropdownlist i.e. if "Upto 7 Days" then 7Days will be added to current date and the new date will be displayed within Label2.
My aspx page-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
$("#ddlvalid").change(function () {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 7;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
else if (selectvalid == "Upto 15 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 15;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
else if (selectvalid == "Upto 30 Days") {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
var valdate = 30;
var expdate = d.setDate(day + valdate);
document.getElementById('lblenddt').innerHTML = expdate;
}
});
window.onload = function show() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById('lblenqmdon').innerHTML = output;
};
</script>
<body>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Enquiry Made On:</td>
<td>
<label id="lblenqmdon" runat="server"></label>
</td>
</tr>
<tr>
<td>Enquiry Validity:</td>
<td><asp:DropDownList ID="ddlvalid" runat="server">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Enquiry Valid Upto:</td>
<td>
<label id="lblenddt" runat="server"></label>
</td>
</tr></table>
</div></body>
</html>
My Javascript code is not working. Please guide me where I am doing wrong?

Try This
<script type="text/javascript">
function findDate() {
var selectvalid = document.getElementById("<%=ddlvalid.ClientID %>").value;
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 7;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
else if (selectvalid == "Upto 15 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 15;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
else if (selectvalid == "Upto 30 Days") {
var str = document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML;
var parts = str.split('/');
var month = parts[0] && parseInt(parts[0], 10);
var day = parts[1] && parseInt(parts[1], 10);
var year = parts[2] && parseInt(parts[2], 10);
var duration = 30;
if (day <= 31 && day >= 1 && month <= 12 && month >= 1) {
var expiryDate = new Date(year, month - 1, day);
expiryDate.setDate(expiryDate.getDate() + duration);
var day = ('0' + expiryDate.getDate()).slice(-2);
var month = ('0' + (expiryDate.getMonth() + 1)).slice(-2);
var year = expiryDate.getFullYear();
document.getElementById("<%=lblenddt.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
}
}
</script>
<script type="text/javascript">
window.onload = function () {
getDate();
};
function getDate() {
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
document.getElementById("<%=lblenqmdon.ClientID %>").innerHTML = month + "/" + day + "/" + year;
}
</script>
AND in Form
<asp:DropDownList ID="ddlvalid" runat="server" onchange="javascript:findDate();">
<asp:ListItem>Select Validity</asp:ListItem>
<asp:ListItem>Upto 7 Days</asp:ListItem>
<asp:ListItem>Upto 15 Days</asp:ListItem>
<asp:ListItem>Upto 30 Days</asp:ListItem>
</asp:DropDownList>

I managed to do the same like this-$(function () {
<script type="text/javascript">
$("#ddlvalid").change(function () {
var selectvalid = $("#ddlvalid option:selected").text();
if (selectvalid == "Select Validity") {
alert("Please Select Validity");
}
else if (selectvalid == "Upto 7 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 7);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
else if (selectvalid == "Upto 15 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 15);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
else if (selectvalid == "Upto 30 Days") {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 30);
var dd = tomorrow.getDate();
var mm = tomorrow.getMonth() + 1;
var y = tomorrow.getFullYear();
var output = tomorrow.getFullYear() + '/' + (mm < 10 ? '0' : '') + mm + '/' + (dd < 10 ? '0' : '') + dd;
document.getElementById('lblenddt').innerHTML = output;
}
});
window.onload = function show() {
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate();
var output = d.getFullYear() + '/' + (month < 10 ? '0' : '') + month + '/' + (day < 10 ? '0' : '') + day;
document.getElementById('lblenqmdon').innerHTML = output;
};
});
</script>

How to clear div content onclick? [duplicate]

This question already has answers here:
How do I clear the content of a div using JavaScript? [closed]
(2 answers)
Closed 7 years ago.
I'm making a calendar purely from Javascript, but when then previous and next months are shown current content is still present. It should replace the div content. Also, current date should be the only one with red font displayed.
<html>
<head><script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var time = now.toLocaleTimeString();
var date = now.getDate();
now = null;
var calElem = document.getElementById("cal");
function febDays(year) {
if (year % 4 == 0) {
return 29;
} else {
return 28;
}
}
function getDays(month, year) {
var days = new Array(12);
days[0] = 31;
days[1] = febDays(year);
days[2] = 31;
days[3] = 30;
days[4] = 31;
days[5] = 30;
days[6] = 31;
days[7] = 31;
days[8] = 30;
days[9] = 31;
days[10] = 30;
days[11] = 31;
return days[month];
}
function getMonthName(month) {
var mn = new Array(12);
mn[0] = "January";
mn[1] = "February";
mn[2] = "March";
mn[3] = "April";
mn[4] = "May";
mn[5] = "June";
mn[6] = "July";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function monthName(month) {
var mn = new Array(12);
mn[0] = "Jan";
mn[1] = "Feb";
mn[2] = "Mar";
mn[3] = "Apr";
mn[4] = "May";
mn[5] = "Jun";
mn[6] = "Jul";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function setCal() {
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
function previousMonth() {
document.getElementById('cal').innerHTML = "";
month--;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "January"){
year--;
month = 11;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function nextMonth() {
document.getElementById('cal').innerHTML = "";
month++;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "December"){
year++;
month = 0;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function drawCal(startDay, lastDate, date, monthName, year, month) {
var headerHeight = 50;
var border = 2;
var cellspacing = 4;
var headerSize = "+3";
var colWidth = 60;
var dayCellHeight = 25;
var cellHeight = 40;
var todayColor = "red";
var text = "";
text += '<div id="cal">';
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>';
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>';
text += '<FONT SIZE=' + headerSize + '>';
text += monthName + ' ' + year;
text += '</FONT>';
text += '</TH>';
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
var closeCol = '</TD>';
var weekDay = new Array(7);
weekDay[0] = "Sunday";
weekDay[1] = "Monday";
weekDay[2] = "Tuesday";
weekDay[3] = "Wednesday";
weekDay[4] = "Thursday";
weekDay[5] = "Friday";
weekDay[6] = "Saturday";
text += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';
var digit = 1;
var curCell = 1;
for (var row = 1; row <= Math.ceil((lastDate + startDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break;
if (curCell < startDay) {
text += '<TD></TD>';
curCell++;
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>';
text += '<FONT COLOR="' + todayColor + '">';
text += digit + " ";
text += '</FONT>';
text += '</TD>';
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>';
digit++;
}
}
text += '</TR>';
}
text += '</TABLE>';
text += '</CENTER>';
text += '</div>';
text += '<button onclick="previousMonth()"><</button>';
text += '<button onclick="nextMonth()">></button>';
document.write(text);
}
</script></head>
<body onload="setCal()">
</body>
</html>

I think it will be better if you can use a container element and set its content rather than to use document.write()
<html>
<head><script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var time = now.toLocaleTimeString();
var date = now.getDate();
now = null;
var calElem = document.getElementById("cal");
function febDays(year) {
if (year % 4 == 0) {
return 29;
} else {
return 28;
}
}
function getDays(month, year) {
var days = new Array(12);
days[0] = 31;
days[1] = febDays(year);
days[2] = 31;
days[3] = 30;
days[4] = 31;
days[5] = 30;
days[6] = 31;
days[7] = 31;
days[8] = 30;
days[9] = 31;
days[10] = 30;
days[11] = 31;
return days[month];
}
function getMonthName(month) {
var mn = new Array(12);
mn[0] = "January";
mn[1] = "February";
mn[2] = "March";
mn[3] = "April";
mn[4] = "May";
mn[5] = "June";
mn[6] = "July";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function monthName(month) {
var mn = new Array(12);
mn[0] = "Jan";
mn[1] = "Feb";
mn[2] = "Mar";
mn[3] = "Apr";
mn[4] = "May";
mn[5] = "Jun";
mn[6] = "Jul";
mn[7] = "August";
mn[8] = "September";
mn[9] = "October";
mn[10] = "November";
mn[11] = "December";
return mn[month];
}
function setCal() {
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
function previousMonth() {
document.getElementById('cal').innerHTML = "";
month--;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "January"){
year--;
month = 11;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function nextMonth() {
document.getElementById('cal').innerHTML = "";
month++;
var monthName = getMonthName(month);
var firstDay = new Date(year, month, 1);
var startDay = firstDay.getDay();
firstDay = null;
var days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
if (monthName === "December"){
year++;
month = 0;
monthName = getMonthName(month);
firstDay = new Date(year, month, 1);
startDay = firstDay.getDay();
firstDay = null;
days = getDays(month, year);
drawCal(startDay + 1, days, date, monthName, year, month);
}
}
function drawCal(startDay, lastDate, date, monthName, year, month) {
var headerHeight = 50;
var border = 2;
var cellspacing = 4;
var headerSize = "+3";
var colWidth = 60;
var dayCellHeight = 25;
var cellHeight = 40;
var todayColor = "red";
var text = "";
text += '<div id="cal">';
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>';
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>';
text += '<FONT SIZE=' + headerSize + '>';
text += monthName + ' ' + year;
text += '</FONT>';
text += '</TH>';
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
var closeCol = '</TD>';
var weekDay = new Array(7);
weekDay[0] = "Sunday";
weekDay[1] = "Monday";
weekDay[2] = "Tuesday";
weekDay[3] = "Wednesday";
weekDay[4] = "Thursday";
weekDay[5] = "Friday";
weekDay[6] = "Saturday";
text += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';
var digit = 1;
var curCell = 1;
for (var row = 1; row <= Math.ceil((lastDate + startDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break;
if (curCell < startDay) {
text += '<TD></TD>';
curCell++;
} else {
if (digit == date) {
text += '<TD HEIGHT=' + cellHeight + '>';
text += '<FONT COLOR="' + todayColor + '">';
text += digit + " ";
text += '</FONT>';
text += '</TD>';
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>';
digit++;
}
}
text += '</TR>';
}
text += '</TABLE>';
text += '</CENTER>';
text += '</div>';
text += '<button onclick="previousMonth()"><</button>';
text += '<button onclick="nextMonth()">></button>';
document.getElementById('calc').innerHTML=text;
}
</script></head>
<body onload="setCal()">
<div id="calc"></div>
</body>
</html>

if you want to clear any HTML element you would just
DO NOT use document.write() it clears the whole page.
It's the document.write() It always stays there no matter what. Try not to use document.write()
use createElement('div') instead. It's much more clean, you can keep track of the elements, and they're static, unless you want them to change. everything is under your control.
document.getElementById('Clear_This_Div_id').innerHTML = '';
This will usually clear the element

Without changing much of the other part of your code, you can just change the
document.write(text);
to
document.getElementsByTagName('body')[0].innerHTML = text;
This will clear off the previous content before putting the new one, since you are putting in the body every time.

We Keep Coding

JavaScript is the programming language of the Web.

How to Sum up the table column using javascript - javascript

Related

Hour is not showing in 00 format

Print Time Slot In JavaScript

How to reset drop down if value change?

How to set Label Text property based on data selection from DropDownlist using Javascript in Asp.net

How to clear div content onclick? [duplicate]

Categories

Resources