contract change options 'number_paydate' datefield fix for wrong values

components/DatePicker/index.js

@@ -90,6 +90,7 @@ export default class DateInput extends React.Component
 						min={ min } 
 						max={ max } 
 						onChange={ this._handle_onChange }
+						className={ this.props.className }
 					/>
 				</div>
 			)

pages/contract/change/components/Options/index.js

@@ -18,6 +18,7 @@ class PaymentDate extends React.Component
 			min: null, 
 			max: null, 
 			help: false, 
+			error: false, 
 		}
 	}
 
@@ -38,11 +39,24 @@ class PaymentDate extends React.Component
 	_handle_onChange = (value) => 
 	{
 		const { onOption } = this.props;
+		const { min, max } = this.state;
 
-		this.setState({ value }, () => 
+		const v = moment(value).toDate();
+
+		if(v >= min && v <= max )
 		{
-			onOption(value);
-		});
+			this.setState({ value, error: false, }, () => 
+			{
+				onOption(value);
+			});
+		}
+		else
+		{
+			this.setState({ value: undefined, error: true }, () => 
+			{
+				onOption(v, true);
+			});
+		}
 	}
 
 	_handle_onMobileHelp = () => 
@@ -56,21 +70,28 @@ class PaymentDate extends React.Component
 	render()
 	{
 		const { option } = this.props;
-		const { value, min, max } = this.state;
+		const { value, min, max, error } = this.state;
 
 		return (
-			<div className="form_field">
+			<div className="form_field" style={error ? { marginBottom: "30px" } : {}}>
 				<label>Дата платежа:</label>
-				<DateInput 
-					placeholder="" 
-					value={ value } 
-					min={ min } 
-					max={ max } 
-					id={"date_to"} 
-					onChange={ this._handle_onChange } 
-					disabled={ option.disable ? true : false } 
-					plain={ true } 
-				/>
+				<div style={{ position: "relative", }}>
+					<DateInput 
+						placeholder="" 
+						value={ value } 
+						min={ min } 
+						max={ max } 
+						id={"date_to"} 
+						onChange={ this._handle_onChange } 
+						onClick={ () => this.setState({ error: false }) } 
+						disabled={ option.disable ? true : false } 
+						plain={ true } 
+						className={ error ? "error" : "" } 
+					/>
+					{ error && (
+						<p style={{ position: "absolute", left: "20px", lineHeight: "16px", color: "red", fontSsize: "12px", top: "45px" }}>Выберите дату между { min !== null && moment(min).format("DD.MM.YYYY") } и { max !== null && moment(max).format("DD.MM.YYYY") }</p>
+					) }
+				</div>
 			</div>
 		)
 	}
@@ -690,9 +711,12 @@ export default class Options extends React.Component
 		}
 	}
 
-	_handle_onPaymentDateChange = (date) => 
+	_handle_onPaymentDateChange = (date, error) => 
 	{
-		this.setState({ number_paydate: date });
+		const { errors } = this.state;
+
+		if(error) { errors['paydate'] = true; } else { delete errors['paydate']; }
+		this.setState({ number_paydate: date, errors });
 	}
 
 	_handle_onFixLastPaymentChange = (value) =>