Skip to content

Commit ed92279

Browse files
wuda-iowuda-io
authored
Merge pull request #592 from gselderslaghs/datepicker-confirmation-buttons-util
enhancement(Datepicker) implementation with confirmation buttons util
2 parents a7d666a + b60bef7 commit ed92279

File tree

2 files changed

+102
-18
lines changed

2 files changed

+102
-18
lines changed

‎spec/tests/datepicker/datepickerSpec.js

+50-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ describe('Datepicker Plugin', () => {
2222
setTimeout(() => {
2323
const day1 = document.querySelector('.datepicker-container button[data-day="1"]');
2424
day1.click();
25-
document.querySelector('.datepicker-done').click();
25+
// Removed since autoSubmit option
26+
// document.querySelector('.datepicker-done').click();
2627
setTimeout(() => {
2728
const year = today.getFullYear();
2829
const month = today.getMonth() + 1;
@@ -43,7 +44,8 @@ describe('Datepicker Plugin', () => {
4344
setTimeout(() => {
4445
const day1 = document.querySelector('.datepicker-container button[data-day="1"]');
4546
day1.click();
46-
document.querySelector('.datepicker-done').click();
47+
// Removed since autoSubmit option
48+
// document.querySelector('.datepicker-done').click();
4749
setTimeout(() => {
4850
const year = today.getFullYear() - 100;
4951
const month = today.getMonth() + 1;
@@ -105,11 +107,56 @@ describe('Datepicker Plugin', () => {
105107
}, i * 10);
106108
}
107109
setTimeout(() => {
108-
document.querySelector('.datepicker-done').click();
110+
// Removed since autoSubmit option
111+
// document.querySelector('.datepicker-done').click();
109112
expect(document.querySelectorAll('.datepicker').length === 3).toEqual(true);
110113
done();
111114
}, 40);
112115
}, 10);
113116
});
117+
118+
it('should integrate action util buttons by option', (done) => {
119+
const input = document.querySelector('#datepickerInput');
120+
M.Datepicker.init(input, { format: 'mm/dd/yyyy', autoSubmit: false, showClearBtn: true });
121+
const today = new Date();
122+
const clearBtn = document.querySelector('.datepicker-clear');
123+
const cancelBtn = document.querySelector('.btn-cancel');
124+
const confirmBtn = document.querySelector('.btn-confirm');
125+
const year = today.getFullYear();
126+
const month = today.getMonth() + 1;
127+
const day = today.getDay() <= 26 ? today.getDay() + 2 : today.getDay() - 2;
128+
129+
setTimeout(() => {
130+
expect(clearBtn).toExist('clear button should exist');
131+
expect(cancelBtn).toExist('cancel should exist');
132+
expect(confirmBtn).toExist('confirm should exist');
133+
let dayEl = document.querySelector(`.datepicker-container button[data-day="${day}"]`);
134+
dayEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
135+
confirmBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
136+
setTimeout(() => {
137+
expect(input.value)
138+
.withContext('value should change with confirm interaction')
139+
.toEqual(`${month < 10 ? `0${month}` : month}/0${day}/${year}`);
140+
dayEl = document.querySelector('.datepicker-container button[data-day="1"]');
141+
dayEl.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
142+
cancelBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
143+
setTimeout(() => {
144+
expect(input.value)
145+
.withContext('value should not change with cancel interaction')
146+
.toEqual(`${month < 10 ? `0${month}` : month}/0${day}/${year}`);
147+
clearBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
148+
setTimeout(() => {
149+
expect(input.value.length)
150+
.withContext('input field should be empty with clear interaction')
151+
.toEqual(0);
152+
expect(document.querySelector('.datepicker-container button.is-selected'))
153+
.withContext('there should be no selected day with clear interaction')
154+
.toBe(null);
155+
done();
156+
}, 10);
157+
}, 10);
158+
}, 10);
159+
});
160+
});
114161
});
115162
});

‎src/datepicker.ts

+52-15
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,11 @@ export interface DatepickerOptions extends BaseOptions {
125125
* @default false
126126
*/
127127
showClearBtn: boolean;
128+
/**
129+
* Autosubmit calendar day select to input field
130+
* @default false
131+
*/
132+
autoSubmit: true;
128133
/**
129134
* Internationalization options.
130135
*/
@@ -156,6 +161,17 @@ export interface DatepickerOptions extends BaseOptions {
156161
* @default null
157162
*/
158163
onInputInteraction: (() => void) | null;
164+
/**
165+
* Callback function for interaction with confirm button.
166+
* @default null
167+
*/
168+
onConfirm: (() => void) | null;
169+
/**
170+
* Callback function for interaction with close button.
171+
* @default null
172+
*/
173+
onCancel: (() => void) | null;
174+
159175
/** Field used for internal calculations DO NOT CHANGE IT */
160176
minYear?: number;
161177
/** Field used for internal calculations DO NOT CHANGE IT */
@@ -218,6 +234,8 @@ const _defaults: DatepickerOptions = {
218234
container: null,
219235
// Show clear button
220236
showClearBtn: false,
237+
// Autosubmit
238+
autoSubmit: true,
221239
// internationalization
222240
i18n: {
223241
cancel: 'Cancel',
@@ -263,6 +281,8 @@ const _defaults: DatepickerOptions = {
263281
onSelect: null,
264282
onDraw: null,
265283
onInputInteraction: null,
284+
onConfirm: null,
285+
onCancel: null,
266286
};
267287

268288
export class Datepicker extends Component<DatepickerOptions> {
@@ -272,10 +292,10 @@ export class Datepicker extends Component<DatepickerOptions> {
272292
calendarEl: HTMLElement;
273293

274294
/** CLEAR button instance. */
275-
clearBtn: HTMLElement;
295+
// clearBtn: HTMLElement;
276296
/** DONE button instance */
277-
doneBtn: HTMLElement;
278-
cancelBtn: HTMLElement;
297+
/*doneBtn: HTMLElement;
298+
cancelBtn: HTMLElement;*/
279299

280300
containerEl: HTMLElement;
281301
yearTextEl: HTMLElement;
@@ -290,6 +310,7 @@ export class Datepicker extends Component<DatepickerOptions> {
290310
calendars: [{ month: number; year: number }];
291311
private _y: number;
292312
private _m: number;
313+
private footer: HTMLElement;
293314
static _template: string;
294315

295316
constructor(el: HTMLInputElement, options: Partial<DatepickerOptions>) {
@@ -467,12 +488,17 @@ export class Datepicker extends Component<DatepickerOptions> {
467488
}
468489
}
469490

470-
if (this.options.showClearBtn) {
491+
/*if (this.options.showClearBtn) {
471492
this.clearBtn.style.visibility = '';
472493
this.clearBtn.innerText = this.options.i18n.clear;
473494
}
474495
this.doneBtn.innerText = this.options.i18n.done;
475-
this.cancelBtn.innerText = this.options.i18n.cancel;
496+
this.cancelBtn.innerText = this.options.i18n.cancel;*/
497+
Utils.createButton(this.footer, this.options.i18n.clear, ['datepicker-clear'], this.options.showClearBtn, this._handleClearClick);
498+
499+
if (!this.options.autoSubmit) {
500+
Utils.createConfirmationContainer(this.footer, this.options.i18n.done, this.options.i18n.cancel, this._confirm, this._cancel);
501+
}
476502

477503
if (this.options.container) {
478504
const optEl = this.options.container;
@@ -1085,12 +1111,12 @@ export class Datepicker extends Component<DatepickerOptions> {
10851111
this.el.addEventListener('keydown', this._handleInputKeydown);
10861112
this.el.addEventListener('change', this._handleInputChange);
10871113
this.calendarEl.addEventListener('click', this._handleCalendarClick);
1088-
this.doneBtn.addEventListener('click', () => this.setInputValues());
1089-
this.cancelBtn.addEventListener('click', this.close);
1114+
/* this.doneBtn.addEventListener('click', this._confirm);
1115+
this.cancelBtn.addEventListener('click', this._cancel);
10901116
10911117
if (this.options.showClearBtn) {
10921118
this.clearBtn.addEventListener('click', this._handleClearClick);
1093-
}
1119+
}*/
10941120
}
10951121

10961122
_setupVariables() {
@@ -1102,12 +1128,12 @@ export class Datepicker extends Component<DatepickerOptions> {
11021128
this.calendarEl = this.containerEl.querySelector('.datepicker-calendar');
11031129
this.yearTextEl = this.containerEl.querySelector('.year-text');
11041130
this.dateTextEl = this.containerEl.querySelector('.date-text');
1105-
if (this.options.showClearBtn) {
1131+
/* if (this.options.showClearBtn) {
11061132
this.clearBtn = this.containerEl.querySelector('.datepicker-clear');
11071133
}
1108-
// TODO: This should not be part of the datepicker
11091134
this.doneBtn = this.containerEl.querySelector('.datepicker-done');
1110-
this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');
1135+
this.cancelBtn = this.containerEl.querySelector('.datepicker-cancel');*/
1136+
this.footer = this.containerEl.querySelector('.datepicker-footer');
11111137

11121138
this.formats = {
11131139
d: (date: Date) => {
@@ -1199,7 +1225,7 @@ export class Datepicker extends Component<DatepickerOptions> {
11991225
this._handleDateRangeCalendarClick(selectedDate);
12001226
}
12011227

1202-
this._finishSelection();
1228+
if (this.options.autoSubmit) this._finishSelection();
12031229
} else if (target.closest('.month-prev')) {
12041230
this.prevMonth();
12051231
} else if (target.closest('.month-next')) {
@@ -1230,6 +1256,7 @@ export class Datepicker extends Component<DatepickerOptions> {
12301256
_clearDates = () => {
12311257
this.date = null;
12321258
this.endDate = null;
1259+
this.draw();
12331260
};
12341261

12351262
_handleMonthChange = (e) => {
@@ -1302,7 +1329,17 @@ export class Datepicker extends Component<DatepickerOptions> {
13021329
// Set input value to the selected date and close Datepicker
13031330
_finishSelection = () => {
13041331
this.setInputValues();
1305-
this.close();
1332+
// Commented out because of function deprecations
1333+
// this.close();
1334+
};
1335+
1336+
_confirm = () => {
1337+
this._finishSelection();
1338+
if (typeof this.options.onConfirm === 'function') this.options.onConfirm.call(this);
1339+
}
1340+
1341+
_cancel = () => {
1342+
if (typeof this.options.onCancel === 'function') this.options.onCancel.call(this);
13061343
};
13071344

13081345
// deprecated
@@ -1327,11 +1364,11 @@ export class Datepicker extends Component<DatepickerOptions> {
13271364
<div class="datepicker-calendar-container">
13281365
<div class="datepicker-calendar"></div>
13291366
<div class="datepicker-footer">
1330-
<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
1367+
<!--<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
13311368
<div class="confirmation-btns">
13321369
<button class="btn-flat datepicker-cancel waves-effect" type="button"></button>
13331370
<button class="btn-flat datepicker-done waves-effect" type="button"></button>
1334-
</div>
1371+
</div>-->
13351372
</div>
13361373
</div>
13371374
</div>`;

0 commit comments

Comments
 (0)