Collecting date and Month value of a calendar to a text field

We have seen how to display calendar in a layer. Next we will try to use this calendar to input a date to a text field. In many applications we have to input a date in a text field. It is better if we display a calendar and ask the user to select a date by clicking the date in the calendar. Once the date is clicked then the date value will be transferred to text field.

It is recommended to read how to display calendar in a layer tutorial first.
We will modify the basic tutorial and here are the changes to be added to basic tutorial.

Date with onClick event

We will display date field by adding hyper link to each date. OnClick event of the date will trigger a function which will transfer the date data to text field. First let us understand the date display.

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

We have seen in the above line that when user clicks the date , then it triggers one function return_value. Inside this function we assign the corresponding date value to the text box. Here is the code.

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

demo of getting calendar date in a text field
Note that the month return is starting from 0 to 11 ( not 12 ), read more on getMonth() The full code of this page is here

<html>
<head>
<title>Demo of Date Transferring from Calendar to text field</title>
<style type="text/css">
div {
display: none;
}
</style>
<script language="JavaScript">
var dt= new Date();
var month=dt.getMonth(); // read the current month
var year=dt.getFullYear(); // read the current year

dt=new Date(year, month, 01);//Year , month,date format

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

var dy=1; // day variable for adjustment of starting date.
var str = "<table bgcolor='#f1f1f1'><tr><td colspan=7 align=right>";
str += " <a href=# onclick="setVisibility('calendar1','none');";>X</a></td></tr>";
str +="<tr><td>Su</td><td>Mon</td><td>Tue</td><td>Wed</td>";
str +="<td>Thu</td><td>Fri</td><td>Sat</td></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(month," + dy + ",year);';> "+ dy +"</td>";

dy=dy+1;
}else {str = str + "<td>*</td>";} // Blank dates.
} // end of for loop

str = str + "</tr></table>";

function setVisibility(id, visibility) {
document.getElementById(id).innerHTML = str;
document.getElementById(id).style.display = visibility;
}

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

</script>

</head>
<body >

 You can display calendar of present month by clicking this small box<input type=text id=t1> ->
 <img src='../images/calendar.jpg'  onClick="setVisibility('calendar1', 'inline');";>  
<div id="calendar1" style="position: absolute;z-index:1;"></div>
</body>
</html>

Date Reference All Date Projects

Subscribe to our YouTube Channel here

Date Transferring from Calendar to text field.

Date with onClick event

Subscribe