Merge branch 'thubrecht/datepicker' into 'master'

Thubrecht/datepicker

Closes #22

See merge request klub-dev-ens/annuaire!18

annuaire/settings.py

@@ -144,7 +144,7 @@ TIME_ZONE = "UTC"
 
 USE_I18N = True
 
-USE_L10N = True
+USE_L10N = False
 
 USE_TZ = True
 

fiches/forms.py

@@ -6,6 +6,11 @@ from fiches.models import Address, Department, Mail, Phone, Profile, Social
 
 
 class ProfileForm(forms.ModelForm):
+    birth_date = forms.DateField(
+        input_formats=["%Y-%m-%d"],
+        required=False,
+    )
+
     class Meta:
         model = Profile
         exclude = ["user"]
@@ -28,10 +33,10 @@ class SearchForm(forms.Form):
             raise forms.ValidationError(_("Tous les champs sont vides"), code="invalid")
 
 
-PhoneFormSet = inlineformset_factory(Profile, Phone, exclude=[])
+PhoneFormSet = inlineformset_factory(Profile, Phone, exclude=[], extra=0)
 
-SocialFormSet = inlineformset_factory(Profile, Social, exclude=[])
+SocialFormSet = inlineformset_factory(Profile, Social, exclude=[], extra=0)
 
-MailFormSet = inlineformset_factory(Profile, Mail, exclude=[])
+MailFormSet = inlineformset_factory(Profile, Mail, exclude=[], extra=0)
 
-AddressFormSet = inlineformset_factory(Profile, Address, exclude=[])
+AddressFormSet = inlineformset_factory(Profile, Address, exclude=[], extra=0)

fiches/static/fiches/css/annuaire.css

@@ -65,7 +65,7 @@ body {
   padding: 0 0 0 10vw;
   background-color: #1f0e19;
   box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
-  z-index: 1000;
+  z-index: 10;
 }
 
 #main {
@@ -75,7 +75,7 @@ body {
   flex-direction: column;
   justify-content: space-between;
   background-color: #301827;
-  z-index: 500;
+  z-index: 5;
 }
 
 @media only screen and (max-width: 1200px) {

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 */

fiches/static/fiches/scss/_common.scss

@@ -29,7 +29,7 @@ body {
     padding: 0 0 0 10vw;
     background-color: colors.$aside-background;
     box-shadow: 4px 0 0 colors.$shadow;
-    z-index: 1000;
+    z-index: 10;
 }
 
 #main {
@@ -39,7 +39,7 @@ body {
     flex-direction: column;
     justify-content: space-between;
     background-color: colors.$main-background;
-    z-index: 500;
+    z-index: 5;
 }
 
 @media only screen and (max-width: 1200px) {

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);
+  }
+}

fiches/templates/fiches/base.html

@@ -1,5 +1,5 @@
 {% load i18n %}
-{% load staticfiles %}
+{% load static %}
 <!DOCTYPE html>
 <html>
 
@@ -11,6 +11,7 @@
   </title>
   <link rel="stylesheet" type="text/css" href="{% static "fiches/css/normalize.css" %}" />
   <link rel="stylesheet" type="text/css" href="{% static "fiches/css/annuaire.css" %}" />
+  <link rel="stylesheet" type="text/css" href="{% static "fiches/css/datepicker.css" %}" />
 </head>
 
 <body>
@@ -77,7 +78,7 @@
       {% endblock %}
     </div>
   </div>
+  {% block extra_js %}{% endblock %}
 </body>
-{% block extra_js %}{% endblock %}
 
 </html>

fiches/templates/fiches/fiche.html

@@ -1,5 +1,5 @@
 {% extends "fiches/base.html" %}
-{% load i18n %}
+{% load i18n l10n %}
 
 {% block content %}
 
@@ -40,7 +40,9 @@
     <div class="birthdate">
       <span class="label">{% trans "Date de naissance" %}</span>
       <span class="separator"></span>
+      {% localize on %}
       <span class="value">{{ profile.birth_date }}</span>
+      {% endlocalize %}
     </div>
     {% endif %}
 

