Set style for date picker
<html>
<head>
<script type='text/javascript' src='js/jquery-1.3.2.js'></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
<script type='text/javascript'>
$(document).ready(
function() {
$('input#tmpDate').datepicker({
minDate: new Date(2008, 0, 1),
maxDate: new Date(2009, 0, 1)
});
}
);
</script>
<style type='text/css'>
#ui-datepicker-div {
width: 300px;
border: 1px solid rgb(128, 128, 128);
padding: 5px;
background: gray;
display: none;
}
div.ui-datepicker-control {
position: relative;
height: 25px;
background: forestgreen;
}
div.ui-datepicker-control div {
padding: 5px;
}
div.ui-datepicker-control div a {
color: #fff;
}
div.ui-datepicker-links {
position: relative;
height: 20px;
padding: 5px 0 0 0;
background: darkgreen;
border-bottom: 1px solid green;
text-align: center;
}
div.ui-datepicker-links div {
padding: 5px;
}
div.ui-datepicker-links div a {
color: #fff;
}
div.ui-datepicker-clear,
div.ui-datepicker-prev {
position: absolute;
top: 0;
left: 0;
}
div.ui-datepicker-close,
div.ui-datepicker-next {
position: absolute;
top: 0;
right: 0;
}
div.ui-datepicker-current {
display: inline;
}
div.ui-datepicker-header {
margin-top: 5px;
text-align: center;
}
div.ui-datepicker-header select {
margin: 0 3px;
}
table.ui-datepicker {
width: 250px;
border-collapse: collapse;
margin: 10px 0 0 0;
}
table.ui-datepicker td {
padding: 3px;
border: 1px solid red;
}
table.ui-datepicker thead td {
text-align: center;
font-weight: bold;
background: green;
color: lightgreen;
}
td.ui-datepicker-today {
background: #dff6e4;
}
td.ui-datepicker-current-day {
background: darkgreen;
color: #fff;
}
</style>
</head>
<body>
<div>
<label for='tmpDate'>Date:</label>
<input type='text' id='tmpDate' size='25' value='' />
</div>
</body>
</html>
Related examples in the same category