Use native datepicker

agstrike · Oct 10, 2021 · e87163f · e87163f
1 parent 26fec20
commit e87163f
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 69 deletions.
diff --git a/silverstrike/forms.py b/silverstrike/forms.py
@@ -80,11 +80,14 @@ class Meta:
         model = models.Transaction
         fields = ['title', 'src', 'dst',
                   'amount', 'date', 'value_date', 'category', 'notes']
+        widgets = {
+            'date': forms.DateInput(attrs={'type': 'date'})
+        }
 
     amount = forms.DecimalField(max_digits=10, decimal_places=2, min_value=0.01)
     category = forms.ModelChoiceField(
         queryset=models.Category.objects.exclude(active=False).order_by('name'), required=False)
-    value_date = forms.DateField(required=False)
+    value_date = forms.DateField(required=False, widget=forms.DateInput(attrs={'type': 'date'}))
 
     src = forms.ModelChoiceField(queryset=models.Account.objects.filter(
         account_type=models.Account.AccountType.PERSONAL, active=True))
@@ -176,6 +179,9 @@ class Meta:
         model = models.RecurringTransaction
         fields = ['title', 'date', 'amount', 'src', 'dst', 'category',
                   'interval', 'multiplier', 'weekend_handling', 'usual_month_day']
+        widgets = {
+            'date': forms.DateInput(attrs={'type': 'date'})
+        }
 
     def clean_amount(self):
         amount = self.cleaned_data['amount']
@@ -247,6 +253,9 @@ class SplitForm(forms.ModelForm):
     class Meta:
         model = models.Split
         fields = ['title', 'account', 'opposing_account', 'date', 'amount', 'category']
+        widgets = {
+            'date': forms.DateInput(attrs={'type': 'date'})
+        }
     account = forms.ModelChoiceField(queryset=models.Account.objects.exclude(
         account_type=models.Account.AccountType.SYSTEM))
     opposing_account = forms.ModelChoiceField(queryset=models.Account.objects.exclude(

diff --git a/silverstrike/static/silverstrike/css/style.css b/silverstrike/static/silverstrike/css/style.css
@@ -31,6 +31,11 @@
   line-height: inherit !important;
 }
 
+/* Fix for adminlte dateinput issue */
+input[type="date"].form-control {
+  line-height: unset;
+}
+
 /* fix for adminlte issue https://github.com/almasaeed2010/AdminLTE/issues/1607 */
 @media (max-width: 767px) {
   .skin-blue-light .main-header .navbar .dropdown-menu li a {

diff --git a/silverstrike/templates/silverstrike/base.html b/silverstrike/templates/silverstrike/base.html
@@ -14,12 +14,12 @@
     <link rel="manifest" href="{% url 'manifest' %}">
     {% block stylesheets %}
     {% endblock %}
-    <link rel="stylesheet" href="{% static 'silverstrike/css/style.css' %}">
     <link rel="stylesheet" href="{% static 'vendor/css/bootstrap.min.css' %}">
     <link rel="stylesheet" href="{% static 'vendor/css/font-awesome.min.css' %}">
     <link rel="stylesheet" href="{% static 'vendor/css/AdminLTE.min.css' %}">
     <link rel="stylesheet" href="{% static 'vendor/css/skin-blue-light.min.css' %}">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
+    <link rel="stylesheet" href="{% static 'silverstrike/css/style.css' %}">
     <title>SilverStrike</title>
   </head>
   <body class="hold-transition skin-blue-light sidebar-mini">

diff --git a/silverstrike/templates/silverstrike/export.html b/silverstrike/templates/silverstrike/export.html
@@ -21,11 +21,15 @@ <h3 class="box-title">{% trans 'Export' %}</h3>
       {% csrf_token %}
       <div class="form-group">
         <label class="control-label col-sm-2" for="{{ form.start.id_for_label }}">{{ form.start.label }}</label>
-        <div class="col-sm-8">{{ form.start|add_class:"form-control date-input" }}</div>
+        <div class="col-sm-8">
+          <input id="id_start" class="form-control" type="date" name="start">
+        </div>
       </div>
       <div class="form-group">
         <label class="control-label col-sm-2" for="{{ form.end.id_for_label }}">{{ form.end.label }}</label>
-        <div class="col-sm-8">{{ form.end|add_class:"form-control date-input" }}</div>
+        <div class="col-sm-8">
+          <input id="id_end" class="form-control" type="date" name="end">
+        </div>
       </div>
       <div class="form-group">
         <label class="control-label col-sm-2" for="{{ form.accounts.id_for_label }}">{{ form.accounts.label }}</label>
@@ -40,19 +44,4 @@ <h3 class="box-title">{% trans 'Export' %}</h3>
   </form>
 
 </div>
-{% endblock %}
-{% block scripts %}
-<script src="{% static 'vendor/js/bootstrap-datepicker.min.js' %}"></script>
-
-<script>
-$(function() {
-  $('.date-input').datepicker({
-  autoclose: true,
-  format: 'yyyy-mm-dd',
-  orientation: 'bottom'
-
-  });
-  $('.date-input').attr('autocomplete', 'off');
-})
-</script>
 {% endblock %}
diff --git a/silverstrike/templates/silverstrike/reconcile.html b/silverstrike/templates/silverstrike/reconcile.html
@@ -63,12 +63,7 @@ <h3 class="box-title">{% trans 'Create reconcile transaction' %}</h3>
 </div>
 {% endblock %}
 
-{% block stylesheets %}
-<link rel="stylesheet" href="{% static 'vendor/css/bootstrap-datepicker.min.css' %}">
-{% endblock %}
-
 {% block scripts %}
-<script src="{% static 'vendor/js/bootstrap-datepicker.min.js' %}"></script>
 <script src="{% static 'vendor/js/bootstrap3-typeahead.min.js' %}"></script>
 
 <script>
@@ -78,13 +73,6 @@ <h3 class="box-title">{% trans 'Create reconcile transaction' %}</h3>
     changeEvent = e;
     $('#amount-difference').text({{ account.balance }} - e.target.value);
   });
-  $('#id_date').datepicker({
-  autoclose: true,
-  format: 'yyyy-mm-dd',
-  endDate: '0d',
-  orientation: 'bottom'
-  });
-  $('#id_date').attr('autocomplete', 'off');
 })
 </script>
 {% endblock %}