fiches/templates/fiches/fiches_modif.html

@@ -1,6 +1,5 @@
 {% extends "fiches/base.html" %}
-{% load i18n %}
+{% load i18n static %}
-{% load staticfiles %}
 
 {% block content %}
 
@@ -21,6 +20,10 @@
       <label for="id_pronoun">{% trans "Pronom(s) utilisé(s) :" %}</label>
       {{ form.pronoun }}
     </div>
+    <div class="form-entry">
+      <label for="id_birth_date">{% trans "Date de naissance :" %}</label>
+      {{ form.birth_date }}
+    </div>
     <div class="form-entry">
       <label for="id_picture">{% trans "Photo :" %}</label>
       <div id="photo-edit-form" class="wide-form-entry">
@@ -29,8 +32,6 @@
           <a href="{{ form.instance.picture.url }}">
             <img src="{{ form.instance.picture.url }}">
           </a>
-          {% else %}
-          <img>
           {% endif %}
         </div>
         <div class="photo-edit-controls">
@@ -67,10 +68,6 @@
         {{ form.experiences }}
       </div>
     </div>
-    <div class="form-entry">
-      <label for="id_birth_date">{% trans "Date de naissance :" %}</label>
-      {{ form.birth_date }}
-    </div>
     <div class="form-entry">
       <label for="id_thurne">{% trans "Thurne :" %}</label>
       {{ form.thurne }}
@@ -116,5 +113,14 @@
 {% endblock %}
 
 {% block extra_js %}
-<script type="text/javascript" src="{% static "fiches/js/forms.js" %}"></script>
+<script src="{% static "fiches/js/forms.js" %}"></script>
+<script src="{% static "fiches/js/datepicker.min.js" %}"></script>
+<script>
+  const elem = document.querySelector('input[name="birth_date"]');
+  const datepicker = new Datepicker(elem, {
+    format: "yyyy-mm-dd",
+    defaultViewDate: "{{ default_birth_date }}",
+  });
+
+</script>
 {% endblock %}

fiches/views.py

@@ -1,28 +1,29 @@
-from django.shortcuts import render
+from datetime import date
-from django.shortcuts import get_object_or_404, redirect
+
 from django.contrib.auth.decorators import login_required
-from fiches.models import Profile, Phone, Social, Mail, Address
+from django.core.mail import send_mail
-from fiches.forms import (
+from django.db.models import Q
-    ProfileForm,
-    SearchForm,
-    PhoneFormSet,
-    SocialFormSet,
-    MailFormSet,
-    AddressFormSet,
-)
 from django.forms import formset_factory
 from django.forms.models import model_to_dict
+from django.http import HttpResponseRedirect
+from django.shortcuts import get_object_or_404, redirect, render
+from django.template.loader import render_to_string
 from django.urls import reverse
-from django.db.models import Q
 from django.utils import timezone
 from django.utils.decorators import method_decorator
-from datetime import timedelta
-from django.core.mail import send_mail
-from django.template.loader import render_to_string
 from django.views.generic.detail import DetailView
-from django.views.generic.list import ListView
 from django.views.generic.edit import FormView, UpdateView
-from django.http import HttpResponseRedirect
+from django.views.generic.list import ListView
+
+from fiches.forms import (
+    AddressFormSet,
+    MailFormSet,
+    PhoneFormSet,
+    ProfileForm,
+    SearchForm,
+    SocialFormSet,
+)
+from fiches.models import Address, Mail, Phone, Profile, Social
 
 
 @method_decorator(login_required, name="dispatch")
@@ -109,6 +110,12 @@ class EditView(UpdateView):
             )
         )
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        today = date.today()
+        context["default_birth_date"] = today.replace(year=(today.year - 20)).isoformat()
+        return context
+
     def get_object(self):
         return self.request.user.profile
 
@@ -116,7 +123,7 @@ class EditView(UpdateView):
         return reverse("fiche", args=(self.get_object().user,))
 
 
-@method_decorator(login_required, name="post")
+@method_decorator(login_required, name="dispatch")
 class HomeView(FormView):
     model = Profile
     template_name = "fiches/home.html"