Changed DateSelector so that the input type is 'date'. Changed CSS fo…

…r DateSelector so that it is wide enough for default date input. Period forms now use the custom DateSelector widget instead of the built-in one from Django (since that one uses 'text' as input).

amelie/style/static/css/compiled.css

@@ -11002,6 +11002,9 @@ li.courses-soon {
     overflow-y: auto;
   }
 }
+.ia-datepicker {
+  width: 125px;
+}
 .ia_messages {
   list-style-type: none;
   padding: 0 0 0 20px;

amelie/style/static/less/classes/helper-classes.less

@@ -144,4 +144,8 @@
       overflow-y: auto;
     }
   }
-}
+}
+
+.ia-datepicker {
+  width: 125px;
+}

amelie/tools/forms.py

@@ -14,7 +14,7 @@
 from amelie.style.forms import inject_style
 from amelie.members.models import LANGUAGE_CHOICES
 from amelie.tools.models import DataExportInformation
-from amelie.tools.widgets import DateTimeSelector
+from amelie.tools.widgets import DateTimeSelector, DateSelector
 
 
 def attach_hidden(form):
@@ -32,8 +32,8 @@ def as_hidden(self):
 
 
 class PeriodForm(forms.Form):
-    from_date = forms.DateField(label='Begin date:', initial=timezone.now().date() - timedelta(days=365))
-    to_date = forms.DateField(label='End date:', initial=timezone.now().date())
+    from_date = forms.DateField(label='Begin date:', initial=timezone.now().date() - timedelta(days=365), widget=DateSelector)
+    to_date = forms.DateField(label='End date:', initial=timezone.now().date(), widget=DateSelector)
 
     def __init__(self, *args, **kwargs):
         if 'to_date_required' in kwargs:
@@ -51,8 +51,8 @@ def __init__(self, *args, **kwargs):
 
 class PeriodKeywordForm(forms.Form):
     keywords = forms.CharField(max_length=20, label=_('Keywords'))
-    from_date = forms.DateField(label=_('Begin date:'), initial=timezone.now().date() - timedelta(days=365))
-    to_date = forms.DateField(label=_('End date:'), initial=timezone.now().date())
+    from_date = forms.DateField(label=_('Begin date:'), initial=timezone.now().date() - timedelta(days=365), widget=DateSelector)
+    to_date = forms.DateField(label=_('End date:'), initial=timezone.now().date(), widget=DateSelector)
 
     def __init__(self, *args, **kwargs):
         if 'to_date_required' in kwargs:

amelie/tools/widgets.py

@@ -16,6 +16,7 @@ def __init__(self, attrs=None):
         super(DateTimeSelector, self).__init__(attrs, '%Y-%m-%d', '%H:%M')
         # self.widgets[0].input_type = 'date' # commented out because we use a non-native date picker now
         # self.widgets[1].input_type = 'time' # commented out because we use a non-native date picker now
+
         if (attrs and 'class' in attrs or
                 (self.widgets[0].attrs and 'class' in self.widgets[0].attrs)):
             self.widgets[0].attrs['class'] += ' date_selector'
@@ -32,17 +33,18 @@ def render(self, *args, **kwargs):
 
 
 class DateSelector(DateInput):
+    input_type = 'date'
     """
-    A Widget that uses a <input type="text"> box with JavaScript selector.
+    A Widget that uses a <input type="date"> box with JavaScript selector.
     """
 
     def __init__(self, attrs=None):
         if not attrs:
             attrs = {}
         if 'class' in attrs:
-            attrs['class'] += ' date_selector'
+            attrs['class'] += ' ia-datepicker'
         else:
-            attrs['class'] = 'date_selector'
+            attrs['class'] = 'ia-datepicker'
         super(DateSelector, self).__init__(attrs, '%Y-%m-%d')