Saturday, August 4, 2012

Date Picker for Text box in HTML



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calendar javascript Code</title>
<link rel="stylesheet" type="text/css" href="http://www.jscodes.com/codes/calendar_javascript/demo/css/datePicker.css" />
<script src="C:\richa_674899\MAS group6\ui for news and events\calender\jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.datePicker-min.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.bgiframe.min.js"></script><![endif]-->

<script type="text/javascript">
  $(window).ready(function(){
  $('#date-pick').datePicker({clickInput:true});
});
</script>


</head>
<body>
<p><label>Please choose: </label><input type="text"  name="it" id="date-pick" /></p>
</body>
</html>









======
Css file ::
======
.clear{
clear:both;
}
.it,.so,.is{
border:1px solid #ccc;
vertical-align:middle;}

/* Date Picker  */
table.jCalendar {
border: 1px solid #fff;
border-collapse:collapse;
font-family:Tahoma;
}


table.jCalendar th {
background: #333;
color: #fff;
font-weight: normal;
padding: 3px 5px;
vertical-align:middle;
}

table.jCalendar td {
background: #AADBF9;
color: #000;
font-size:11px;
border:1px solid #fff;
padding: 3px 5px;
text-align: center;
}
table.jCalendar td.other-month {
background: #D0E6F7;
color: #555;
}
table.jCalendar td.today {
background: #FF6600;
color: #fff;
}
table.jCalendar td.selected {
background: #f66;
color: #fff;
}
table.jCalendar td.selected.dp-hover {
background: #fff;
color: #f66;
}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
background: #fff;
color: #000;
}
table.jCalendar tr.selectedWeek td {
background: #f66;
color: #fff;
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
background: #ECF1F4;
color: #888;
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
background: #fff;
color: #555;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */


div.dp-popup {
position: relative;
background: #D6E9F8;
font-size: 12px;
font-family: arial, sans-serif;
padding: 2px;

width: 162px ;
width:162px\9;
line-height: 1.2em;
font-family:Tahoma;


}

@media screen and (-webkit-min-device-pixel-ratio:0) { div.dp-popup { width: 175px ; } }

div#dp-popup {
position: absolute;
z-index: 199;
}
div.dp-popup h2 {
font-size: 12px;
text-align: center;
margin: 2px 0;
padding: 0;
}
a#dp-close {
font-size: 11px;
padding: 4px 0;
text-align: center;
display: block;
}
a#dp-close:hover {
text-decoration: underline;
}
div.dp-popup a {
color: #000;
text-decoration: none;
padding: 3px 4px 0;
}
div.dp-popup div.dp-nav-prev {
position: absolute;
top: 2px;
left: 0px;
width: 80px;
}
div.dp-popup div.dp-nav-prev a {
float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
cursor: default;
}
div.dp-popup div.dp-nav-next {
position: absolute;
top: 2px;
right: 0px;
width: 80px;
}
div.dp-popup div.dp-nav-next a {
float: right;
}
div.dp-popup a.disabled {
cursor: default;
color: #aaa;
}
div.dp-popup td {
cursor: pointer;
}
div.dp-popup td.disabled {
cursor: default;
}



==========
Java Script File  ::
=============




No comments:

Post a Comment