Locale support added

Author: arqex

DateTime.js

@@ -9,6 +9,7 @@ var assign = require('object-assign'),
 	moment = require('moment')
 ;
 
+var TYPES = React.PropTypes;
 var Datetime = React.createClass({
 	mixins: [
 		require('react-onclickoutside')
@@ -20,15 +21,16 @@ var Datetime = React.createClass({
 		time: TimeView
 	},
 	propTypes: {
-		date: React.PropTypes.object,
-		onChange: React.PropTypes.func,
-		input: React.PropTypes.bool,
-		dateFormat: React.PropTypes.string,
-		timeFormat: React.PropTypes.string,
-		inputProps: React.PropTypes.object,
-		viewMode: React.PropTypes.oneOf(['years', 'months', 'days', 'time']),
-		minDate: React.PropTypes.object,
-		maxDate: React.PropTypes.object
+		date: TYPES.object,
+		onChange: TYPES.func,
+		locale: TYPES.string,
+		input: TYPES.bool,
+		dateFormat: TYPES.string,
+		timeFormat: TYPES.string,
+		inputProps: TYPES.object,
+		viewMode: TYPES.oneOf(['years', 'months', 'days', 'time']),
+		minDate: TYPES.object,
+		maxDate: TYPES.object
 	},
 	getDefaultProps: function() {
 
@@ -50,18 +52,20 @@ var Datetime = React.createClass({
 			currentView: this.props.viewMode,
 			open: !this.props.input,
 			inputFormat: formats.datetime,
-			viewDate: moment(date).startOf("month"),
-			selectedDate: moment(date),
-			inputValue: moment(date).format( formats.datetime )
+			viewDate: this.localMoment(date).startOf("month"),
+			selectedDate: this.localMoment(date),
+			inputValue: this.localMoment(date).format( formats.datetime )
 		};
 	},
 
 	getFormats: function( props ){
 		var formats = {
-			date: '',
-			time: '',
-			datetime: ''
-		};
+				date: '',
+				time: '',
+				datetime: ''
+			},
+			locale = this.localMoment( props.date ).localeData()
+		;
 
 		if( props.dateFormat ){
 			formats.date = props.dateFormat;
@@ -71,9 +75,9 @@ var Datetime = React.createClass({
 		}
 
 		if( !formats.date && !formats.time ){
-			formats.date = 'MM/DD/YY';
-			formats.time = 'H:mm';
-			formats.datetime = 'MM/DD/YY H:mm';
+			formats.date = locale.longDateFormat('L');
+			formats.time = locale.longDateFormat('LT');
+			formats.datetime = formats.date + ' ' + formats.time;
 		}
 		else {
 			if( props.dateFormat ){
@@ -101,18 +105,21 @@ var Datetime = React.createClass({
 	},
 
 	onChange: function(event) {
-		var value = event.target == null ? event : event.target.value;
-		if (moment(value).isValid()) {
+		var value = event.target == null ? event : event.target.value,
+			localMoment = this.localMoment( date )
+		;
+
+		if (localMoment.isValid()) {
 			this.setState({
-				selectedDate: moment(value),
-				viewDate: moment(value).startOf("month")
+				selectedDate: localMoment,
+				viewDate: localMoment.clone().startOf("month")
 			});
 		}
 
 		return this.setState({
 			inputValue: value
 		}, function() {
-			return this.props.onChange(moment(this.state.inputValue, this.state.inputFormat, true).format( this.state.inputFormat ));
+			return this.props.onChange( localMoment.toDate() );
 		});
 	},
 
@@ -187,9 +194,9 @@ var Datetime = React.createClass({
 
 	updateDate: function( e ) {
 		var target = e.target,
-		modifier = 0,
-		currentDate = this.state.selectedDate,
-		date
+			modifier = 0,
+			currentDate = this.state.selectedDate,
+			date
 		;
 
 		if(target.className.indexOf("new") != -1)
@@ -222,10 +229,17 @@ var Datetime = React.createClass({
 			this.setState({ open: false });
 	},
 
+	localMoment: function( date ){
+		var m = moment( date );
+		if( this.props.locale )
+			m.locale( this.props.locale );
+		return m;
+	},
+
 	componentProps: {
 		fromProps: ['viewMode', 'minDate', 'maxDate'],
 		fromState: ['viewDate', 'selectedDate' ],
-		fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateDate']
+		fromThis: ['setDate', 'setTime', 'showView', 'addTime', 'subtractTime', 'updateDate', 'localMoment']
 	},
 
 	getComponentProps: function(){

README.md

@@ -32,12 +32,30 @@ API
 | **date** | Date  | new Date() | Represents the inital dateTime, this string is then parsed by moment.js |
 | **dateFormat**   | string  | "MM/DD/YY"     | 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  | "MM/DD/YY"     | Defines the format moment.js should use to parse and output the time. The default is only set if there is not `dateFormat` defined. |
+| **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 | x => console.log(x) | Callback trigger when the date changes |
 | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days', 'time') |
 | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. |
 | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. |
 | **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. |
 
+## 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/).
+
+```js
+var moment = require('moment');
+require('moment/locale/fr');
+// Now react-datetime will be in french
+```
+
+If there are multiple locales loaded, you can use the prop `locale` to define what language should be used by the instance:
+```js
+<Datetime locale="fr" />
+<Datetime locale="de" />
+```
+[Here you can see the i18n example working](http://codepen.io/arqex/pen/PqJMQV).
+
 Contributions
 ===============================
 Any help is always welcome :)