From e7f28c91da88fcc971113a7be2551357316109be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8C=80=EC=97=B0?= Date: Thu, 12 Aug 2021 12:31:30 +0900 Subject: [PATCH] feat: set date to today by click today text(fix #87) (#88) * chore: add test for click today text * feat: set date to today by click today text * chore: set today text to seem clickable * chore: apply code reviews --- src/css/calendar.css | 6 ++++++ src/js/calendar/header.js | 4 ++++ src/js/constants.js | 1 + src/js/datepicker/index.js | 11 +++++++++++ test/calendar/header.spec.js | 12 +++++++++++- test/datepicker/datepicker.spec.js | 18 ++++++++++++++++++ 6 files changed, 51 insertions(+), 1 deletion(-) diff --git a/src/css/calendar.css b/src/css/calendar.css index c3bb3fd..d80e02b 100644 --- a/src/css/calendar.css +++ b/src/css/calendar.css @@ -91,6 +91,12 @@ background-color: #f4f4f4 } +.tui-calendar .tui-calendar-title-today:hover { + color: #333; + background-color: #edf4fc; + cursor: pointer; +} + .tui-calendar .tui-calendar-title { display: inline-block; font-size: 18px; diff --git a/src/js/calendar/header.js b/src/js/calendar/header.js index cf81109..e430e8c 100644 --- a/src/js/calendar/header.js +++ b/src/js/calendar/header.js @@ -29,6 +29,8 @@ var SELECTOR_INNER_ELEM = '.tui-calendar-header-inner'; var SELECTOR_INFO_ELEM = '.tui-calendar-header-info'; var SELECTOR_BTN = '.tui-calendar-btn'; +var TODAY_TITLE_ELEM = '.tui-calendar-title-today'; + var YEAR_TITLE_FORMAT = 'yyyy'; /** @@ -142,6 +144,8 @@ var Header = defineClass( if (closest(target, SELECTOR_BTN)) { this.fire('click', ev); + } else if (closest(target, TODAY_TITLE_ELEM)) { + this.fire('today'); } }, diff --git a/src/js/constants.js b/src/js/constants.js index 69b46f9..2d31a23 100644 --- a/src/js/constants.js +++ b/src/js/constants.js @@ -23,6 +23,7 @@ module.exports = { CLASS_NAME_PREV_YEAR_BTN: 'tui-calendar-btn-prev-year', CLASS_NAME_NEXT_YEAR_BTN: 'tui-calendar-btn-next-year', CLASS_NAME_NEXT_MONTH_BTN: 'tui-calendar-btn-next-month', + CLASS_NAME_TITLE_TODAY: 'tui-calendar-title-today', DEFAULT_WEEK_START_DAY: 'Sun', WEEK_START_DAY_MAP: { diff --git a/src/js/datepicker/index.js b/src/js/datepicker/index.js index a9687ea..a06011b 100644 --- a/src/js/datepicker/index.js +++ b/src/js/datepicker/index.js @@ -353,6 +353,7 @@ var DatePicker = defineClass( _setEvents: function() { mouseTouchEvent.on(this._element, 'click', this._onClickHandler, this); this._calendar.on('draw', this._onDrawCalendar, this); + this._calendar._header.on('today', this._onClickTodayHandler, this); }, /** @@ -658,6 +659,16 @@ var DatePicker = defineClass( } }, + /** + * Event handler for click of today text + * @param {Event} ev An event object + * @private + */ + _onClickTodayHandler: function() { + this.setDate(Date.now()); + this.close(); + }, + /** * Update date from event-target * @param {HTMLElement} target An event target element diff --git a/test/calendar/header.spec.js b/test/calendar/header.spec.js index a0e29d9..1337273 100644 --- a/test/calendar/header.spec.js +++ b/test/calendar/header.spec.js @@ -11,6 +11,7 @@ var CLASS_NAME_NEXT_MONTH_BTN = constants.CLASS_NAME_NEXT_MONTH_BTN; var CLASS_NAME_NEXT_YEAR_BTN = constants.CLASS_NAME_NEXT_YEAR_BTN; var CLASS_NAME_PREV_MONTH_BTN = constants.CLASS_NAME_PREV_MONTH_BTN; var CLASS_NAME_PREV_YEAR_BTN = constants.CLASS_NAME_PREV_YEAR_BTN; +var CLASS_NAME_TITLE_TODAY = constants.CLASS_NAME_TITLE_TODAY; describe('Calendar', function() { describe('Header', function() { @@ -28,7 +29,8 @@ describe('Calendar', function() { beforeEach(function() { header = new Header(container, { language: 'en', - showJumpButtons: true + showJumpButtons: true, + showToday: true }); header.render(new Date(2016, 11), 'date'); }); @@ -73,6 +75,14 @@ describe('Calendar', function() { expect(spy).toHaveBeenCalled(); }); + it('should fire "today" custom event when click today text', function() { + var spy = jest.fn(); + header.on('today', spy); + + clickBtnInHeader(CLASS_NAME_TITLE_TODAY); + expect(spy).toHaveBeenCalled(); + }); + it('should be able to destroy', function() { var nContainer = document.createElement('div'); var nHeader = new Header(nContainer, { diff --git a/test/datepicker/datepicker.spec.js b/test/datepicker/datepicker.spec.js index 2b1e9c3..94705ed 100755 --- a/test/datepicker/datepicker.spec.js +++ b/test/datepicker/datepicker.spec.js @@ -16,6 +16,8 @@ var DatePicker = require('../../src/js/datepicker'); var Calendar = require('../../src/js/calendar'); var constants = require('../../src/js/constants'); +var CLASS_NAME_TITLE_TODAY = constants.CLASS_NAME_TITLE_TODAY; + var CLASS_NAME_SELECTABLE = 'tui-is-selectable'; var CLASS_NAME_HIDDEN = 'tui-hidden'; @@ -23,6 +25,10 @@ describe('Date Picker', function() { describe('date=null on constructor', function() { var datepicker, input, container; + function clickBtnInDatePicker(className) { + container.querySelector('.' + className).click(); + } + beforeEach(function() { container = document.createElement('div'); input = document.createElement('input'); @@ -56,6 +62,18 @@ describe('Date Picker', function() { expect(datepicker.getDate()).toEqual(new Date(2016, 11, 3)); }); + + it('should set date to today when click today text', function() { + var pickerDate; + var today = new Date(); + datepicker.setDate(new Date(2016, 11, 3)); + + clickBtnInDatePicker(CLASS_NAME_TITLE_TODAY); + + pickerDate = datepicker.getDate().toLocaleDateString(); + + expect(pickerDate).toBe(today.toLocaleDateString()); + }); }); describe('apis - ', function() {