Posts the due date through AJAX

app/assets/javascripts/due_date_select.js.coffee

+class @DueDateSelect
+  constructor: ->
+    $('.js-due-date-select').each (i, dropdown) ->
+      $dropdown = $(dropdown)
+      $dropdownParent = $dropdown.closest('.dropdown')
+      $addBtn = $('.js-due-date-add', $dropdownParent)
+      $datePicker = $dropdownParent.find('.js-due-date-calendar')
+      $block = $dropdown.closest('.block')
+      $loading = $block.find('.block-loading').hide()
+      $selectbox = $dropdown.closest('.selectbox')
+      $value = $block.find('.value')
+
+      fieldName = $dropdown.data('field-name')
+      abilityName = $dropdown.data('ability-name')
+      issueUpdateURL = $dropdown.data('issue-update')
+
+      $addBtn.on 'click', (e) ->
+        e.preventDefault()
+        e.stopPropagation()
+
+        # Create the post date
+        value = $("input[name='#{fieldName}']").val()
+        mediumDate = $.datepicker.formatDate("M d, yy", new Date(value))
+
+        data = {}
+        data[abilityName] = {}
+        data[abilityName].due_date = value
+
+        $.ajax(
+          type: 'PUT'
+          url: issueUpdateURL
+          data: data
+          beforeSend: ->
+            $loading.fadeIn()
+            $dropdown.trigger('loading.gl.dropdown')
+            $selectbox.hide()
+            $value.removeAttr('style')
+
+            $value.html(mediumDate)
+        ).done (data) ->
+          $dropdown.trigger('loaded.gl.dropdown')
+          $loading.fadeOut()
+
+      $datePicker.datepicker(
+        dateFormat: "yy-mm-dd",
+        defaultDate: $("input[name='#{fieldName}']").val()
+        altField: "input[name='#{fieldName}']"
+      )

app/assets/stylesheets/framework/dropdowns.scss

@@ -358,6 +358,13 @@
   border-top: 1px solid $dropdown-divider-color;
 }
 
+.dropdown-due-date-footer {
+  padding-top: 0;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-top: 0;
+}
+
 .dropdown-footer-list {
   font-size: 14px;
 
@@ -395,3 +402,83 @@
   height: 15px;
   border-radius: $border-radius-base;
 }
+
+.dropdown-menu-due-date {
+  .ui-widget {
+    table {
+      margin: 0;
+    }
+
+    &.ui-datepicker-inline {
+      padding: 0 10px;
+      border: 0;
+      width: 100%;
+    }
+
+    .ui-datepicker-header {
+      padding: 8px;
+      border: 0;
+    }
+
+    .ui-state-active,
+    .ui-state-hover {
+      color: $md-link-color;
+      background-color: #ecf3fe;
+    }
+
+    .ui-datepicker-prev,
+    .ui-datepicker-next {
+      &:hover {
+        background-color: transparent;
+        border: 0;
+      }
+    }
+
+    .ui-datepicker-prev {
+      left: 1px;
+      top: 1px;
+    }
+
+    .ui-datepicker-next {
+      right: 1px;
+      top: 1px;
+    }
+
+    td {
+      padding: 0;
+      border: 1px solid rgba(0, 0, 0, .1);
+
+      &:first-child {
+        border-left: 0;
+      }
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      a {
+        line-height: 17px;
+        border: 0;
+        border-radius: 0;
+      }
+    }
+
+    .ui-datepicker-title {
+      color: #555;
+      font-size: 15px;
+      line-height: 1;
+      font-weight: normal;
+    }
+  }
+
+  th {
+    padding: 5px 0;
+    color: #b8b8b8;
+    font-weight: normal;
+    text-transform: lowercase;
+  }
+
+  .ui-datepicker-unselectable {
+    background-color: #faf9f9;
+  }
+}

app/assets/stylesheets/pages/issuable.scss

@@ -242,7 +242,7 @@
     }
   }
 
-  .btn {
+  .issuable-pager {
     background: $gray-normal;
     border: 1px solid $border-gray-normal;
     &:hover {
@@ -251,7 +251,7 @@
     }
   }
 
-  a:not(.btn) {
+  a:not(.issuable-pager) {
     &:hover {
       color: $md-link-color;
       text-decoration: none;

app/views/shared/issuable/_sidebar.html.haml

@@ -10,14 +10,14 @@
         = sidebar_gutter_toggle_icon
       .issuable-nav.hide-collapsed.pull-right.btn-group{role: 'group', "aria-label" => '...'}
         - if prev_issuable = prev_issuable_for(issuable)
-          = link_to 'Prev', [@project.namespace.becomes(Namespace), @project, prev_issuable], class: 'btn btn-default prev-btn'
+          = link_to 'Prev', [@project.namespace.becomes(Namespace), @project, prev_issuable], class: 'btn btn-default prev-btn issuable-pager'
         - else
-          %a.btn.btn-default.disabled{href: '#'}
+          %a.btn.btn-default.issuable-pager.disabled{href: '#'}
             Prev
         - if next_issuable = next_issuable_for(issuable)
-          = link_to 'Next', [@project.namespace.becomes(Namespace), @project, next_issuable], class: 'btn btn-default next-btn'
+          = link_to 'Next', [@project.namespace.becomes(Namespace), @project, next_issuable], class: 'btn btn-default next-btn issuable-pager'
         - else
-          %a.btn.btn-default.disabled{href: '#'}
+          %a.btn.btn-default.issuable-pager.disabled{href: '#'}
             Next
 
     = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
@@ -84,20 +84,32 @@
               - else
                 .light None
           .title.hide-collapsed
-            %label
-              Due Date
+            Due Date
+            = icon('spinner spin', class: 'block-loading')
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
-              .pull-right
-                = link_to 'Edit', '#', class: 'edit-link'
-          .value.hide-collapsed
+              = link_to 'Edit', '#', class: 'edit-link pull-right'
+          .value.bold.hide-collapsed
             - if issuable.due_date
-              = icon('calendar')
               = issuable.due_date.to_s(:medium)
             - else
               .light None
-          .selectbox.hide-collapsed
-            = f.text_field :due_date
-            = hidden_field_tag :issuable_context
+          - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
+            .selectbox.hide-collapsed
+              = hidden_field_tag "#{issuable.to_ability_name}[due_date]", issuable.due_date
+              .dropdown
+                %button.dropdown-menu-toggle.js-due-date-select{ type: "button", data: { toggle: "dropdown", field_name: "#{issuable.to_ability_name}[due_date]", ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable) } }
+                  %span.dropdown-toggle-text
+                    Due date
+                  = icon('chevron-down')
+                .dropdown-menu.dropdown-menu-due-date
+                  = dropdown_title("Due date")
+                  = dropdown_content do
+                    .js-due-date-calendar
+                  .dropdown-footer.dropdown-due-date-footer.clearfix
+                    %button.btn.btn-primary.pull-left.js-due-date-add{ type: "button" }
+                      Add
+                    %button.btn.btn-default.pull-right{ type: "button" }
+                      Cancel
 
       - if issuable.project.labels.any?
         .block.labels
@@ -178,3 +190,4 @@
       new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
       new Subscription('.subscription')
       new Sidebar();
+      new DueDateSelect();