Added support for today button

gogoair · Dec 14, 2017 · 16821fc · 16821fc
1 parent e4faf5a
commit 16821fc
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 29 deletions.
diff --git a/DateTime.js b/DateTime.js
@@ -323,6 +323,16 @@ var Datetime = createClass({
 				.month( currentDate.month() )
 				.date( currentDate.date() )
 				.year( parseInt( target.getAttribute('data-value'), 10 ) );
+		} else if (target.className.indexOf('rdtTodayButton') !== -1) {
+			var now = moment(new Date());
+			date = viewDate.clone()
+				.month( now.month() )
+				.date( now.date() )
+				.year( now.year() );
+
+			this.setState({
+				currentView: 'days'
+			});
 		}
 
 		date.hours( currentDate.hours() )
@@ -340,7 +350,7 @@ var Datetime = createClass({
 				selectedDate: date,
 				viewDate: date.clone().startOf('month'),
 				inputValue: date.format( this.state.inputFormat ),
-				open: open
+				open: open,
 			});
 		} else {
 			if ( this.props.closeOnSelect && close ) {
@@ -382,10 +392,22 @@ var Datetime = createClass({
 		return m;
 	},
 
+	goToToday: function (e) {
+		this.updateSelectedDate(e);
+	},
+
+	renderTodayButton: function (key) {
+		return this.props.showTodayButton ? React.createElement(
+			'button',
+			{key: key, className: 'rdtTodayButton', onClick: this.goToToday, 'data-value': '10'},
+			'Today'
+		) : undefined;
+	},
+
 	componentProps: {
 		fromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear', 'timeConstraints'],
 		fromState: ['viewDate', 'selectedDate', 'updateOn'],
-		fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment', 'handleClickOutside']
+		fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment', 'handleClickOutside', 'renderTodayButton']
 	},
 
 	getComponentProps: function() {
@@ -411,8 +433,7 @@ var Datetime = createClass({
 		// TODO: Make a function or clean up this code,
 		// logic right now is really hard to follow
 		var className = 'rdt' + (this.props.className ?
-                  ( Array.isArray( this.props.className ) ?
-                  ' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),
+			( Array.isArray( this.props.className ) ? ' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),
 			children = [];
 
 		if ( this.props.input ) {

diff --git a/css/react-datetime.css b/css/react-datetime.css
@@ -1,4 +1,4 @@
-/*!
+/*/
  * https://github.com/YouCanBookMe/react-datetime
  */
 
@@ -211,3 +211,18 @@ td.rdtYear:hover {
   font-size: 1.2em;
   margin-top: 37px;
 }
+
+.rdtTodayButton {
+    display: block;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    border: none;
+    border-radius: 0;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.rdtTodayButton:focus {
+    outline: none;
+}
diff --git a/dist/react-datetime.js b/dist/react-datetime.js
@@ -384,7 +384,17 @@ return /******/ (function(modules) { // webpackBootstrap
 					.month( currentDate.month() )
 					.date( currentDate.date() )
 					.year( parseInt( target.getAttribute('data-value'), 10 ) );
-			}
+			} else if (target.className.indexOf('rdtTodayButton') !== -1) {
+			    var now = moment(new Date());
+	            date = viewDate.clone()
+	                .month( now.month() )
+	                .date( now.date() )
+	                .year( now.year() );
+
+	            this.setState({
+	                currentView: 'days'
+	            });
+	        }
 
 			date.hours( currentDate.hours() )
 				.minutes( currentDate.minutes() )
@@ -401,7 +411,7 @@ return /******/ (function(modules) { // webpackBootstrap
 					selectedDate: date,
 					viewDate: date.clone().startOf('month'),
 					inputValue: date.format( this.state.inputFormat ),
-					open: open
+					open: open,
 				});
 			} else {
 				if ( this.props.closeOnSelect && close ) {
@@ -443,10 +453,22 @@ return /******/ (function(modules) { // webpackBootstrap
 			return m;
 		},
 
+	    goToToday: function (e) {
+	        this.updateSelectedDate(e);
+	    },
+
+	    renderTodayButton: function (key) {
+	        return React.createElement(
+	            'button',
+	            {key: key, className: 'rdtTodayButton', onClick: this.goToToday, 'data-value': '10'},
+	            'Today'
+	        );
+	    },
+
 		componentProps: {
 			fromProps: ['value', 'isValidDate', 'renderDay', 'renderMonth', 'renderYear', 'timeConstraints'],
 			fromState: ['viewDate', 'selectedDate', 'updateOn'],
-			fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment', 'handleClickOutside']
+			fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateSelectedDate', 'localMoment', 'handleClickOutside', 'renderTodayButton']
 		},
 
 		getComponentProps: function() {
@@ -2797,15 +2819,16 @@ return /******/ (function(modules) { // webpackBootstrap
 		DaysView = __webpack_require__(19),
 		MonthsView = __webpack_require__(22),
 		YearsView = __webpack_require__(23),
-		TimeView = __webpack_require__(24)
+		TimeView = __webpack_require__(24),
+	    TodayButton = __webpack_require__(25);
 		;
 
 	var CalendarContainer = createClass({
 		viewComponents: {
 			days: DaysView,
 			months: MonthsView,
 			years: YearsView,
-			time: TimeView
+			time: TimeView,
 		},
 
 		render: function() {
@@ -2852,7 +2875,7 @@ return /******/ (function(modules) { // webpackBootstrap
 				tableChildren.push( footer );
 
 			return React.createElement('div', { className: 'rdtDays' },
-				React.createElement('table', {}, tableChildren )
+				[React.createElement('table', {key: 'daysTable'}, tableChildren ), this.props.renderTodayButton('todayDays')]
 			);
 		},
 
@@ -3340,7 +3363,8 @@ return /******/ (function(modules) { // webpackBootstrap
 					React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ),
 					React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 1, 'years' )}, React.createElement('span', {}, '›' ))
 				]))),
-				React.createElement('table', { key: 'months' }, React.createElement('tbody', { key: 'b' }, this.renderMonths()))
+				React.createElement('table', { key: 'months' }, React.createElement('tbody', { key: 'b' }, this.renderMonths())),
+	            this.props.renderTodayButton('todayMonths')
 			]);
 		},
 
@@ -3455,7 +3479,8 @@ return /******/ (function(modules) { // webpackBootstrap
 					React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2 }, year + '-' + ( year + 9 ) ),
 					React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 10, 'years' )}, React.createElement('span', {}, '›' ))
 				]))),
-				React.createElement('table', { key: 'years' }, React.createElement('tbody',  {}, this.renderYears( year )))
+				React.createElement('table', { key: 'years' }, React.createElement('tbody',  {}, this.renderYears( year ))),
+	            this.props.renderTodayButton('todayYears')
 			]);
 		},
 
@@ -3786,6 +3811,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	module.exports = DateTimePickerTime;
 
 
+/***/ }),
+/* 25 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var React = __webpack_require__(13),
+	    createClass = __webpack_require__(12);
+
+	var TodayButton = createClass({
+	    render: function() {
+	        return React.createElement( 'button', {className: 'rdtTodayButton'}, 'Today' );
+	    }
+	});
+
+	module.exports = TodayButton;
+
+
 /***/ })
 /******/ ])
 });

