How to build calander

Expert:Basavaraj
My requirement is
When user is registering he should enter his DOB just by selecting the date month and year for that i should provid him a calender right side of that feild how to do it please its urgent

Answers

hi

<html>
<title>registration form in jsp</title>
<head>

<style>

A:hover {text-decoration: none;

border: 0px;

font-size:14pt;

color: #2d2b2b; }

</style>

<link rel="stylesheet" type="text/css" href="datepicker.css"/>

<script type="text/javascript" src="datepicker.js"></script>

</head>

<body>
<center>

<table border="1" width="650px" bgcolor="bluelight">
<tr>
<td width="100%">
<form method="POST" action="RegistrationAction.jsp" >

<h2 align="center">User Registration form</h2>
<table border="1" width="100%" cellspacing="0" cellpadding="0">

<tr>
<td width="50%"><b>User Name:</b></td>
<td width="50%"><input type="text" name="username" size="20"/> </td>
</tr>
<tr>
<td width="50%"><b>Last Name:</b></td>
<td width="50%"><input type="text" name="lastname" size="20"/> </td>
</tr>
<tr>
<td width="50%"><b>Email:</b></td>
<td width="50%"><input type="text" name="email" size="30"/> </td>
</tr>
<tr>
<td width="50%"><b>Date of Birth:</b></td>
<td width="50%"><input type="text" name="dob" size="20">
<input type=button value="Select Date" onclick="displayDatePicker('dob', this);">
</td>
</tr>
<tr>
<td width="50%"><b>Country :</b></td>
<td width="50%"><input type="text" name="country" size="20"></td>
</tr>
<tr>
<td width="50%"><b>State :</b></td>
<td width="50%"><input type="text" name="state" size="20"></td>
</tr>
</table>
<center><p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></center></p>

</form>
</td>
</tr>
</table>
</center>
</body>
</html>

<%@ page language="java" import="java.sql.*" %>

<%
Connection con = null;
String url = "jdbc:mysql://192.168.10.211:3306/";;
String db = "amar";
String driver = "com.mysql.jdbc.Driver";
String userName ="amar";
String password="amar123";
try{
Class.forName(driver);
con = DriverManager.getConnection(url+db,userName,password);
try{
Statement st = con.createStatement();
String id=request.getParameter("userid");
String username=request.getParameter("username");
String lastname=request.getParameter("lastname");
String email=request.getParameter("email");
String dob=request.getParameter("dob");
String country=request.getParameter("country");
String state=request.getParameter("state");

int val = st.executeUpdate("insert Userdetail values(userid,'"+username+"','"+lastname+"','"+email+"','"+dob+"','"+country+"','"+state+"')");

con.close();
out.println("successfully insert data into database!");

}
catch (SQLException ex){
System.out.println("SQL statement is not executed!");
}
}
catch (Exception e){
e.printStackTrace();
}

%>

body {

font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;

font-size: .8em;

}

/* the div that holds the date picker calendar */

.dpDiv {

}

/* the table (within the div) that holds the date picker calendar */

.dpTable {

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-size: 12px;

text-align: center;

color: #505050;

background-color: #ece9d8;

border: 1px solid #AAAAAA;

}

/* a table row that holds date numbers (either blank or 1-31) */

.dpTR {

}

/* the top table row that holds the month, year, and forward/backward buttons */

.dpTitleTR {

}

/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */

.dpDayTR {

}

/* the bottom table row, that has the "This Month" and "Close" buttons */

.dpTodayButtonTR {

}

/* a table cell that holds a date number (either blank or 1-31) */

.dpTD {

border: 1px solid #ece9d8;

}

/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */

.dpDayHighlightTD {

background-color: #CCCCCC;

border: 1px solid #AAAAAA;

}

/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */

.dpTDHover {

background-color: #aca998;

border: 1px solid #888888;

cursor: pointer;

color: red;

}

/* the table cell that holds the name of the month and the year */

.dpTitleTD {

}

/* a table cell that holds one of the forward/backward buttons */

.dpButtonTD {

}

/* the table cell that holds the "This Month" or "Close" button at the bottom */

.dpTodayButtonTD {

}

/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */

.dpDayTD {

background-color: #CCCCCC;

border: 1px solid #AAAAAA;

color: white;

}

/* additional style information for the text that indicates the month and year */

.dpTitleText {

font-size: 12px;

color: gray;

font-weight: bold;

}

/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */

.dpDayHighlight {

color: 4060ff;

font-weight: bold;

}

/* the forward/backward buttons at the top */

.dpButton {

font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;

font-size: 10px;

color: gray;

background: #d8e8ff;

font-weight: bold;

padding: 0px;

}

/* the "This Month" and "Close" buttons at the bottom */

.dpTodayButton {

font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;

font-size: 10px;

color: gray;

background: #d8e8ff;

font-weight: bold;

}

/**

This is the function that actually draws the datepicker calendar.

*/

function refreshDatePicker(dateFieldName, year, month, day){

// if no arguments are passed, use today's date; otherwise, month and year

// are required (if a day is passed, it will be highlighted later)

var thisDay = new Date();

if ((month >= 0) && (year > 0)) {

thisDay = new Date(year, month, 1);

} else {

day = thisDay.getDate();

thisDay.setDate(1);

}

var crlf = "\r\n";

var TABLE = "<table cols=7 class='dpTable'>" + crlf;

var xTABLE = "</table>" + crlf;

var TR = "<tr class='dpTR'>";

var TR_title = "<tr class='dpTitleTR'>";

var TR_days = "<tr class='dpDayTR'>";

var TR_todaybutton = "<tr class='dpTodayButtonTR'>";

var xTR = "</tr>" + crlf;

var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event

var TD_title = "<td colspan=5 class='dpTitleTD'>";

var TD_buttons = "<td class='dpButtonTD'>";

var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";

var TD_days = "<td class='dpDayTD'>";

var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' "; // leave this tag open, because we'll be adding an onClick event

var xTD = "</td>" + crlf;

var DIV_title = "<div class='dpTitleText'>";

var DIV_selected = "<div class='dpDayHighlight'>";

var xDIV = "</div>";

// start generating the code for the calendar table

var html = TABLE;

// this is the title bar, which displays the month and the buttons to

// go back to a previous month or forward to the next month

html += TR_title;

html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "<") + xTD;

html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD;

html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, ">") + xTD;

