Source

jqui / sass / _datepicker.sass

input[type="date"], input[type="week"], input[type="month"]
  &::-webkit-outer-spin-button
    -webkit-appearance: none

.icon-calendar
  +icon(calendar)
  display: inline-block
  position: absolute
  margin-top: 4px
  margin-left: 108px
  
.datepicker
  width: 175px
  +rounded-border(6px)
  +box-shadow(1px,4px,6px,grey)
  position: absolute
  display: none
  background-color: white
  z-index: 500
  header
    +button-text
    +bg-x($button-bg)
    font-weight: bold
    padding: 6px
    border-bottom: 1px solid gray
    div
      display: inline-block
      &.prev
        +hover-icon(circle-triangle-w)
        float: left
        cursor: pointer
      &.next
        +hover-icon(circle-triangle-e)
        float: right
        cursor: pointer
  table
    margin: 10px
    align: center
    tr
      margin: 0 2px
    td
      margin: 0
      font-size: 10px
      text-align: center
      padding: 5px
      &.weekend
        color: $button-color
      cursor: pointer
      &.other-month
        cursor: auto
        &:hover
          background-color: white
      &.today
        background-color: $button-color * 2
        color: $button-color / 1.2
        color: red
      &:hover
        background-color: $button-color * 2.8
        color: $button-color * 1.5
      &.selected
        color: red
    th, td
      &.week_number
        display: none
  footer
    padding: 2px
    text-align: center
    a.today
      cursor: pointer
  &.week
    width: 200px
    th, td
      &.week_number
        display: block
    tr>td.selected
      border: 1px solid red
    tr:hover, td:hover
      background-color: $button-color * 2.8