Updated docs for date&time formats

Author: arqex

DateTime.js

@@ -28,8 +28,8 @@ var Datetime = React.createClass({
 		onChange: TYPES.func,
 		locale: TYPES.string,
 		input: TYPES.bool,
-		dateFormat: TYPES.string,
-		timeFormat: TYPES.string,
+		// dateFormat: TYPES.string | TYPES.bool,
+		// timeFormat: TYPES.string | TYPES.bool,
 		inputProps: TYPES.object,
 		viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),
 		isValidDate: TYPES.func,
@@ -45,15 +45,22 @@ var Datetime = React.createClass({
 			inputProps: {},
 			input: true,
 			onBlur: nof,
-			onChange: nof
+			onChange: nof,
+			timeFormat: true,
+			dateFormat: true
 		};
 	},
 	getInitialState: function() {
 		var formats = this.getFormats( this.props ),
-			date = this.props.date
+			date = this.props.date,
+			currentView = this.props.viewMode
 		;
+
+		if( !formats.date )
+			currentView = 'time';
+
 		return {
-			currentView: this.props.viewMode,
+			currentView: currentView,
 			open: !this.props.input,
 			inputFormat: formats.datetime,
 			viewDate: this.localMoment(date).startOf("month"),
@@ -64,38 +71,21 @@ var Datetime = React.createClass({
 
 	getFormats: function( props ){
 		var formats = {
-				date: '',
-				time: '',
-				datetime: ''
+				date: props.dateFormat || '',
+				time: props.timeFormat || ''
 			},
 			locale = this.localMoment( props.date ).localeData()
 		;
 
-		if( props.dateFormat ){
-			formats.date = props.dateFormat;
-		}
-		if( props.timeFormat ){
-			formats.time = props.timeFormat;
-		}
-
-		if( !formats.date && !formats.time ){
+		if( formats.date === true ){
 			formats.date = locale.longDateFormat('L');
-			formats.time = locale.longDateFormat('LT');
-			formats.datetime = formats.date + ' ' + formats.time;
 		}
-		else {
-			if( props.dateFormat ){
-				formats.date = props.dateFormat;
-				formats.datetime = formats.date;
-			}
-			if( props.timeFormat ){
-				if( formats.date )
-					formats.datetime += ' ';
-				formats.time = props.timeFormat;
-				formats.datetime += formats.time;
-			}
+		if( formats.time === true ){
+			formats.time = locale.longDateFormat('LT');
 		}
 
+		formats.datetime = formats.date + ' ' + formats.time;
+
 		return formats;
 	},
 

README.md

@@ -32,8 +32,8 @@ API
 | Name         | Type    | Default | Description |
 | ------------ | ------- | ------- | ----------- |
 | **date** | Date  | new Date() | Represents the inital dateTime, this prop is parsed by moment.js, so it is possible to use a date string. |
-| **dateFormat**   | string  | Locale default | Defines the format moment.js should use to parse and output the date. The default is only set if there is not `timeFormat` defined. |
-| **timeFormat**   | string  | Locale default | Defines the format moment.js should use to parse and output the time. The default is only set if there is not `dateFormat` defined. |
+| **dateFormat**   | `bool` or `string`  | `true` | Defines the format for the date. It accepts any [moment.js date format](http://momentjs.com/docs/#/displaying/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. |
+| **timeFormat**   | `bool` or `string`  | `true` | Defines the format for the time. It accepts any [moment.js time format](http://momentjs.com/docs/#/displaying/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. |
 | **input** | boolean | true | Wether to show an input field to edit the date manually. |
 | **locale** | string | null | Manually set the locale for the react-datetime instance. Moment.js locale needs to be loaded to be used, see [i18n docs](#i18n).
 | **onChange** | function | empty function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter. |