html += xTR;

// this is the row that indicates which day of the week we're on

html += TR_days;

for(i = 0; i < dayArrayShort.length; i++)

html += TD_days + dayArrayShort[i] + xTD;

html += xTR;

// now we'll start populating the table with days of the month

html += TR;

// first, the leading blanks

for (i = 0; i < thisDay.getDay(); i++)

html += TD + " " + xTD;

// now, the days of the month

do {

dayNum = thisDay.getDate();

TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">";

if (dayNum == day)

html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;

else

html += TD + TD_onclick + dayNum + xTD;

// if this is a Saturday, start a new row

if (thisDay.getDay() == 6)

html += xTR + TR;

// increment the day

thisDay.setDate(thisDay.getDate() + 1);

} while (thisDay.getDate() > 1)

// fill in any trailing blanks

if (thisDay.getDay() > 0) {

for (i = 6; i > thisDay.getDay(); i--)

html += TD + " " + xTD;

}

html += xTR;

// add a button to allow the user to easily return to today, or close the calendar

var today = new Date();

var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate();

html += TR_todaybutton + TD_todaybutton;

html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" + dateFieldName + "\");'>this month</button> ";

html += "<button class='dpTodayButton' onClick='updateDateField(\"" + dateFieldName + "\");'>close</button>";

html += xTD + xTR;

// and finally, close the table

html += xTABLE;

document.getElementById(datePickerDivID).innerHTML = html;

// add an "iFrame shim" to allow the datepicker to display above selection lists

adjustiFrame();

}

/**

Convenience function for writing the code for the buttons that bring us back or forward

a month.

*/

function getButtonCode(dateFieldName, dateVal, adjust, label)

{

var newMonth = (dateVal.getMonth () + adjust) % 12;

var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);

if (newMonth < 0) {

newMonth += 12;

newYear += -1;

}

return "<button class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ");'>" + label + "</button>";

}

function getDateString(dateVal){

var dayString = "00" + dateVal.getDate();

var monthString = "00" + (dateVal.getMonth()+1);

dayString = dayString.substring(dayString.length - 2);

monthString = monthString.substring(monthString.length - 2);

switch (dateFormat) {

case "dmy" :

return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();

case "ymd" :

return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;

case "mdy" :

default :

return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();

}

}

/**

Convert a string to a JavaScript Date object.

*/

function getFieldDate(dateString){

var dateVal;

var dArray;

var d, m, y;

try {

dArray = splitDateString(dateString);

if (dArray) {

switch (dateFormat) {

case "dmy" :

d = parseInt(dArray[0], 10);

m = parseInt(dArray[1], 10) - 1;

y = parseInt(dArray[2], 10);

break;

case "ymd" :

d = parseInt(dArray[2], 10);

m = parseInt(dArray[1], 10) - 1;

y = parseInt(dArray[0], 10);

break;

case "mdy" :

default :

d = parseInt(dArray[1], 10);

m = parseInt(dArray[0], 10) - 1;

y = parseInt(dArray[2], 10);

break;

}

dateVal = new Date(y, m, d);

} else if (dateString) {

dateVal = new Date(dateString);

} else {

dateVal = new Date();

}

} catch(e) {

dateVal = new Date();

}

return dateVal;

}

More Questions

Post Answers

Ask Question Facing Programming Problem?