Table of Contents
hide
for Date/Calendar Values in HTML (input type=”date”)
Example : How to create calendar to select desired day, month & year in html page.
<!doctype html>
<html>
<head>
<title>Codershelpline Code of Typical Html Page</title>
</head>
<body>
<form name="form1" id="form2" action="#" method="post">
<center>
<fieldset style="width: 600px">
<legend>Create New Student Account</legend>
<table name="tab1" id="tab2">
<tr>
<td>DOB</td>
<td>:</td>
<td><input type="date" name="DtpDob1" id="DtpDob2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="BtnSave1" id="BtnSave2" value="Save">
<input type="reset" name="BtnReset1" id="BtnReset2" value="Reset">
</td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
</html>Example : How to find/get date difference/no. of days between two dates.
<!DOCTYPE html>
<html>
<head>
<title>Date cal1culation</title>
<script>
function GetDays()
{
if(document.getElementById("todate2").value!="" && document.getElementById("fromdate2").
value!="")
{
var todt = new Date(document.getElementById("todate2").value);
var frdt = new Date(document.getElementById("fromdate2").value);
return parseInt((todt - frdt) / (24 * 3600 * 1000));
}
else
{
return "";
}
}
function cal1()
{
if(document.getElementById("fromdate2"))
{
document.getElementById("numdays2").value=GetDays();
}
}
function cal12()
{
if(document.getElementById("todate2"))
{
document.getElementById("numdays2").value=GetDays();
}
}
</script>
</head>
<body>
<form name="form1">
<p>
From Date:<input type="date" name="fromdate1" id="fromdate2" onchange="cal1()">
To Date :<input type="date" name="todate1" id="todate2" onchange="cal12()">
</p>
Number of days:<input type="text" name="numdays1" id="numdays2" readonly>
</form>
</body>
</html>Example : How to find/get current day’s name in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="dtlabel"></div>
<script>
var totday=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
//var totday=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
function datedaytime()
{
var dt=new Date();
var cday=dt.getDay();
var result=totday[cday];
document.getElementById('dtlabel').innerHTML=result;
}
datedaytime();
</script>
</body>
</html>
--------- OR ---------
<!DOCTYPE html>
<html>
<head>
<title>Days Name</title>
<meta charset="UTF-8">
<script>
function Start()
{
var fdate= new Date();
var day= fdate.getDay();
var day1="";
if(day===0)
{
day1="Sunday";
}
if(day===1)
{
day1="Monday";
}
if(day===2)
{
day1="Tuesday";
}
if(day===3)
{
day1="Wednesday";
}
if(day===4)
{
day1="Thrusday";
}
if(day===5)
{
day1="Friday";
}
if(day===6)
{
day1="Saturday";
}
document.getElementById('TxtDate').value= day1;
}
</script>
</head>
<body onload="Start()">
<div>Today is : <input type="text" id="TxtDate"></div>
</body>
</html>Example : How to display date in different customize format in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="dtlabel"></div>
<script>
var totmonth=["January","February","March","April","May","June","July","August",
"September","October","November","December"];
function datedaytime()
{
var dt=new Date();
var cday=cmonth=dt.getMonth(),cdate=dt.getDate(),cyear=dt.getFullYear();
//var result=+cdate+" "+totmonth[cmonth]+" "+cyear; 21 August 2019
var result=totmonth[cmonth]+" "+cdate+", "+cyear;
document.getElementById('dtlabel').innerHTML=result;
}
datedaytime();
</script>
</body>
</html>
Output :
August21,2019
-------- OR ---------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="dtlabel"></div>
<script>
var totmonth=["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"];
function datedaytime()
{
var dt=new Date();
var cday=cmonth=dt.getMonth(),cdate=dt.getDate(),cyear=dt.getFullYear();
//var result=+cdate+" "+totmonth[cmonth]+" "+cyear; 21 August 2019
var result=cdate+"-"+totmonth[cmonth]+"-"+cyear;
document.getElementById('dtlabel').innerHTML=result;
}
datedaytime();
</script>
</body>
</html>
Output:
21-Aug-2019
-------- OR ---------
<!DOCTYPE html>
<html>
<head>
<title>Customize Date Format</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function Start()
{
var fdate= new Date();
var dd= fdate.getDate();
if(dd<10)
{
dd= "0"+dd;
}
var mm= fdate.getMonth()+1;
if(mm<10)
{
mm="0"+mm;
}
var yy= fdate.getFullYear();
var finaldate= dd +"/"+ mm +"/"+ yy;
document.getElementById('TxtDate2').value= finaldate;
}
</script>
</head>
<body onload="Start()">
<div>
The dd-MM-yyyy format of Date is :
<input type="text" id="TxtDate2">
</div>
</body>
</html>
------------ OR --------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Customize Date Format</title>
</head>
<body>
<p>Date Format in dd-MM-yyyy form is : <span id="dtlabel"></span></p>
<script>
var dt = new Date();
document.getElementById("dtlabel").innerHTML = (("0"+dt.getDate()).slice(-2)) +"-"+
(("0"+ (dt.getMonth()+1)).slice(-2)) +"-"+ (dt.getFullYear());
</script>
</body>
</html>Example : How to display date,time and day (full format) in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date Full Format</title>
</head>
<body>
<div id="dtlabel"></div>
<script>
var totday=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
//var totday=["Sun","Mon","Tues","Wedn","Thu","Fri","Sat"];
var totmonth=["January","February","March","April","May","June","July","August",
"September","October","November","December"];
//var totmonth=["Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sep","Oct","Nov","Dec"];
//var totmonth=["01","02","03","04","05","06","07","08","09","10","11","12"];
function datedaytime()
{
var dt=new Date();
var cday=dt.getDay(),cmonth=dt.getMonth(),cdate=dt.getDate(),cyear=dt.getFullYear();
var chour=dt.getHours(),cmin=dt.getMinutes(),csec=dt.getSeconds(),val;
if(chour==0)
{
val=" AM";
chour=12;
}
else if(chour<12)
{
val=" AM";
}
else if(chour==12)
{
val=" PM";
}
else if(chour>12)
{
val=" PM";
chour=chour-12;
}
if(chour<10)
chour="0"+chour;
if(cmin<=9)
cmin="0"+cmin;
if(csec<=9)
csec="0"+csec;
var result=""+totday[cday]+", "+totmonth[cmonth]+" "+cdate+", "+cyear+"
"+chour+":"+cmin+":"+csec+val+"";
document.getElementById('dtlabel').innerHTML=result;
}
datedaytime();
setInterval(datedaytime,1000);
</script>
</body>
</html>
Output :
Wednesday,August 21,2019 08:07:10 PM
--------- OR ----------
<!DOCTYPE html>
<html>
<head>
<title>Full Date</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function fulldate()
{
document.getElementById('TxtDate').value= Date();
}
</script>
</head>
<body onload="fulldate()">
<div>
Full Date Format is : <input type="text" id="TxtDate" style="width: 500px">
</div>
</body>
</html>for Time Values in HTML (input type=”time”)
Example : How to create time box to fill desired time in an html page.
<!doctype html>
<html>
<head>
<title>Codershelpline Code of Typical Html Page</title>
</head>
<body>
<form name="form1" id="form2" action="#" method="post">
<center>
<fieldset style="width: 600px">
<legend>Create New Student Account</legend>
<table name="tab1" id="tab2">
<tr>
<td>DOB</td>
<td>:</td>
<td><input type="time" name="DtpDobt1" id="DtpDobt2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" name="BtnSave1" id="BtnSave2" value="Save">
<input type="reset" name="BtnReset1" id="BtnReset2" value="Reset">
</td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
</html>Example : How to show current system time in dynamic way in an html page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Time Code</title>
</head>
<body>
<div id="dtlabel"></div>
<script>
function datedaytime()
{
var dt=new Date();
var chour=dt.getHours(),cmin=dt.getMinutes(),csec=dt.getSeconds(),val;
if(chour==0)
{
val=" AM";
chour=12;
}
else if(chour<12)
{
val=" AM";
}
else if(chour==12)
{
val=" PM";
}
else if(chour>12)
{
val=" PM";
chour=chour-12;
}
if(chour<10)
chour="0"+chour;
if(cmin<=9)
cmin="0"+cmin;
if(csec<=9)
csec="0"+csec;
var result=""+chour+":"+cmin+":"+csec+val+"";
document.getElementById('dtlabel').innerHTML=result;
}
datedaytime();
setInterval(datedaytime,1000);
</script>
</body>
</html> 
0 Comments