diff --git a/fiches/static/fiches/css/datepicker.css b/fiches/static/fiches/css/datepicker.css
new file mode 100644
index 0000000..a863314
--- /dev/null
+++ b/fiches/static/fiches/css/datepicker.css
@@ -0,0 +1,258 @@
+/*
+MIT License
+
+Copyright (c) 2019 Hidenao Miyamoto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+.datepicker {
+  display: none;
+}
+.datepicker.active {
+  display: block;
+}
+
+.datepicker-dropdown {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  padding-top: 4px;
+}
+.datepicker-dropdown.datepicker-orient-top {
+  padding-top: 0;
+  padding-bottom: 4px;
+}
+
+.datepicker-picker {
+  display: inline-block;
+  border-radius: 0px;
+  background-color: #301827;
+}
+.datepicker-dropdown .datepicker-picker {
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+}
+.datepicker-picker span {
+  display: block;
+  flex: 1;
+  border: 0;
+  border-radius: 0px;
+  cursor: default;
+  text-align: center;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.datepicker-main {
+  padding: 2px;
+}
+
+.datepicker-footer {
+  box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
+  background-color: whitesmoke;
+}
+
+.datepicker-grid, .datepicker-view .days-of-week, .datepicker-view, .datepicker-controls {
+  display: flex;
+}
+
+.datepicker-grid {
+  flex-wrap: wrap;
+}
+
+.datepicker-view .days .datepicker-cell, .datepicker-view .dow {
+  flex-basis: 14.2857142857%;
+}
+
+.datepicker-view.datepicker-grid .datepicker-cell {
+  flex-basis: 25%;
+}
+
+.datepicker-cell, .datepicker-view .week {
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+
+.datepicker-title {
+  box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
+  background-color: #1f0e19;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  font-weight: 700;
+}
+
+.datepicker-header .datepicker-controls {
+  padding: 2px 2px 0;
+}
+.datepicker-controls .button {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  border: 1px solid #dbdbdb;
+  border-radius: 0px;
+  box-shadow: none;
+  background-color: white;
+  cursor: pointer;
+  padding: calc(0.375em - 1px) 0.75em;
+  height: 2.25em;
+  vertical-align: top;
+  text-align: center;
+  line-height: 1.5;
+  white-space: nowrap;
+  color: #363636;
+  font-size: 1rem;
+}
+.datepicker-controls .button:focus, .datepicker-controls .button:active {
+  outline: none;
+}
+.datepicker-controls .button:hover {
+  border-color: #b5b5b5;
+  color: #363636;
+}
+.datepicker-controls .button:focus {
+  border-color: #3273dc;
+  color: #363636;
+}
+.datepicker-controls .button:focus:not(:active) {
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+}
+.datepicker-controls .button:active {
+  border-color: #4a4a4a;
+  color: #363636;
+}
+.datepicker-controls .button[disabled] {
+  cursor: not-allowed;
+}
+.datepicker-header .datepicker-controls .button {
+  border-color: transparent;
+  font-weight: bold;
+}
+.datepicker-header .datepicker-controls .button:hover {
+  background-color: #f9f9f9;
+}
+.datepicker-header .datepicker-controls .button:focus:not(:active) {
+  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+}
+.datepicker-header .datepicker-controls .button:active {
+  background-color: #f2f2f2;
+}
+.datepicker-header .datepicker-controls .button[disabled] {
+  box-shadow: none;
+}
+.datepicker-footer .datepicker-controls .button {
+  margin: calc(0.375rem - 1px) 0.375rem;
+  border-radius: 0px;
+  width: 100%;
+  font-size: 0.75rem;
+}
+.datepicker-controls .view-switch {
+  flex: auto;
+}
+.datepicker-controls .prev-btn,
+.datepicker-controls .next-btn {
+  padding-right: 0.375rem;
+  padding-left: 0.375rem;
+  width: 2.25rem;
+}
+.datepicker-controls .prev-btn.disabled,
+.datepicker-controls .next-btn.disabled {
+  visibility: hidden;
+}
+
+.datepicker-view .dow {
+  height: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+.datepicker-view .week {
+  width: 2.25rem;
+  color: #b5b5b5;
+  font-size: 0.75rem;
+}
+@media (max-width: 22.5rem) {
+  .datepicker-view .week {
+    width: 1.96875rem;
+  }
+}
+
+.datepicker-grid {
+  width: 15.75rem;
+}
+@media (max-width: 22.5rem) {
+  .calendar-weeks + .days .datepicker-grid {
+    width: 13.78125rem;
+  }
+}
+
+.datepicker-cell:not(.disabled):hover {
+  background-color: #281420;
+  cursor: pointer;
+}
+.datepicker-cell.focused:not(.selected) {
+  background-color: #1f1019;
+}
+.datepicker-cell.selected, .datepicker-cell.selected:hover {
+  background-color: #3b1e31;
+  color: #ffdc00;
+  font-weight: 600;
+}
+.datepicker-cell.disabled {
+  color: #dbdbdb;
+}
+.datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) {
+  color: #7a7a7a;
+}
+.datepicker-cell.prev.selected, .datepicker-cell.next.selected {
+  color: #ccb000;
+}
+.datepicker-cell.highlighted:not(.selected):not(.today) {
+  border-radius: 0;
+  background-color: #3b1e31;
+}
+.datepicker-cell.highlighted:not(.selected):not(.today):not(.disabled):hover {
+  background-color: #331a2a;
+}
+.datepicker-cell.highlighted:not(.selected):not(.today).focused {
+  background-color: #1f1019;
+}
+.datepicker-cell.today:not(.selected) {
+  background-color: #3b1e31;
+}
+.datepicker-cell.today:not(.selected):not(.disabled) {
+  color: #fff;
+}
+.datepicker-cell.today.focused:not(.selected) {
+  background-color: #331a2a;
+}
+.datepicker-view.datepicker-grid .datepicker-cell {
+  height: 4.5rem;
+  line-height: 4.5rem;
+}
+
+.datepicker-input.in-edit {
+  border-color: #2366d1;
+}
+.datepicker-input.in-edit:focus, .datepicker-input.in-edit:active {
+  box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);
+}
+
+/*# sourceMappingURL=datepicker.css.map */
diff --git a/fiches/static/fiches/scss/datepicker.scss b/fiches/static/fiches/scss/datepicker.scss
new file mode 100644
index 0000000..7795a9d
--- /dev/null
+++ b/fiches/static/fiches/scss/datepicker.scss
@@ -0,0 +1,414 @@
+/*
+MIT License
+
+Copyright (c) 2019 Hidenao Miyamoto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+//== foundational variables ==//
+$black: hsl(0, 0%, 4%) !default;
+$white: hsl(0, 0%, 100%) !default;
+$light: hsl(0, 0%, 96%) !default; // white-ter
+$dark: hsl(0, 0%, 21%) !default;  // grey-darker
+$link: hsl(217, 71%, 53%) !default; // blue
+
+$grey-dark: lighten($black, 25%) !default;
+$grey-light: darken($light, 25%) !default;
+$grey-lighter: darken($light, 10%) !default;
+
+//== datepicker variables ==//
+$dp-background-color: #301827 !default;
+$dp-border-color: #1f0e19 !default;
+$dp-border-radius: 0px !default;
+$dp-border-radius-small: 0px !default;
+$dp-line-height-base: 1.5 !default;
+$dp-font-size-normal: 1rem !default;
+$dp-font-size-small: 0.75rem !default;
+$dp-font-weight-semibold: 600 !default;
+$dp-font-weight-bold: 700 !default;
+$dp-dropdown-offset: 4px !default;
+$dp-dropdown-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
+$dp-dropdown-z: 20 !default;
+
+$dp-title-background-color: #1f0e19 !default;
+
+$dp-cell-size-base: 2.25rem !default;
+$dp-cell-focus-background-color: darken(#301827, 5%) !default;
+$dp-cell-prevnext-color: hsl(0, 0%, 48%) !default; // grey
+$dp-cell-disabled-color: $grey-lighter !default;
+$dp-cell-selected-background-color: #3b1e31 !default;
+$dp-cell-selected-color: #ffdc00 !default; // link(blue)-invert
+$dp-cell-selected-font-weight: 600 !default;
+$dp-cell-today-background-color: #3b1e31 !default;  // turquoise (primary)
+$dp-cell-today-color: #fff !default;  // turquoise-invert
+$dp-cell-highlighted-background-color: #3b1e31 !default;
+$dp-range-start-end-background-color: $grey-light !default;
+$dp-range-start-end-color: $dp-cell-selected-color !default;
+$dp-range-background-color: $grey-lighter !default;
+$dp-range-today-background-color: $dp-cell-today-background-color !default;
+$dp-week-color: $grey-light !default;
+
+$dp-footer-background-color: $light !default;
+
+$dp-input-in-edit-border-color: darken($link, 5%) !default;
+$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
+
+//== non-configurable variables ==//
+$dp-cell-shrink-threshold: $dp-cell-size-base * 10;  // = 8 * 1.25
+$dp-cell-shrinked-width: $dp-cell-size-base * 7 / 8;
+
+//== mixins ==//
+@mixin dp-header-button-common {
+  border-color: transparent;
+  font-weight: bold;
+}
+
+@mixin dp-footer-button-common {
+  margin: calc(0.375rem - 1px) 0.375rem;
+  border-radius: $dp-border-radius-small;
+  width: 100%;
+  font-size: $dp-font-size-small;
+}
+
+//== styles ==//
+.datepicker {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+.datepicker-dropdown {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $dp-dropdown-z;
+  padding-top: $dp-dropdown-offset;
+
+  &.datepicker-orient-top {
+    padding-top: 0;
+    padding-bottom: $dp-dropdown-offset;
+  }
+}
+
+.datepicker-picker {
+  display: inline-block;
+  border-radius: $dp-border-radius;
+  background-color: $dp-background-color;
+
+  .datepicker-dropdown & {
+    box-shadow: $dp-dropdown-shadow;
+  }
+
+  span {
+    display: block;
+    flex: 1;
+    border: 0;
+    border-radius: $dp-border-radius;
+    cursor: default;
+    text-align: center;
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+}
+
+.datepicker-main {
+  padding: 2px;
+}
+
+.datepicker-footer {
+  box-shadow: inset 0 1px 1px rgba($black, 0.1);
+  background-color: $dp-footer-background-color;
+}
+
+%flex-container {
+  display: flex;
+}
+
+%flex-wrap {
+  flex-wrap: wrap;
+}
+
+%flex-basis-day {
+  flex-basis: percentage(1 / 7);
+}
+
+%flex-basis-month-year {
+  flex-basis: 25%;
+}
+
+%datepicker-cell-height {
+  height: $dp-cell-size-base;
+  line-height: $dp-cell-size-base;
+}
+
+.datepicker-title {
+  box-shadow: inset 0 -1px 1px rgba($black, 0.1);
+  background-color: $dp-title-background-color;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  font-weight: $dp-font-weight-bold;
+}
+
+.datepicker-controls {
+  @extend %flex-container;
+
+  .datepicker-header & {
+    padding: 2px 2px 0;
+  }
+
+  @if mixin-exists(dp-button) {
+    @include dp-button;
+  } @else {
+    .button {
+      $button-color: $dark;
+      $button-background-color: $white;
+
+      $button-border-color: $grey-lighter;
+      $button-border-width: 1px;
+
+      $button-padding-vertical: calc(0.375em - #{$button-border-width});
+      $button-padding-horizontal: 0.75em;
+
+      $button-hover-color: $dark; // link-hover
+      $button-hover-border-color: $grey-light;  // link-hover-border
+
+      $button-focus-color: $dark; // link-focus
+      $button-focus-border-color: $link;  // link-focus-border
+      $button-focus-box-shadow-size: 0 0 0 0.125em;
+      $button-focus-box-shadow-color: rgba($link, 0.25);
+
+      $button-active-color: $dark;  // link-active
+      $button-active-border-color: $grey-dark;  // link-active-border
+
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      border: $button-border-width solid $button-border-color;
+      border-radius: $dp-border-radius; // control-radius
+      box-shadow: none;
+      background-color: $button-background-color;
+      cursor: pointer;
+      padding: $button-padding-vertical $button-padding-horizontal;
+      height: 2.25em; // control-height
+      vertical-align: top;
+      text-align: center;
+      line-height: $dp-line-height-base;  // control-line-height
+      white-space: nowrap;
+      color: $button-color;
+      font-size: $dp-font-size-normal;  // size-normal
+
+      &:focus,
+      &:active {
+        outline: none;
+      }
+
+      &:hover {
+        border-color: $button-hover-border-color;
+        color: $button-hover-color;
+      }
+
+      &:focus {
+        border-color: $button-focus-border-color;
+        color: $button-focus-color;
+
+        &:not(:active) {
+          box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
+        }
+      }
+
+      &:active {
+        border-color: $button-active-border-color;
+        color: $button-active-color;
+      }
+
+      &[disabled] {
+        cursor: not-allowed;
+      }
+
+      .datepicker-header & {
+        @include dp-header-button-common;
+
+        &:hover {
+          background-color: darken($white, 2.5%);
+        }
+
+        &:focus {
+          &:not(:active) {
+            box-shadow: 0 0 0 0.125em rgba($white, 0.25);
+          }
+        }
+
+        &:active {
+          background-color: darken($white, 5%);
+        }
+
+        &[disabled] {
+          box-shadow: none;
+        }
+      }
+
+      .datepicker-footer & {
+        @include dp-footer-button-common;
+      }
+    }
+  }
+
+  .view-switch {
+    flex: auto;
+  }
+
+  .prev-btn,
+  .next-btn {
+    padding-right: 0.375rem;
+    padding-left: 0.375rem;
+    width: $dp-cell-size-base;
+
+    &.disabled {
+      visibility: hidden;
+    }
+  }
+}
+
+.datepicker-view {
+  @extend %flex-container;
+
+  .days-of-week {
+    @extend %flex-container;
+  }
+
+  .dow {
+    @extend %flex-basis-day;
+    height: $dp-font-size-normal * $dp-line-height-base;
+    line-height: $dp-font-size-normal * $dp-line-height-base;
+    font-size: ($dp-font-size-small + $dp-font-size-normal) / 2;
+    font-weight: $dp-font-weight-bold;
+  }
+
+  .week {
+    @extend %datepicker-cell-height;
+    width: $dp-cell-size-base;
+    color: $dp-week-color;
+    font-size: $dp-font-size-small;
+
+    @media (max-width: $dp-cell-shrink-threshold) {
+      width: $dp-cell-shrinked-width;
+    }
+  }
+}
+
+.datepicker-grid {
+  @extend %flex-container;
+  @extend %flex-wrap;
+
+  width: $dp-cell-size-base * 7;
+
+  @media (max-width: $dp-cell-shrink-threshold) {
+    .calendar-weeks + .days & {
+      width: $dp-cell-shrinked-width * 7;
+    }
+  }
+}
+
+.datepicker-cell {
+  @extend %datepicker-cell-height;
+
+  &:not(.disabled):hover {
+    background-color: darken($dp-background-color, 2.5%);
+    cursor: pointer;
+  }
+
+  &.focused:not(.selected) {
+    background-color: $dp-cell-focus-background-color;
+  }
+
+  &.selected {
+    &,
+    &:hover {
+      background-color: $dp-cell-selected-background-color;
+      color: $dp-cell-selected-color;
+      font-weight: $dp-cell-selected-font-weight;
+    }
+  }
+
+  &.disabled {
+    color: $dp-cell-disabled-color;
+  }
+
+  &.prev,
+  &.next {
+    &:not(.disabled) {
+      color: $dp-cell-prevnext-color;
+    }
+
+    &.selected {
+      color: darken($dp-cell-selected-color, 10%);
+    }
+  }
+
+  &.highlighted:not(.selected):not(.today) {
+    border-radius: 0;
+    background-color: $dp-cell-highlighted-background-color;
+
+    &:not(.disabled):hover {
+      background-color: darken($dp-cell-highlighted-background-color, 2.5%);
+    }
+
+    &.focused {
+      background-color: $dp-cell-focus-background-color;
+    }
+  }
+
+  &.today {
+    &:not(.selected) {
+      background-color: $dp-cell-today-background-color;
+
+      &:not(.disabled) {
+        color: $dp-cell-today-color;
+      }
+    }
+
+    &.focused:not(.selected) {
+      background-color: darken($dp-cell-today-background-color, 2.5%);
+    }
+  }
+
+  .datepicker-view .days & {
+    @extend %flex-basis-day;
+  }
+
+  .datepicker-view.datepicker-grid & {
+    @extend %flex-basis-month-year;
+    height: $dp-cell-size-base * 2;
+    line-height: $dp-cell-size-base * 2;
+  }
+}
+
+.datepicker-input.in-edit {
+  border-color: $dp-input-in-edit-border-color;
+
+  &:focus,
+  &:active {
+    box-shadow: $dp-input-in-edit-focus-box-shadow-size rgba($dp-input-in-edit-border-color, 0.2);
+  }
+}