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(); + }); + }); });