Commit df6f6e31 authored by Phil Hughes's avatar Phil Hughes

Replaced more jQuery UI datepickers

parent b138ec3d
...@@ -96,6 +96,7 @@ ...@@ -96,6 +96,7 @@
break; break;
case 'projects:milestones:new': case 'projects:milestones:new':
case 'projects:milestones:edit': case 'projects:milestones:edit':
case 'projects:milestones:update':
new ZenMode(); new ZenMode();
new gl.DueDateSelectors(); new gl.DueDateSelectors();
new gl.GLForm($('.milestone-form')); new gl.GLForm($('.milestone-form'));
......
/* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, no-unused-vars, no-underscore-dangle, no-new, max-len, no-sequences, no-unused-expressions, no-param-reassign */ /* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, no-unused-vars, no-underscore-dangle, no-new, max-len, no-sequences, no-unused-expressions, no-param-reassign */
/* global dateFormat */ /* global dateFormat */
/* global Pikaday */
(function(global) { (function(global) {
class DueDateSelect { class DueDateSelect {
...@@ -31,6 +32,10 @@ ...@@ -31,6 +32,10 @@
initGlDropdown() { initGlDropdown() {
this.$dropdown.glDropdown({ this.$dropdown.glDropdown({
opened: () => {
const calendar = this.$datePicker.data('pikaday');
calendar.show();
},
hidden: () => { hidden: () => {
this.$selectbox.hide(); this.$selectbox.hide();
this.$value.css('display', ''); this.$value.css('display', '');
...@@ -39,25 +44,37 @@ ...@@ -39,25 +44,37 @@
} }
initDatePicker() { initDatePicker() {
this.$datePicker.datepicker({ const $dueDateInput = $(`input[name='${this.fieldName}']`);
dateFormat: 'yy-mm-dd',
defaultDate: $("input[name='" + this.fieldName + "']").val(), const calendar = new Pikaday({
altField: "input[name='" + this.fieldName + "']", field: $dueDateInput.get(0),
onSelect: () => { format: 'yyyy-mm-dd',
defaultDate: new Date($dueDateInput.val()),
onSelect: (dateText) => {
const formattedDate = dateFormat(new Date(dateText), 'yyyy-mm-dd');
$dueDateInput.val(formattedDate);
if (this.$dropdown.hasClass('js-issue-boards-due-date')) { if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
gl.issueBoards.BoardsStore.detail.issue.dueDate = $(`input[name='${this.fieldName}']`).val(); gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val();
this.updateIssueBoardIssue(); this.updateIssueBoardIssue();
} else { } else {
return this.saveDueDate(true); this.saveDueDate(true);
} }
} }
}); });
this.$datePicker.append(calendar.el);
this.$datePicker.data('pikaday', calendar);
} }
initRemoveDueDate() { initRemoveDueDate() {
this.$block.on('click', '.js-remove-due-date', (e) => { this.$block.on('click', '.js-remove-due-date', (e) => {
const calendar = this.$datePicker.data('pikaday');
e.preventDefault(); e.preventDefault();
calendar.setDate(null);
if (this.$dropdown.hasClass('js-issue-boards-due-date')) { if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
gl.issueBoards.BoardsStore.detail.issue.dueDate = ''; gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
this.updateIssueBoardIssue(); this.updateIssueBoardIssue();
...@@ -154,14 +171,24 @@ ...@@ -154,14 +171,24 @@
} }
initMilestoneDatePicker() { initMilestoneDatePicker() {
$('.datepicker').datepicker({ $('.datepicker').each(function() {
dateFormat: 'yy-mm-dd' const $datePicker = $(this);
const calendar = new Pikaday({
field: $datePicker.get(0),
format: 'yyyy-mm-dd',
defaultDate: new Date($datePicker.val()),
onSelect(dateText) {
$datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
}
});
$datePicker.data('pikaday', calendar);
}); });
$('.js-clear-due-date,.js-clear-start-date').on('click', (e) => { $('.js-clear-due-date,.js-clear-start-date').on('click', (e) => {
e.preventDefault(); e.preventDefault();
const datepicker = $(e.target).siblings('.datepicker'); const calendar = $(e.target).siblings('.datepicker').data('pikaday');
$.datepicker._clearDate(datepicker); calendar.setDate(null);
}); });
} }
......
...@@ -437,7 +437,7 @@ ...@@ -437,7 +437,7 @@
} }
}; };
GitLabDropdown.prototype.opened = function() { GitLabDropdown.prototype.opened = function(e) {
var contentHtml; var contentHtml;
this.resetRows(); this.resetRows();
this.addArrowKeyEvent(); this.addArrowKeyEvent();
...@@ -457,6 +457,10 @@ ...@@ -457,6 +457,10 @@
this.positionMenuAbove(); this.positionMenuAbove();
} }
if (this.options.opened) {
this.options.opened.call(this, e);
}
return this.dropdown.trigger('shown.gl.dropdown'); return this.dropdown.trigger('shown.gl.dropdown');
}; };
......
...@@ -40,10 +40,11 @@ ...@@ -40,10 +40,11 @@
new Pikaday({ new Pikaday({
field: $issuableDueDate.get(0), field: $issuableDueDate.get(0),
format: 'yyyy-mm-dd', format: 'yyyy-mm-dd',
defaultDate: new Date($issuableDueDate.val()),
onSelect: function(dateText) { onSelect: function(dateText) {
$issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd')); $issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
} }
}).setDate(new Date($issuableDueDate.val())); });
} }
} }
......
/* global Pikaday */
/* global dateFormat */
(() => { (() => {
// Add datepickers to all `js-access-expiration-date` elements. If those elements are // 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 // children of an element with the `clearable-input` class, and have a sibling
...@@ -11,21 +13,34 @@ ...@@ -11,21 +13,34 @@
} }
const inputs = $(selector); const inputs = $(selector);
inputs.datepicker({ inputs.each((i, el) => {
dateFormat: 'yy-mm-dd', const $input = $(el);
minDate: 1,
onSelect: function onSelect() { const calendar = new Pikaday({
$(this).trigger('change'); field: $input.get(0),
toggleClearInput.call(this); format: 'yyyy-mm-dd',
}, minDate: new Date(),
defaultDate: new Date($input.val()),
onSelect: (dateText) => {
$input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
$input.trigger('change');
toggleClearInput.call(this);
},
});
$input.data('pikaday', calendar);
}); });
inputs.next('.js-clear-input').on('click', function clicked(event) { inputs.next('.js-clear-input').on('click', function clicked(event) {
event.preventDefault(); event.preventDefault();
const input = $(this).closest('.clearable-input').find(selector); const input = $(this).closest('.clearable-input').find(selector);
input.datepicker('setDate', null) const calendar = input.data('pikaday');
.trigger('change');
calendar.setDate(null);
input.trigger('change');
toggleClearInput.call(input); toggleClearInput.call(input);
}); });
......
...@@ -10,6 +10,3 @@ ...@@ -10,6 +10,3 @@
.col-sm-10 .col-sm-10
= f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date" = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
%a.inline.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date %a.inline.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
:javascript
new gl.DueDateSelectors();
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment