diff --git a/index-dev.js b/index-dev.js
index 31d894a5..ad808555 100644
--- a/index-dev.js
+++ b/index-dev.js
@@ -16,7 +16,7 @@ let selected = false;
let opts = {
// minDate: Date.now(),
- inline: false,
+ inline: true,
visible: false,
// container: '.input-wrap',
// timepicker: true,
@@ -40,7 +40,7 @@ let opts = {
selected = true;
console.log('on select');
},
- multipleDates: false,
+ multipleDates: true,
dateFormat(d) {
// console.log(d);
return d.toLocaleString();
@@ -52,6 +52,26 @@ let opts = {
// return d.toLocaleDateString();
// })
},
+ onClickDayName({dayIndex, datepicker}) {
+ let month = datepicker.viewDate.getMonth(),
+ year = datepicker.viewDate.getFullYear(),
+ selected = [],
+ days = 31;
+
+ while(days) {
+ let date = new Date(year, month, days);
+
+ if (date.getDay() === dayIndex) {
+ selected.push(date)
+ }
+
+ days -= 1;
+ }
+
+ datepicker.clear();
+ datepicker.selectDate(selected);
+
+ },
onRenderCell(cell) {
},
// visible: true
diff --git a/src/datepicker.d.ts b/src/datepicker.d.ts
index e5e6a67f..11812be9 100644
--- a/src/datepicker.d.ts
+++ b/src/datepicker.d.ts
@@ -109,6 +109,7 @@ export declare type AirDatepickerOptions = {
} | void),
onShow: (isAnimationComplete: boolean) => void,
onHide: (isAnimationComplete: boolean) => void,
+ onClickDayName: ({dayIndex, datepicker}: {dayIndex: number, datepicker: AirDatepicker}) => void
}
diff --git a/src/datepickerBody.js b/src/datepickerBody.js
index 0fceb706..e459846e 100644
--- a/src/datepickerBody.js
+++ b/src/datepickerBody.js
@@ -53,7 +53,8 @@ export default class DatepickerBody {
addEventListener(this.$el, 'mouseover', this.onMouseOverCell);
addEventListener(this.$el, 'mouseout', this.onMouseOutCell);
- addEventListener(this.$el, 'click', this.onClickCell);
+ addEventListener(this.$el, 'click', this.onClickBody);
+
if (range && dynamicRange) {
addEventListener(this.$el, 'mousedown', this.onMouseDown);
@@ -81,17 +82,19 @@ export default class DatepickerBody {
_getDayNamesHtml(firstDay = this.dp.locale.firstDay) {
let html = '',
isWeekend = this.dp.isWeekend,
+ {onClickDayName} = this.opts,
curDay = firstDay,
i = 0;
while (i < 7) {
let day = curDay % 7;
let className = classNames('air-datepicker-body--day-name', {
- [consts.cssClassWeekend]: isWeekend(day)
+ [consts.cssClassWeekend]: isWeekend(day),
+ '-clickable-': !!onClickDayName
});
let dayName = this.dp.locale.daysMin[day];
- html += `
${dayName}
`;
+ html += `${dayName}
`;
i++;
curDay++;
@@ -207,8 +210,7 @@ export default class DatepickerBody {
}
handleClick = (e) => {
- let $cell = closest(e.target, '.air-datepicker-cell');
- if (!$cell) return;
+ let $cell = e.target;
let cell = $cell.adpCell;
if (cell.isDisabled) return;
@@ -226,6 +228,15 @@ export default class DatepickerBody {
}
}
+ handleDayNameClick = (e) => {
+ let index = e.target.getAttribute('data-day-index');
+
+ this.opts.onClickDayName({
+ dayIndex: Number(index),
+ datepicker: this.dp
+ });
+ }
+
onChangeCurrentView = (view) => {
if (view !== this.type) {
this.hide();
@@ -244,8 +255,17 @@ export default class DatepickerBody {
this.dp.setFocusDate(false);
}
- onClickCell = (e) => {
- this.handleClick(e);
+ onClickBody = (e) => {
+ let {onClickDayName} = this.opts;
+ let target = e.target;
+
+ if (target.closest('.air-datepicker-cell')) {
+ this.handleClick(e);
+ }
+
+ if (onClickDayName && target.closest('.air-datepicker-body--day-name')) {
+ this.handleDayNameClick(e);
+ }
}
onMouseDown = (e) => {
diff --git a/src/datepickerBody.scss b/src/datepickerBody.scss
index 720139ef..29ce8506 100644
--- a/src/datepickerBody.scss
+++ b/src/datepickerBody.scss
@@ -29,6 +29,14 @@
text-align: center;
text-transform: uppercase;
font-size: .8em;
+
+ &.-clickable- {
+ cursor: pointer;
+
+ &:hover {
+ color: var(--adp-day-name-color-hover);
+ }
+ }
}
/* Cells container
diff --git a/src/datepickerVars.scss b/src/datepickerVars.scss
index 63a79f30..3ce5d77e 100644
--- a/src/datepickerVars.scss
+++ b/src/datepickerVars.scss
@@ -46,6 +46,7 @@
--adp-nav-color-secondary: var(--adp-color-secondary);
--adp-day-name-color: #ff9a19;
+ --adp-day-name-color-hover: #8ad5f4;
--adp-day-cell-width: 1fr;
--adp-day-cell-height: 32px;
diff --git a/src/defaults.js b/src/defaults.js
index ad4cce05..63168487 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -72,4 +72,5 @@ export default {
onRenderCell: false,
onShow: false,
onHide: false,
+ onClickDayName: false,
};
diff --git a/tests/events.test.js b/tests/events.test.js
index 6b7e5347..9845d059 100644
--- a/tests/events.test.js
+++ b/tests/events.test.js
@@ -1,9 +1,5 @@
import {beforeAll, afterEach, describe, test, it, expect} from '@jest/globals';
import Datepicker from 'datepicker';
-import {isSameDate} from 'utils';
-import en from 'locale/en';
-import de from 'locale/de';
-import consts from 'consts';
import {DAY} from './helpers';
let $input, $altInput, dp, $datepicker;
@@ -154,4 +150,39 @@ describe('EVENTS TEST', () => {
expect(datepicker).toBeInstanceOf(Datepicker);
});
});
+
+ describe('onClickDayName', () => {
+ it('should add click event on day name element', () => {
+ let clicked = false;
+
+ init({
+ visible: true,
+ onClickDayName({dayIndex, datepicker}) {
+ clicked = true;
+ }
+ });
+
+ let $dayName = $datepicker.querySelector('.air-datepicker-body--day-name');
+
+ $dayName.click();
+
+ expect(clicked).toBe(true);
+ expect($dayName).toHaveClass('-clickable-');
+ });
+ it('should be called with correct arguments', (done) => {
+ init({
+ visible: true,
+ onClickDayName(args) {
+ expect('dayIndex' in args).toBe(true);
+ expect('datepicker' in args).toBe(true);
+
+ done();
+ }
+ });
+
+ let $dayName = $datepicker.querySelector('.air-datepicker-body--day-name');
+
+ $dayName.click();
+ });
+ });
});