Resolve #461: Add calendar picker for date attribute fields

Cadasta · Sep 27, 2016 · dde1424 · dde1424
1 parent a3f5dee
commit dde1424
Show file tree

Hide file tree

Showing 17 changed files with 100 additions and 1 deletion.
diff --git a/cadasta/core/static/css/images/ui-icons_444444_256x240.png b/cadasta/core/static/css/images/ui-icons_444444_256x240.png
diff --git a/cadasta/core/static/css/images/ui-icons_555555_256x240.png b/cadasta/core/static/css/images/ui-icons_555555_256x240.png
diff --git a/cadasta/core/static/css/images/ui-icons_777620_256x240.png b/cadasta/core/static/css/images/ui-icons_777620_256x240.png
diff --git a/cadasta/core/static/css/images/ui-icons_777777_256x240.png b/cadasta/core/static/css/images/ui-icons_777777_256x240.png
diff --git a/cadasta/core/static/css/images/ui-icons_cc0000_256x240.png b/cadasta/core/static/css/images/ui-icons_cc0000_256x240.png
diff --git a/cadasta/core/static/css/images/ui-icons_ffffff_256x240.png b/cadasta/core/static/css/images/ui-icons_ffffff_256x240.png
diff --git a/cadasta/core/static/css/jquery-ui.min.css b/cadasta/core/static/css/jquery-ui.min.css
diff --git a/cadasta/core/static/css/jquery-ui.structure.min.css b/cadasta/core/static/css/jquery-ui.structure.min.css
diff --git a/cadasta/core/static/css/jquery-ui.theme.min.css b/cadasta/core/static/css/jquery-ui.theme.min.css
diff --git a/cadasta/core/static/css/main.css b/cadasta/core/static/css/main.css
diff --git a/cadasta/core/static/css/widgets.scss b/cadasta/core/static/css/widgets.scss
@@ -27,4 +27,8 @@
         top: 0;
     }
   }
+}
+
+.ui-datepicker {
+  z-index: 2000 !important;
 }
diff --git a/cadasta/core/static/js/jquery-ui.min.js b/cadasta/core/static/js/jquery-ui.min.js
diff --git a/cadasta/templates/party/party_edit.html b/cadasta/templates/party/party_edit.html
@@ -1,5 +1,28 @@
 {% extends "party/party_detail.html" %}
 {% load i18n %}
+{% load staticfiles %}
+
+{% block extra_head %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}">
+<link rel="stylesheet" href="{% static 'css/jquery-ui.structure.min.css' %}">
+<link rel="stylesheet" href="{% static 'css/jquery-ui.theme.min.css' %}">
+{% endblock %}
+
+{% block extra_script %}
+{{ block.super }}
+<script src="{% static 'js/jquery-ui.min.js' %}"></script>
+<script src="{% static 'js/map_utils.js' %}"></script>
+<script>
+  $(document).ready(function () {
+    $('.datepicker').datepicker({
+      yearRange: "c-200:c+200",
+      changeMonth: true,
+      changeYear: true,
+    });
+  });
+</script>
+{% endblock %}
 
 {% block modals %}
 <div class="modal-backdrop">

diff --git a/cadasta/templates/party/party_form.html b/cadasta/templates/party/party_form.html
@@ -19,7 +19,11 @@
   <div class="form-group{% if field.errors %} has-error{% endif %}">
     <label for="{{ field.id_for_label }}">{{ field.label }}</label>
     <label class="pull-right control-label">{{ field.errors }}</label>
-    {% render_field field class="form-control" %}
+    {% if field|field_type == "datefield" %}
+    {% render_field field class+="form-control datepicker" %}
+    {% else %}
+    {% render_field field class+="form-control" %}
+    {% endif %}
   </div>
   {% endif %}
 {% endfor %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,4 +27,8 @@ @@
             top: 0;
         }
       }
+    }
+    .ui-datepicker {
+      z-index: 2000 !important;
     }