[web2py] Re: Date Picker Widget

[annet]

Hi David,

I didn't like the calendar that comes with web2py, not for its
functionality but for its appearance. Instead of replacing it I just
restyled it:

.calendar {
  cursor: default;
  background-color: #FFFFFF;
  color: #444444;
  font-size: 11px;
  border: 1px solid #AAAAAA;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  padding: 6px;
}
.calendar table {
  border-collapse: separate;
  border-spacing: 2px;
}
.calendar thead {}
.calendar thead tr, .calendar thead .headrow {
  background-color: #4169E1;
  color: #444444;
}
.calendar thead .daynames {}
.calendar .button, .calendar thead .title {
  color: #FFFFFF;
  font-size: 12px;
  text-align: center;
  padding: 3px;
}
.calendar thead tr .hilite, .calendar thead tr .active, .calendar
thead .headrow .hilite, .calendar thead .headrow .active {
  background-color: #FFFFFF;
  color: #4169E1;
  padding: 3px;
}
.calendar thead .daynames .hilite, .calendar thead .daynames .active {
  background-color: #FFFFFF;
  color: #444444;
}
.calendar thead .name {
  background-color: #FFFFFF;
  text-align: center;
  padding: 3px;
}
.calendar tbody {}
.calendar tbody td {
  text-align: right;
  border: 1px solid #AAAAAA;
}
.calendar tbody td.hilite {
  background-color: #777777;
  color: #FFFFFF;
}
.calendar tbody td.active, .calendar tbody td.selected {
  font-weight: bold;
  background-color: #FFFFFF;
  color: #4169E1;
}
.calendar tbody td.today {
  font-weight: bold;
  background-color: #4169E1;
  color: #FFFFFF;
}
.calendar tbody .disabled {
  color: #777777;
}
.calendar tbody .emptycell {
  visibility: hidden;
}
.calendar tbody .emptyrow {
  display: none;
}
.calendar tfoot .ttip {
  background-color: #777777;
  color: #FFFFFF;
  text-align: center;
  border: 1px solid #333333;
  padding: 1px;
}
.calendar tfoot .hilite {
  padding: 1px;
  background-color:
  #EEEEEE;
}
.calendar tfoot .active {
  padding: 2px 0px 0px 2px;
}
.calendar .combo {
  background-color: #FFFFFF;
  position: absolute;
  display: none;
  width: 4em;
  top: 0px;
  left: 0px;
  cursor: default;
  border: 1px solid #DDDDDD;
  padding: 1px;
  z-index: 100;
}
.calendar .combo .label, .calendar .combo .label-IEfix {
  text-align: center;
  padding: 1px;
}
.calendar .combo .label-IEfix {
  width: 4em;
}
.calendar .combo .active {
  background-color: #CCCCCC;
  color: #FFFFFF;
  padding: 0px;
}
.calendar .combo .hilite {
  background-color: #777777;
  color: #FFFFFF;
}
.floatleft {
  float: left;
}
.CP_over {
  background-color: #FFFFFF
 }


Just another option ;-)


Kind regards,

Annet.