Add combobox date picker example for issue 34

examples/datepicker/css/datepicker.css

@@ -0,0 +1,207 @@
+.datepicker {
+  margin-top: 1em;
+}
+
+
+.datepicker button.icon {
+  border-style: none;
+  text-align: left;
+  background-color: white;
+  position: relative;
+  left: -25px;
+  top: 3px;
+}
+
+.datepicker span.arrow {
+  margin: 0;
+  padding: 0;
+  display: none;
+  background: transparent;
+}
+
+.datepicker span.arrow svg polygon {
+  stroke: gray;
+  stroke-width: 1px;
+  fill: gray;
+}
+
+.datepicker[aria-expanded=false] span.arrow.up {
+  display: inline-block;
+  position: relative;
+  left: -23px;
+}
+
+.datepicker[aria-expanded=true] span.arrow.down {
+  display: inline-block;
+  position: relative;
+  left: -23px;
+}
+
+.datepicker input {
+  margin: 0;
+  width: 20%;
+}
+
+.datepickerDialog {
+  width: 45%;
+  clear: both;
+  display: none;
+  border: 3px solid hsl(216, 80%, 55%);
+  margin-top: 1em;
+  border-radius: 5px;
+  padding: 0;
+  background-color: #FFF;
+}
+
+.header {
+  cursor: default;
+  background-color: hsl(216, 80%, 55%);
+  padding: 7px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: white;
+  display: flex;
+  justify-content: space-around;
+}
+
+.header span {
+  display: inline-block;
+}
+
+.header button {
+  border-style: none;
+  background: transparent;
+}
+
+.datepickerDialog button::-moz-focus-inner {
+  border: 0;
+}
+
+.prevYear,
+.prevMonth,
+.nextMonth,
+.nextYear {
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+  color: white;
+}
+
+.prevYear:focus,
+.prevMonth:focus,
+.nextMonth:focus,
+.nextYear:focus {
+  padding: 2px;
+  border: 2px solid white;
+  border-radius: 4px;
+  outline: 0;
+}
+
+.dialogButtonGroup {
+  text-align: right;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-right: 1em;
+}
+
+.dialogButton {
+  padding: 5px;
+  margin-left: 1em;
+  width: 5em;
+  background-color: hsl(216, 80%, 92%);
+  font-size: 0.85em;
+  color: black;
+  outline: none;
+  border: 1px solid hsl(216, 80%, 92%);
+  border-radius: 5px;
+}
+
+.dialogButton:focus {
+  padding: 4px;
+  border: 2px solid black;
+}
+
+.fa-calendar-alt {
+  color: hsl(216, 89%, 72%);
+}
+
+.datepicker .monthYear {
+  display: inline-block;
+  width: 12em;
+  text-align: center;
+}
+
+table.dates {
+  width: 100%;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 1em;
+}
+
+table.dates th,
+table.dates td {
+  text-align: center;
+}
+
+.dateRow {
+  border: 1px solid black;
+}
+
+.dateCell {
+  outline: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  height: 40px;
+  width: 40px;
+}
+
+.dateButton {
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+  height: 100%;
+  width: 100%;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  font-size: 15px;
+  background: #eee;
+}
+
+.dateButton:focus,
+.dateButton:hover {
+  padding: 0;
+  background-color: hsl(216, 80%, 92%);
+}
+
+.dateButton:focus {
+  border-width: 2px;
+  border-color: rgb(100, 100, 100);
+  outline: 0;
+}
+
+.dateButton[aria-selected] {
+  border-color: rgb(100, 100, 100);
+}
+
+.dateButton[tabindex="0"] {
+  background-color: hsl(216, 80%, 92%);
+}
+
+.disabled {
+  cursor: not-allowed;
+  color: #afafaf;
+}
+
+.dateButton:disabled {
+  color: #777;
+  background-color: #fff;
+  border: none;
+  cursor: not-allowed;
+}
+
+.datepicker .message {
+  position: absolute;
+  top: -30em;
+  left: -300em;
+}