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
nhn · Aug 12, 2021 · e7f28c9 · e7f28c9
1 parent cb4cfcf
commit e7f28c9
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -16,13 +16,19 @@ 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';
 
 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() {