Implemented "Today" button

DateTime.d.ts

@@ -165,6 +165,10 @@ declare namespace ReactDatetimeClass {
          close it.
          */
         disableOnClickOutside?: boolean;
+        /*
+         When true, adds a 'Today' button at the bottom of the date picker.
+        */
+        showTodayButton?: boolean;
     }
 
     export interface DatetimepickerState {

DateTime.js

@@ -40,7 +40,8 @@ var Datetime = createClass({
 		open: TYPES.bool,
 		strictParsing: TYPES.bool,
 		closeOnSelect: TYPES.bool,
-		closeOnTab: TYPES.bool
+		closeOnTab: TYPES.bool,
+		showTodayButton: TYPES.bool,
 	},
 
 	getInitialState: function() {
@@ -332,6 +333,14 @@ 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() )
@@ -391,10 +400,37 @@ var Datetime = createClass({
 		return m;
 	},
 
+	alwaysValidDate: function () {
+		return true;
+	},
+
+	goToToday: function (e) {
+		this.updateSelectedDate(e);
+	},
+
+	renderTodayButton: function (key) {
+		var now = moment(new Date());
+		var date = this.state.viewDate.clone()
+				.month( now.month() )
+				.date( now.date() )
+				.year( now.year() );
+
+		var isValidDate = this.props.isValidDate || this.alwaysValidDate;
+
+		var isValid = date.isValid && isValidDate(date);
+		var classes = isValid ? 'rdtTodayButton' : 'rdtTodayButton rdtDisabled';
+
+		return this.props.showTodayButton ? React.createElement(
+			'button',
+			{key: key, className: classes, onClick: isValid ? this.goToToday : undefined},
+			'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() {
@@ -420,8 +456,8 @@ 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 ) {
@@ -472,7 +508,8 @@ Datetime.defaultProps = {
 	strictParsing: true,
 	closeOnSelect: false,
 	closeOnTab: true,
-	utc: false
+	utc: false,
+	showTodayButton: false,
 };
 
 // Make moment accessible through the Datetime class

README.md

@@ -69,6 +69,8 @@ render: function() {
 | **closeOnTab** | `boolean` | `true` | When `true` and the input is focused, pressing the `tab` key will close the datepicker.
 | **timeConstraints** | `object` | `null` | Add some constraints to the timepicker. It accepts an `object` with the format `{ hours: { min: 9, max: 15, step: 2 }}`, this example means the hours can't be lower than `9` and higher than `15`, and it will change adding or subtracting `2` hours everytime the buttons are clicked. The constraints can be added to the `hours`, `minutes`, `seconds` and `milliseconds`.
 | **disableOnClickOutside** | `boolean` | `false` | When `true`, keep the datepicker open when click event is triggered outside of component. When `false`, close it.
+| **showTodayButton** | `boolean` | `false` | When `true`, adds a 'Today' button at the bottom of the date picker.
+
 
 ## i18n
 Different language and date formats are supported by react-datetime. React uses [Moment.js](http://momentjs.com/) to format the dates, and the easiest way of changing the language of the calendar is [changing the Moment.js locale](http://momentjs.com/docs/#/i18n/changing-locale/).

css/react-datetime.css

@@ -216,3 +216,24 @@ td.rdtYear:hover {
 .rdtTime td {
   cursor: default;
 }
+
+.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;
+}
+
+.rdtTodayButton.rdtDisabled {
+  color: #999999;
+  cursor: not-allowed;
+}
+