Single calendar with browse to year & month with date selection

We can select any date from the calendar and pass the value to a text field. To navigate to any future or previous date our calendar should have links at the top. We can move to previous or next month and same way we can move to previous or next year.

We have seen previously how to display a calendar in a layer.
Then we have seen how to pass the date value to a text field.

Variables used

chm : change in Month
chy : Change in Year
These two variables are changed while navigating to different months or years. For every step it takes either -1 or + 1 based on the link clicked by user. To go to previous month chm stores the value as -1 and to go to next year chy stores +1.

We pass the presently displayed month and year to the cal function. Inside the function a new date object is created after incorporating the change in month and year.

function cal(chm,chy,month,year){

month=month + chm;

year=year + chy;

dt=new Date(year, month, 01);// Date object with change in year and month

...........

From this date object we get the year and month. Here to display full month name we use another function show_month() . You can read more displaying month name here .

We will develop the top navigational link by using change in month ( chm ) , change in year ( chy ). Each user click will pass these variables to the cal function again to display monthly calendar.

var str1="<td><a href=# onclick=show_cal(0,-1," + display_month + "," + year +");><< </a> </td><td>   <a href=# onclick=show_cal(-1,0," + display_month + "," + year + ");><</a> </td><td> "+ display_month_name +"</td><td> " + year + " </td><td align=right><a href=# onclick=show_cal(1,0," + display_month + "," + year + ");>></a> </td><td> <a href=# onclick=show_cal(0,1," + display_month + "," + year + ");>>></a></td>";

Now we can display each days with a link to post back the date value to the text area. After posting the date value we can call close_call() function to hide the calendar.

str = str + "<td><a href=# onclick=return_value(" + return_month + "," + dy + ","+ year + ");> "+ dy +"</a></td>";

Demo of Calendar with year month link

Here is the complete code of the demo.

<html>
<head>
<title>Demo of Date Transferring from Calendar to text field</title>
<style type="text/css">
div {
display: none;
}
table.main {
  width: 100%;
	}
table.main td {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	background-color: #ffffcc;
    font-family: verdana,arial, helvetica,  sans-serif;
    font-size: 11px;
}
table.main th {
	border-width: 1px 1px 1px 1px;
	padding: 0px 0px 0px 0px;
	background-color: #ffccff;

}
table.main a{TEXT-DECORATION: none;}

</style>
<script language="javascript" src="date-project-calendar4-demo.js"></script>
<script language="JavaScript">

//// Collect all date variables /////////////
function cal(chm,chy,month,year){
month=month + chm;
year=year + chy;
dt=new Date(year, month, 01);// Date object with change in year and month
var year=dt.getFullYear(); // read the current year
var display_month=dt.getMonth();
var return_month=display_month +1; 
var display_month_name=show_month(display_month);
var first_day=dt.getDay(); //, first day of present month

dt.setMonth(month+1,0); // Set to next month and one day backward.
var last_date=dt.getDate(); // Last date of present month
///// End of date variables ////////////

var dy=1; // day variable for adjustment of starting date.

// Top display Links with present Month & year // 
var str1="<td><a href=# onclick=show_cal(0,-1," + display_month + "," + year +");><< </a> </td><td>   <a href=# onclick=show_cal(-1,0," + display_month + "," + year + ");><</a> </td><td> "+ display_month_name +"</td><td> " + year + " </td><td align=right><a href=# onclick=show_cal(1,0," + display_month + "," + year + ");>></a> </td><td> <a href=# onclick=show_cal(0,1," + display_month + "," + year + ");>>></a></td>";
// End of top display links /////

// Display calendar body ////
var str = '';
str = "<table class='main'><tr> " + str1 + "  <td  align=right>";
str += " <a href=# onclick="close_cal();";>X</a></td></tr>";  // adding the close button. 
str +="<tr><th>Su</th><th>Mon</th><th>Tue</th><th>Wed</th>";
str +="<th>Thu</th><th>Fri</th><th>Sat</th></tr>";

for(i=0;i<=41;i++){
if((i%7)==0){str = str + "</tr><tr>";} // if week is over then start a new line
if((i>= first_day) && (dy<= last_date)){
str = str + "<td><a href=# onclick=return_value(" + return_month + "," + dy + ","+ year + ");> "+ dy +"</a></td>";
dy=dy+1;
}else {str = str + "<td>*</td>";} // Blank dates.
} // end of for loop

str = str + "</tr></table>";
//alert(str);
return str; 
}

function show_cal(chm, chy,month,year) {
document.getElementById('sub').innerHTML = cal(chm,chy,month,year);
document.getElementById('sub').style.display = 'inline';
}
//// Stop displaying calendar ///////////
function close_cal() {
document.getElementById('sub').style.display = 'none';
}
// 
function start_cal() {
var dt_object=new Date();
var month=dt_object.getMonth();
var year=dt_object.getFullYear();
show_cal(0,0,month,year);
}

function return_value(month,dt,year){
document.getElementById('t1').value=month + '/' + dt + '/' + year   ;
close_cal();
}

</script>

</head>
<body >

<form name=f1 action=date-project-calendar4ck.php method=post><input type=hidden id=h1><input type=text name=t1 id=t1> 
 <img src='../images/calendar.jpg'  onClick="start_cal();";>  
<div id="sub" style="position: absolute;top: 40px;left: 5px;z-index:1;"></div>

<input type=submit value=Submit>
</form>
</body>
</html>

Two calendars connected to two different input boxes

We will try with two two calendars connected to two different text boxes. Here date is taken to the text boxes from respective calendars. Here both the calendars use the common code with respective parameters to manage the display.

We will be passing the button value as variable bt and calendar number as sub to identify and pass the data to respective input boxes.

Demo with two calendar layers & input boxes

Independent Calendars

Note that these two calendars shown here are not linked and independent to each other. Mean you can select any date for each calendar. We can't use this for start date or end date where 2nd calendar has to allow click beyond the selected date of the first list box.

If you are searching for linked calendars where 2nd calendar allows date selection beyond the selected dates of first then read our next tutorial.

Demo with two interlinked calendar to work on range of dates

How to integrate this calendar in your script

You must be interested in integrating this calendar in your existing form or script. Here it is.

Open the caledar4.htm file and copy the Style code kept at the top inside head tags. You can integrate with your style sheet or add your own style.

<style type="text/css">
.....
.....
</style>

Then to integrate JavaScript code add this line within body tag or head tag. It should be above your HTML form.

<script language="javascript" src="date-picker4.js"></script>

Managing your form

You can just copy the following code taken from calendar4.htm file to your form. Place them before </form> tag. This will display text box , calendar icon and the div layer to display the calendar.

<input type=text name=t1 id=t1> 
 <img src='calendar.jpg'  onClick="start_cal();";>  
<div id="sub" style="position: absolute;top: 40px;left: 5px;z-index:1;"></div>

If you are using your own textbox with different name then you have to change that name inside JavaScript function kept at date-picker4.js file. Towards the end you will find function return_value() used to return the date value to text box.

function return_value(month,dt,year){
document.getElementById('t1').value=month + '/' + dt + '/' + year   ;
close_cal();
}

Change the text box name t1 to your name in above code.
Date Reference All Date Projects

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com