Add MemberExpirationDate JS helper

This helper adds a datepicker to all `js-access-expiration-date`
elements. If that element is a child of a `clearable-input` element and
has a sibling `js-clear-input` element, then it will show a working
clear button to the right of the input field.

1 files changed, 32 insertions, 0 deletions

diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
new file mode 100644
index 00000000000..fdcf3b115b7
--- /dev/null
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -0,0 +1,32 @@
+(function() {
+  // Add datepickers to all `js-access-expiration-date` elements. If those elements are
+  // children of an element with the `clearable-input` class, and have a sibling
+  // `js-clear-input` element, then show that element when there is a value in the
+  // datepicker, and make clicking on that element clear the field.
+  //
+  this.MemberExpirationDate = function() {
+    $('.js-access-expiration-date').each(function(i, element) {
+      var expirationDateInput = $(element);
+
+      function toggleClearInput() {
+        expirationDateInput.parent().toggleClass('has-value', !!expirationDateInput.val());
+      }
+
+      expirationDateInput.datepicker({
+        dateFormat: 'yy-mm-dd',
+        minDate: 1,
+        onSelect: toggleClearInput
+      });
+
+      expirationDateInput.on('blur', toggleClearInput);
+
+      toggleClearInput();
+
+      expirationDateInput.next('.js-clear-input').on('click', function(event) {
+        event.preventDefault();
+        expirationDateInput.datepicker('setDate', null);
+        toggleClearInput();
+      });
+    });
+  };
+}).call(this);