Commit df6f6e31 authored by Phil Hughes's avatar Phil Hughes

Replaced more jQuery UI datepickers

parent b138ec3d
......@@ -96,6 +96,7 @@
break;
case 'projects:milestones:new':
case 'projects:milestones:edit':
case 'projects:milestones:update':
new ZenMode();
new gl.DueDateSelectors();
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 */
/* global dateFormat */
/* global Pikaday */
(function(global) {
class DueDateSelect {
......@@ -31,6 +32,10 @@
initGlDropdown() {
this.$dropdown.glDropdown({
opened: () => {
const calendar = this.$datePicker.data('pikaday');
calendar.show();
},
hidden: () => {
this.$selectbox.hide();
this.$value.css('display', '');
......@@ -39,25 +44,37 @@
}
initDatePicker() {
this.$datePicker.datepicker({
dateFormat: 'yy-mm-dd',
defaultDate: $("input[name='" + this.fieldName + "']").val(),
altField: "input[name='" + this.fieldName + "']",
onSelect: () => {
const $dueDateInput = $(`input[name='${this.fieldName}']`);
const calendar = new Pikaday({
field: $dueDateInput.get(0),
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')) {
gl.issueBoards.BoardsStore.detail.issue.dueDate = $(`input[name='${this.fieldName}']`).val();
gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val();
this.updateIssueBoardIssue();
} else {
return this.saveDueDate(true);
this.saveDueDate(true);
}
}
});
this.$datePicker.append(calendar.el);
this.$datePicker.data('pikaday', calendar);
}
initRemoveDueDate() {
this.$block.on('click', '.js-remove-due-date', (e) => {
const calendar = this.$datePicker.data('pikaday');
e.preventDefault();
calendar.setDate(null);
if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
this.updateIssueBoardIssue();
......@@ -154,14 +171,24 @@
}
initMilestoneDatePicker() {
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd'
$('.datepicker').each(function() {
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) => {
e.preventDefault();
const datepicker = $(e.target).siblings('.datepicker');
$.datepicker._clearDate(datepicker);
const calendar = $(e.target).siblings('.datepicker').data('pikaday');
calendar.setDate(null);
});
}
......
......@@ -437,7 +437,7 @@
}
};
GitLabDropdown.prototype.opened = function() {
GitLabDropdown.prototype.opened = function(e) {
var contentHtml;
this.resetRows();
this.addArrowKeyEvent();
......@@ -457,6 +457,10 @@
this.positionMenuAbove();
}
if (this.options.opened) {
this.options.opened.call(this, e);
}
return this.dropdown.trigger('shown.gl.dropdown');
};
......
......@@ -40,10 +40,11 @@
new Pikaday({
field: $issuableDueDate.get(0),
format: 'yyyy-mm-dd',
defaultDate: new Date($issuableDueDate.val()),
onSelect: function(dateText) {
$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
// children of an element with the `clearable-input` class, and have a sibling
......@@ -11,21 +13,34 @@
}
const inputs = $(selector);
inputs.datepicker({
dateFormat: 'yy-mm-dd',
minDate: 1,
onSelect: function onSelect() {
$(this).trigger('change');
inputs.each((i, el) => {
const $input = $(el);
const calendar = new Pikaday({
field: $input.get(0),
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) {
event.preventDefault();
const input = $(this).closest('.clearable-input').find(selector);
input.datepicker('setDate', null)
.trigger('change');
const calendar = input.data('pikaday');
calendar.setDate(null);
input.trigger('change');
toggleClearInput.call(input);
});
......
......@@ -10,6 +10,3 @@
.col-sm-10
= 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
: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