diff --git a/dist/react-datetime.min.js b/dist/react-datetime.min.js
diff --git a/dist/react-datetime.min.js.map b/dist/react-datetime.min.js.map
diff --git a/example/example.js b/example/example.js
@@ -3,12 +3,10 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 
 ReactDOM.render(
-  React.createElement(DateTime, {
-    viewMode: 'months',
-    dateFormat: 'MMMM',
-    isValidDate: function(current) {
-      return current.isBefore(DateTime.moment().startOf('month'));
-    }
-  }),
-  document.getElementById('datetime')
+	React.createElement(DateTime, {
+		viewMode: 'days',
+		dateFormat: 'MM/DD/YY',
+		showTodayButton: true
+	}),
+	document.getElementById('datetime')
 );
diff --git a/example/react-datetime.css b/example/react-datetime.css
@@ -219,4 +219,19 @@ td.rdtYear:hover {
 
 .rdtDayPart {
   margin-top: 43px;
+}
+
+.rdtTodayButton {
+    display: block;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    border: none;
+    border-radius: 0;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.rdtTodayButton:focus {
+    outline: none;
 }
diff --git a/src/CalendarContainer.js b/src/CalendarContainer.js
@@ -13,7 +13,7 @@ var CalendarContainer = createClass({
 		days: DaysView,
 		months: MonthsView,
 		years: YearsView,
-		time: TimeView
+		time: TimeView,
 	},
 
 	render: function() {

diff --git a/src/DaysView.js b/src/DaysView.js
@@ -30,7 +30,7 @@ var DateTimePickerDays = onClickOutside( createClass({
 			tableChildren.push( footer );
 
 		return React.createElement('div', { className: 'rdtDays' },
-			React.createElement('table', {}, tableChildren )
+			[React.createElement('table', {key: 'daysTable'}, tableChildren ), this.props.renderTodayButton('todayDays')]
 		);
 	},
 

diff --git a/src/MonthsView.js b/src/MonthsView.js
@@ -13,7 +13,8 @@ var DateTimePickerMonths = onClickOutside( createClass({
 				React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2, 'data-value': this.props.viewDate.year() }, this.props.viewDate.year() ),
 				React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 1, 'years' )}, React.createElement('span', {}, '›' ))
 			]))),
