Accepts invalid values for the input. onBlur is not triggered when the calendar is closed anymore.

Author: arqex

CHANGELOG.md

@@ -1,5 +1,8 @@
 Changelog
 =========
+## 1.1.0
+* Datepicker can have an empty value. If the value in the input is not valid, `onChange` and `onBlur` will return input value.
+* `onBlur` is not triggered anymore if the calendar is not open.
 
 ## 1.0.0-rc.2
 * Added travis CI

DateTime.js

@@ -42,7 +42,7 @@ var Datetime = React.createClass({
 		var nof = function(){};
 		return {
 			className: '',
-			defaultValue: new Date(),
+			defaultValue: '',
 			viewMode: 'days',
 			inputProps: {},
 			input: true,
@@ -65,19 +65,27 @@ var Datetime = React.createClass({
 	getStateFromProps: function( props ){
 		var formats = this.getFormats( props ),
 			date = props.value || props.defaultValue,
-			selectedDate
+			selectedDate, viewDate
 		;
 
-		if( typeof date == 'string' )
+		if( date && typeof date == 'string' )
 			selectedDate = this.localMoment( date, formats.datetime );
-		else
+		else if( date )
 			selectedDate = this.localMoment( date );
 
+		if( selectedDate && !selectedDate.isValid() )
+			selectedDate = null;
+
+		viewDate = selectedDate ?
+			selectedDate.clone().startOf("month") :
+			this.localMoment().startOf("month")
+		;
+
 		return {
 			inputFormat: formats.datetime,
-			viewDate: selectedDate.clone().startOf("month"),
+			viewDate: viewDate,
 			selectedDate: selectedDate,
-			inputValue: selectedDate.format( formats.datetime )
+			inputValue: selectedDate ? selectedDate.format( formats.datetime ) : (date || '')
 		};
 	},
 
@@ -129,10 +137,12 @@ var Datetime = React.createClass({
 			update.selectedDate = localMoment;
 			update.viewDate = localMoment.clone().startOf("month");
 		}
+		else {
+			update.selectedDate = null;
+		}
 
 		return this.setState( update, function() {
-			if( localMoment.isValid() )
-				return this.props.onChange( localMoment );
+			return this.props.onChange( localMoment.isValid() ? localMoment : this.state.inputValue );
 		});
 	},
 
@@ -183,7 +193,8 @@ var Datetime = React.createClass({
 	allowedSetTime: ['hours','minutes','seconds', 'milliseconds'],
 	setTime: function( type, value ){
 		var index = this.allowedSetTime.indexOf( type ) + 1,
-			date = this.state.selectedDate.clone(),
+			state = this.state,
+			date = (state.selectedDate || state.viewDate).clone(),
 			nextType
 		;
 
@@ -198,7 +209,7 @@ var Datetime = React.createClass({
 		if( !this.props.value ){
 			this.setState({
 				selectedDate: date,
-				inputValue: date.format( this.state.inputFormat )
+				inputValue: date.format( state.inputFormat )
 			});
 		}
 		this.props.onChange( date );
@@ -207,7 +218,8 @@ var Datetime = React.createClass({
 	updateSelectedDate: function( e ) {
 		var target = e.target,
 			modifier = 0,
-			currentDate = this.state.selectedDate,
+			viewDate = this.state.viewDate,
+			currentDate = this.state.selectedDate || viewDate,
 			date
 		;
 
@@ -216,8 +228,8 @@ var Datetime = React.createClass({
 		else if(target.className.indexOf("old") != -1)
 			modifier = -1;
 
-		date = this.state.viewDate.clone()
-			.month( this.state.viewDate.month() + modifier )
+		date = viewDate.clone()
+			.month( viewDate.month() + modifier )
 			.date( parseInt( target.getAttribute('data-value') ) )
 			.hours( currentDate.hours() )
 			.minutes( currentDate.minutes() )
@@ -241,9 +253,10 @@ var Datetime = React.createClass({
 	},
 
 	handleClickOutside: function(){
-		this.props.onBlur( this.state.selectedDate );
-		if( this.props.input && this.state.open )
+		if( this.props.input && this.state.open ){
 			this.setState({ open: false });
+			this.props.onBlur( this.state.selectedDate || this.state.inputValue );
+		}
 	},
 
 	localMoment: function( date, format ){

README.md

@@ -42,8 +42,8 @@ API
 | **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. |
-| **onBlur** | function | empty function | Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. The callback receives the selected `moment` object as only parameter. |
+| **onChange** | function | empty function | Callback trigger when the date changes. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If it isn't, the value of the input (a string) is returned. |
+| **onBlur** | function | empty function | Callback trigger for when the user clicks outside of the input, simulating a regular onBlur. The callback receives the selected `moment` object as only parameter, if the date in the input is valid. If it isn't, the value of the input (a string) is returned. |
 | **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days', 'time') |
 | **className** | string | `""` | Extra class names for the component markup. |
 | **inputProps** | object | undefined | Defines additional attributes for the input element of the component. |