Add prop to display time zone, show time first

src/DateTime.js

@@ -36,6 +36,8 @@ export default class Datetime extends React.Component {
 		utc: TYPES.bool,
 		displayTimeZone: TYPES.string,
 		input: TYPES.bool,
+		displayTimeFirst: TYPES.bool,
+		showTimeZone: TYPES.bool,
 		dateFormat: TYPES.oneOfType([TYPES.string, TYPES.bool]),
 		timeFormat: TYPES.oneOfType([TYPES.string, TYPES.bool]),
 		inputProps: TYPES.object,
@@ -138,7 +140,9 @@ export default class Datetime extends React.Component {
 			updateDate: this._updateDate,
 			navigate: this._viewNavigate,
 			moment: moment,
-			showView: this._showView
+			showView: this._showView,
+			displayTimeZone: props.displayTimeZone,
+			showTimeZone: props.showTimeZone,
 		};
 
 		// Probably updateOn, updateSelectedDate and setDate can be merged in the same method
@@ -308,7 +312,8 @@ export default class Datetime extends React.Component {
 
 		let dateFormat = this.getDateFormat();
 		let timeFormat = this.getTimeFormat();
-		return dateFormat && timeFormat ? dateFormat + ' ' + timeFormat : (dateFormat || timeFormat );
+		const combinedDateTimeFormat = this.props.showTimeFirst ? `${timeFormat} ${dateFormat}` : `${dateFormat} ${timeFormat}`;
+		return dateFormat && timeFormat ? combinedDateTimeFormat : (dateFormat || timeFormat );
 	}
 
 	_showView = ( view, date ) => {

src/playground/App.js

@@ -1,8 +1,9 @@
 // This file is the playground used for development purposes (npm run playground)
 // not part of the library
 import React, { useCallback, useState } from 'react';
+import moment from 'moment-timezone';
 import Datetime from '../DateTime';
-import moment from 'moment';
+import './styles.css';
 
 // import moment from 'moment';
 // import 'moment/locale/tzm-latn';
@@ -17,22 +18,65 @@ const App = () => {
 		setValue(moment());
 	}, [setValue]);
 
+ 	const [time1, setTime1] = useState(moment('Sun Sep 27 2015 05:00:00 GMT-0700'));
+	const [time2, setTime2] = useState(moment('Sun Sep 27 2015 05:00:00 GMT-0400'));
+
 	return (
-		<div>
+		<div className="playground-palette">
 			<button onClick={externalSetDate}>
 				external set date
 			</button>
 
+			<div>
+				5am PT
+				<Datetime
+					value={time1}
+					onChange={setTime1}
+					initialViewMode='time'
+				/>
+			</div>
+
+			<div>
+				5am ET (Displayed Time is in current time zone)
+				<Datetime
+					value={time2}
+					onChange={setTime2}
+					initialViewMode='time'
+					showTimeZone
+				/>
+			</div>
+
+			<div>
+				5am ET (Displayed Time is in current time zone) Time First Format
+				<Datetime
+					value={time2}
+					onChange={setTime2}
+					initialViewMode='time'
+					showTimeZone
+					showTimeFirst
+				/>
+			</div>
+
+			<div>
+				Controlled
+				<Datetime
+					value={value}
+					onChange={onChange}
+					initialViewMode='time'
+				/>
+			</div>
 			<div>
 				Controlled
 				<Datetime
 					value={value}
 					onChange={onChange}
+					initialViewMode='time'
 				/>
 			</div>
 			<div>
 				Uncontrolled Input
 				<Datetime
+					initialViewMode='time'
 				/>
 			</div>
 		</div>

src/playground/styles.css

@@ -0,0 +1,25 @@
+
+html {
+    font-family: helvetica, arial;
+    font-size: 14px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.playground-palette {
+    display: flex;
+    max-width: 1000px;
+}
+
+.playground-palette > div > div > input {
+    margin-top: 12px;
+}
+
+.playground-palette > div {
+    padding: 15px;
+    margin: 5px;
+    border: 1px solid #555;
+    border-radius: 4px;
+}

src/views/TimeView.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import moment from 'moment-timezone';
 
 const timeConstraints = {
 	hours: {
@@ -76,14 +77,12 @@ export default class TimeView extends React.Component {
 	render() {
 		let items = [];
 		const timeParts = this.state;
-
 		this.getCounters().forEach( (c, i) => {
 			if ( i && c !== 'ampm' ) {
 				items.push(
 					<div key={ `sep${i}` } className="rdtCounterSeparator">:</div>
 				);
 			}
-
 			items.push( this.renderCounter(c, timeParts[c]) );
 		});
 
@@ -100,6 +99,17 @@ export default class TimeView extends React.Component {
 							</td>
 						</tr>
 					</tbody>
+					{ this.props.showTimeZone && (
+						<div className="timezone-display">
+						  <span>
+								(GMT{ moment.tz(this.props.displayTimeZone || moment.tz.guess() ).format('Z') })
+							</span>
+							<span> </span>
+							<span>
+								{ this.props.displayTimeZone || moment.tz.guess() }
+							</span>
+						</div>
+					)}
 				</table>
 			</div>
 		);