Resolve #461: Add calendar picker for date attribute fields (#734)

* Resolve #461: Add calendar picker for date attribute fields * Add JQuery UI localization * Add picker in templates for adding entities
Cadasta · Sep 29, 2016 · 36d9500 · 36d9500
1 parent f283a39
commit 36d9500
Show file tree

Hide file tree

Showing 20 changed files with 180 additions and 7 deletions.
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_add.html b/cadasta/templates/party/party_add.html
@@ -1,5 +1,31 @@
 {% extends "organization/project_wrapper.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>
+{% if get_current_language != "en-us" %}
+{% get_current_language as LANGUAGE_CODE %}
+<script src="https://cdn.rawgit.com/jquery/jquery-ui/1.12.1/ui/i18n/datepicker-{{ LANGUAGE_CODE }}.js"></script>
+{% endif %}
+<script>
+  $(document).ready(function () {
+    $('.datepicker').datepicker({
+      yearRange: "c-200:c+200",
+      changeMonth: true,
+      changeYear: true,
+    });
+  });
+</script>
+{% endblock %}
 
 {% block content %}
 <div class="col-md-11 col-md-offset-1 content-single">

diff --git a/cadasta/templates/party/party_edit.html b/cadasta/templates/party/party_edit.html
@@ -1,5 +1,31 @@
 {% 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>
+{% if get_current_language != "en-us" %}
+{% get_current_language as LANGUAGE_CODE %}
+<script src="https://cdn.rawgit.com/jquery/jquery-ui/1.12.1/ui/i18n/datepicker-{{ LANGUAGE_CODE }}.js"></script>
+{% endif %}
+<script>
+  $(document).ready(function () {
+    $('.datepicker').datepicker({
+      yearRange: "c-200:c+200",
+      changeMonth: true,
+      changeYear: true,
+    });
+  });
+</script>
+{% endblock %}
 
 {% block modals %}
 <div class="modal-backdrop">
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,4 +27,8 @@ @@
             top: 0;
         }
       }
+    }
+    .ui-datepicker {
+      z-index: 2000 !important;
     }