diff --git a/silverstrike/templates/silverstrike/recurringtransaction_form.html b/silverstrike/templates/silverstrike/recurringtransaction_form.html
@@ -58,23 +58,4 @@ <h3 class="box-title">{% trans 'Transaction Details' %}</h3>
     </form>
 </div>
 </div>
-{% endblock %}
-
-{% block stylesheets %}
-<link rel="stylesheet" href="{% static 'vendor/css/bootstrap-datepicker.min.css' %}">
-{% endblock %}
-
-{% block scripts %}
-<script src="{% static 'vendor/js/bootstrap-datepicker.min.js' %}"></script>
-<script>
-$(function() {
-  $('#id_date').datepicker({
-    autoclose: true,
-    format: 'yyyy-mm-dd',
-    startDate: '0d',
-    orientation: 'bottom'
-  });
-  $('#id_date').attr('autocomplete', 'off');
-})
-</script>
 {% endblock %}
diff --git a/silverstrike/templates/silverstrike/transaction_edit.html b/silverstrike/templates/silverstrike/transaction_edit.html
@@ -72,7 +72,7 @@ <h3 class="box-title">{% trans 'Transaction Details' %}</h3>
       <div class="form-group{% if form.date.errors %} has-error{% endif %}">
         <label class="col-sm-2 control-label" for="{{ form.date.id_for_label }}">{{ form.date.label }}</label>
         <div class="col-sm-8">
-          {{ form.date|add_class:"form-control date-input" }}
+          {{ form.date|add_class:"form-control" }}
           {% for error in form.date.errors %}
           <span class="help-block">{{ error }}</span>
           {% endfor %}
@@ -81,7 +81,7 @@ <h3 class="box-title">{% trans 'Transaction Details' %}</h3>
       <div class="form-group{% if form.value_date.errors %} has-error{% endif %}">
         <label class="col-sm-2 control-label" for="{{ form.value_date.id_for_label }}">{{ form.value_date.label }}</label>
         <div class="col-sm-8">
-          {{ form.value_date|add_class:"form-control date-input" }}
+          {{ form.value_date|add_class:"form-control" }}
           {% for error in form.value_date.errors %}
           <span class="help-block">{{ error }}</span>
           {% endfor %}
@@ -111,22 +111,11 @@ <h3 class="box-title">{% trans 'Transaction Details' %}</h3>
 </div>
 {% endblock %}
 
-{% block stylesheets %}
-<link rel="stylesheet" href="{% static 'vendor/css/bootstrap-datepicker.min.css' %}">
-{% endblock %}
-
 {% block scripts %}
-<script src="{% static 'vendor/js/bootstrap-datepicker.min.js' %}"></script>
 <script src="{% static 'vendor/js/bootstrap3-typeahead.min.js' %}"></script>
 
 <script>
 $(function() {
-  $('.date-input').datepicker({
-  autoclose: true,
-  format: 'yyyy-mm-dd',
-  orientation: 'bottom'
-
-  });
   if ($('input#id_src').length > 0) {
       $.getJSON('{% url 'api_accounts' 'FOREIGN' %}').done(function (data) {
           $('#id_src').typeahead({source: data});
@@ -137,7 +126,6 @@ <h3 class="box-title">{% trans 'Transaction Details' %}</h3>
           $('#id_dst').typeahead({source: data});
       });
   }
-  $('.date-input').attr('autocomplete', 'off');
 })
 </script>
 {% endblock %}
diff --git a/silverstrike/templates/silverstrike/transaction_split_form.html b/silverstrike/templates/silverstrike/transaction_split_form.html
@@ -39,7 +39,7 @@ <h3 class="box-title">{% trans 'Transaction Details' %}</h3>
           </label>
           <div class="col-sm-8">
             {% if field|widget_type == 'dateinput' %}
-            {{ field|add_class:"form-control dateinput" }}
+            {{ field|add_class:"form-control" }}
             {% else %}
             {{ field|add_class:"form-control" }}
             {% endif %}
@@ -69,11 +69,7 @@ <h3 class="box-title">{% trans 'Transaction Details' %}</h3>
           <td class="text-center">{{ field }}</td>
           {% else %}
           <td class="form-group{% if field.errors %} has-error{% endif %}">
-            {% if field|widget_type == 'dateinput' %}
-            {{ field|add_class:"form-control dateinput" }}
-            {% else %}
             {{ field|add_class:"form-control" }}
-            {% endif %}
           </td>
           {% endif %}
           {% endfor %}