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>

 268 total views,  1 views today

Categories: HTML

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.