Implementing a Datepicker (^) ❘ 391
}
div.ui-datepicker-title {
margin-top: 5px;
text-align: center;
}
div.ui-datepicker-title select {
margin: 0 3px;
}
table.ui-datepicker-calendar {
width: 100%;
border-collapse: collapse;
margin: 10px 0 0 0 ;
}
table.ui-datepicker-calendar td {
padding: 3px;
text-align: center;
color: rgb(255, 255, 255);
background: rgb(158, 158, 158);
border-bottom: 1px solid rgb(255, 255, 255);
font-size: 11px;
}
table.ui-datepicker-calendar td a {
color: rgb(255, 255, 255);
text-decoration: none;
display: block;
}
table.ui-datepicker-calendar thead th {
text-align: center;
font-weight: bold;
font-size: 11px;
color: rgb(0, 0, 0);
}
table.ui-datepicker-calendar td.ui-datepicker-today {
background: rgb(230, 230, 230);
}
table.ui-datepicker-calendar td.ui-datepicker-today a {
color: rgb(0, 0, 0);
}
table.ui-datepicker-calendar td.ui-datepicker-current-day {
background: rgb(0, 0, 0);
}
table.ui-datepicker-calendar td.ui-datepicker-current-day a {
color: rgb(255, 255, 255);
}
table.ui-datepicker-calendar td.ui-datepicker-other-month {
background: rgb(230, 230, 230);
border-bottom: 1px solid rgb(255, 255, 255);
font-size: 11px;
}When you load the document in a browser, the preceding example results in something similar to
Figure 16-2.