-			React.createElement('table', { key: 'months' }, React.createElement('tbody', { key: 'b' }, this.renderMonths()))
+			React.createElement('table', { key: 'months' }, React.createElement('tbody', { key: 'b' }, this.renderMonths())),
+			this.props.renderTodayButton('todayMonths')
 		]);
 	},
 

diff --git a/src/YearsView.js b/src/YearsView.js
@@ -15,7 +15,8 @@ var DateTimePickerYears = onClickOutside( createClass({
 				React.createElement('th', { key: 'year', className: 'rdtSwitch', onClick: this.props.showView( 'years' ), colSpan: 2 }, year + '-' + ( year + 9 ) ),
 				React.createElement('th', { key: 'next', className: 'rdtNext', onClick: this.props.addTime( 10, 'years' )}, React.createElement('span', {}, '›' ))
 			]))),
-			React.createElement('table', { key: 'years' }, React.createElement('tbody',  {}, this.renderYears( year )))
+			React.createElement('table', { key: 'years' }, React.createElement('tbody',  {}, this.renderYears( year ))),
+			this.props.renderTodayButton('todayYears')
 		]);
 	},
 

diff --git a/test/tests.spec.js b/test/tests.spec.js
@@ -17,6 +17,25 @@ describe('Datetime', () => {
 		expect(component.find('.rdt > .rdtPicker').length).toEqual(1);
 	});
 
+	it('renders a today button', () => {
+		const component = utils.createDatetime({ showTodayButton: true });
+
+		expect(component.find('.rdtTodayButton').length).toEqual(1);
+	});
+
+	it('sets today date when today button is clicked', () => {
+		const onChangeFn = jest.fn();
+		const component = utils.createDatetime({ showTodayButton: true, viewMode: 'years', onChange: onChangeFn, dateFormat: 'MM/DD/YYYY', timeFormat: false,  });
+		const now = moment(new Date());
+
+		const fullDate = (now.month() + 1) + '/' + now.date() + '/' + now.year();
+
+		utils.clickOnElement(component.find('.rdtTodayButton'));
+		expect(utils.isDayView(component)).toBeTruthy();
+		expect(component.find('.rdt > input').getDOMNode().getAttribute('value')).toEqual(fullDate);
+		expect(onChangeFn).toHaveBeenCalled();
+	});
+
 	it('viewMode=days: renders days, week days, month, year', () => {
 		const date = new Date(2000, 0, 15, 2, 2, 2, 2),
 			component = utils.createDatetime({ viewMode: 'days', defaultValue: date });
@@ -394,7 +413,7 @@ describe('Datetime', () => {
 			const component = utils.createDatetime({ renderInput });
 
 			expect(component.find('button.custom-open').length).toEqual(1);
-            expect(utils.isOpen(component)).toBeFalsy();
+			expect(utils.isOpen(component)).toBeFalsy();
 			utils.clickOnElement(component.find('button.custom-open'));
 			expect(utils.isOpen(component)).toBeTruthy();
 		});