Allow specifying viewDate as a prop, fixes arqex#468

Optionally specify the month that is viewed when opening the date picker without having an explicit value set.
The default behavior of `viewDate` is retained as well.

Author: Suvish Varghese Thoovamalayil

DateTime.d.ts

@@ -41,6 +41,11 @@ declare namespace ReactDatetimeClass {
          This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date.
          */
         defaultValue?: Date | string | Moment;
+        /*
+         Represents the month which is viewed on opening the calendar when there is no selected date.
+         This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object.
+         */
+        viewDate?: Date | string | Moment;
         /*
          Defines the format for the date. It accepts any moment.js date format.
          If true the date will be displayed using the defaults for the current locale.

DateTime.js

@@ -13,6 +13,7 @@ var Datetime = createClass({
 	propTypes: {
 		// value: TYPES.object | TYPES.string,
 		// defaultValue: TYPES.object | TYPES.string,
+		// viewDate: TYPES.object | TYPES.string,
 		onFocus: TYPES.func,
 		onBlur: TYPES.func,
 		onChange: TYPES.func,
@@ -43,24 +44,33 @@ var Datetime = createClass({
 		return state;
 	},
 
+	parseDate: function (date, formats) {
+		var parsedDate;
+
+		if (date && typeof date === 'string')
+			parsedDate = this.localMoment(date, formats.datetime);
+		else if (date)
+			parsedDate = this.localMoment(date);
+
+		if (parsedDate && !parsedDate.isValid())
+			parsedDate = null;
+
+		return parsedDate;
+	},
+
 	getStateFromProps: function( props ) {
 		var formats = this.getFormats( props ),
 			date = props.value || props.defaultValue,
 			selectedDate, viewDate, updateOn, inputValue
 			;
 
-		if ( date && typeof date === 'string' )
-			selectedDate = this.localMoment( date, formats.datetime );
-		else if ( date )
-			selectedDate = this.localMoment( date );
+		selectedDate = this.parseDate(date, formats);
 
-		if ( selectedDate && !selectedDate.isValid() )
-			selectedDate = null;
+		viewDate = this.parseDate(props.viewDate, formats);
 
 		viewDate = selectedDate ?
 			selectedDate.clone().startOf('month') :
-			this.localMoment().startOf('month')
-		;
+			viewDate ? viewDate.clone().startOf('month') : this.localMoment().startOf('month');
 
 		updateOn = this.getUpdateOn(formats);
 

README.md

@@ -43,6 +43,7 @@ render: function() {
 | ------------ | ------- | ------- | ----------- |
 | **value** | `Date` | `new Date()` | Represents the selected date by the component, in order to use it as a [controlled component](https://facebook.github.io/react/docs/forms.html#controlled-components). This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object. |
 | **defaultValue** | `Date` | `new Date()` | Represents the selected date for the component to use it as a [uncontrolled component](https://facebook.github.io/react/docs/uncontrolled-components.html). This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object. |
+| **viewDate** | `Date` | `new Date()` | Represents the month which is viewed on opening the calendar when there is no selected date. This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object. |
 | **dateFormat**   | `boolean` or `string`  | `true` | Defines the format for the date. It accepts any [Moment.js date format](http://momentjs.com/docs/#/displaying/format/) (not in localized format). If `true` the date will be displayed using the defaults for the current locale. If `false` the datepicker is disabled and the component can be used as timepicker, see [available units docs](#specify-available-units). |
 | **timeFormat**   | `boolean` or `string`  | `true` | Defines the format for the time. It accepts any [Moment.js time format](http://momentjs.com/docs/#/displaying/format/) (not in localized format). If `true` the time will be displayed using the defaults for the current locale. If `false` the timepicker is disabled and the component can be used as datepicker, see [available units docs](#specify-available-units). |
 | **input** | `boolean` | `true` | Whether to show an input field to edit the date manually. |

react-datetime.d.ts

@@ -22,6 +22,11 @@ declare module ReactDatetime {
      This prop is parsed by moment.js, so it is possible to use a date string or a moment.js date.
      */
     defaultValue?: Date;
+    /*
+     Represents the month which is viewed on opening the calendar when there is no selected date.
+     This prop is parsed by Moment.js, so it is possible to use a date `string` or a `moment` object.
+     */
+    viewDate?: Date;
     /*
      Defines the format for the date. It accepts any moment.js date format.
      If true the date will be displayed using the defaults for the current locale.

test/testUtils.js

@@ -120,5 +120,9 @@ module.exports = {
 
 	getInputValue: (datetime) => {
 		return datetime.find('.rdt > .form-control').getDOMNode().value;
+	},
+
+	getViewDateValue: (datetime) => {
+		return datetime.find('.rdtSwitch').getDOMNode().innerHTML;
 	}
 };

test/tests.spec.js

@@ -1174,4 +1174,53 @@ describe('Datetime', () => {
 		});
 
 	});
+
+	describe('with viewDate', () => {
+    it('date value', () => {
+      const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+          strDate = moment(date).format('MMMM YYYY'),
+          component = utils.createDatetime({ viewDate: date });
+      expect(utils.getViewDateValue(component)).toEqual(strDate);
+    });
+
+    it('moment value', () => {
+      const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+          mDate = moment(date),
+          strDate = mDate.format('MMMM YYYY'),
+          component = utils.createDatetime({ viewDate: mDate });
+      expect(utils.getViewDateValue(component)).toEqual(strDate);
+    });
+
+    it('string value', () => {
+      const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+          mDate = moment(date),
+          strDate = mDate.format('L') + ' ' + mDate.format('LT'),
+          expectedStrDate = mDate.format('MMMM YYYY'),
+          component = utils.createDatetime({ viewDate: strDate });
+      expect(utils.getViewDateValue(component)).toEqual(expectedStrDate);
+    });
+
+    it('UTC value from UTC string', () => {
+      const date = new Date(2000, 0, 15, 2, 2, 2, 2),
+          momentDateUTC = moment.utc(date),
+          strDateUTC = momentDateUTC.format('L') + ' ' + momentDateUTC.format('LT'),
+          expectedStrDate = momentDateUTC.format('MMMM YYYY'),
+          component = utils.createDatetime({ viewDate: strDateUTC, utc: true });
+      expect(utils.getViewDateValue(component)).toEqual(expectedStrDate);
+    });
+
+    it('invalid string value', () => {
+      const strDate = 'invalid string',
+          expectedStrDate = moment().format('MMMM YYYY'),
+          component = utils.createDatetime({ viewDate: strDate });
+      expect(utils.getViewDateValue(component)).toEqual(expectedStrDate);
+    });
+
+    it('invalid moment object', () => {
+      const mDate = moment(null),
+          expectedStrDate = moment().format('MMMM YYYY'),
+          component = utils.createDatetime({ viewDate: mDate });
+      expect(utils.getViewDateValue(component)).toEqual(expectedStrDate);
+    });
+	});
 });