diff --git a/README.md b/README.md
index b921a52..d293ed5 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ At this point you can import react-datepicker2 and its styles in your applicatio
import DatePicker from 'react-datepicker2';
// Be sure to include styles at some point, probably during your bootstrapping
-import 'react-datepicker2/dist/react-datepicker2.min.css';
+import 'react-datepicker2/dist/react-datepicker2.css';
```
Below is a simple example on how to use the Datepicker in a React view. You will also need to require the css file from this package (or provide your own). The example below shows how to include the css from this package if your build system supports requiring css files (webpack is one that does).
@@ -35,7 +35,7 @@ import React from 'react'
import moment from 'moment-jalaali'
import DatePicker from 'react-datepicker2';
-import 'react-datepicker2/dist/react-datepicker2.min.css';
+import 'react-datepicker2/dist/react-datepicker2.css';
export default React.createClass({
getInitialState() {
diff --git a/dist/index.js b/dist/index.js
index 5f8dda1..7b02b50 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -6629,12 +6629,6 @@ var DatePicker = function (_Component) {
}, {
key: 'setOpen',
value: function setOpen(isOpen) {
- var momentValue = this.state.momentValue;
-
- if (momentValue && this.props.onChange) {
- this.handleChange(momentValue);
- }
-
this.setState({ isOpen: isOpen });
}
}, {
@@ -6661,38 +6655,36 @@ var DatePicker = function (_Component) {
}
}, {
key: 'handleChange',
- value: function handleChange(value) {
+ value: function handleChange() {
+ var momentValue = this.state.momentValue;
if (!this.lastValueChange || !this.lastValueChange.valueOf) {
- // console.log('change 1');
- this.lastValueChange = value;
- this.props.onChange(value);
+ this.lastValueChange = momentValue;
+ this.props.onChange(momentValue);
+ this.close();
return;
}
- if (value.valueOf && value.valueOf() !== this.lastValueChange.valueOf()) {
- // console.log('change 2');
- this.lastValueChange = value;
- this.props.onChange(value);
+ if (momentValue.valueOf && momentValue.valueOf() !== this.lastValueChange.valueOf()) {
+ this.lastValueChange = momentValue;
+ this.props.onChange(momentValue);
+ this.close();
}
}
}, {
- key: 'setMomentValue',
- value: function setMomentValue(momentValue, doChange) {
- var _state = this.state,
- inputFormat = _state.inputFormat,
- timePicker = _state.timePicker;
-
-
- if (doChange !== false && this.props.onChange) {
- this.handleChange(momentValue);
+ key: 'handleInputChangeOnEnter',
+ value: function handleInputChangeOnEnter(event) {
+ if (event.key === 'Enter') {
+ return this.handleChange();
}
-
- // const inputValue = momentValue.format(inputFormat);
+ }
+ }, {
+ key: 'setMomentValue',
+ value: function setMomentValue(momentValue) {
+ var timePicker = this.state.timePicker;
var inputValue = this.getValue(momentValue, timePicker);
-
- this.setState({ momentValue: momentValue, inputValue: inputValue });
+ this.setState({ momentValue: (0, _moment2.default)(momentValue), inputValue: inputValue });
}
}, {
key: 'handleFocus',
@@ -6703,27 +6695,31 @@ var DatePicker = function (_Component) {
key: 'handleBlur',
value: function handleBlur(event) {
var onBlur = this.props.onBlur;
- var _state2 = this.state,
- isOpen = _state2.isOpen,
- momentValue = _state2.momentValue,
- inputFormat = _state2.inputFormat;
+ var isOpen = this.state.isOpen;
if (isOpen) {
this.refs.input.focus();
- } else if (onBlur) {
- onBlur(event);
+ } else {
+ this.close();
+ if (onBlur) {
+ onBlur(event);
+ }
}
+ }
+ }, {
+ key: 'close',
+ value: function close() {
+ var value = this.props.value;
+ var timePicker = this.state.timePicker;
- if (momentValue) {
- var inputValue = momentValue.format(inputFormat);
- this.setState({ inputValue: inputValue });
- }
+ this.setState({ inputValue: this.getValue(value, timePicker) });
+ this.setOpen(false);
}
}, {
key: 'handleClickOutsideCalendar',
value: function handleClickOutsideCalendar() {
- this.setOpen(false);
+ this.close();
}
}, {
key: 'handleSelectDay',
@@ -6766,9 +6762,9 @@ var DatePicker = function (_Component) {
}, {
key: 'renderInput',
value: function renderInput() {
- var _state3 = this.state,
- isOpen = _state3.isOpen,
- inputValue = _state3.inputValue;
+ var _state = this.state,
+ isOpen = _state.isOpen,
+ inputValue = _state.inputValue;
var className = (0, _classnames3.default)(this.props.className, (0, _defineProperty3.default)({}, outsideClickIgnoreClass, isOpen));
@@ -6780,6 +6776,7 @@ var DatePicker = function (_Component) {
className: 'datepicker-input ' + className,
type: 'text',
ref: 'input',
+ onKeyUp: this.handleInputChangeOnEnter.bind(this),
onFocus: this.handleFocus.bind(this),
onBlur: this.handleBlur.bind(this),
onChange: this.handleInputChange.bind(this),
@@ -6791,11 +6788,10 @@ var DatePicker = function (_Component) {
}, {
key: 'renderCalendar',
value: function renderCalendar() {
- var _state4 = this.state,
- momentValue = _state4.momentValue,
- TimePicker = _state4.timePickerComponent;
+ var _state2 = this.state,
+ momentValue = _state2.momentValue,
+ TimePicker = _state2.timePickerComponent;
var _props = this.props,
- onChange = _props.onChange,
min = _props.min,
max = _props.max,
defaultMonth = _props.defaultMonth,
@@ -6814,28 +6810,36 @@ var DatePicker = function (_Component) {
selectedDay: momentValue,
defaultMonth: defaultMonth,
onSelect: this.handleSelectDay.bind(this),
- onClickOutside: this.handleClickOutsideCalendar.bind(this),
+ onClickOutside: this.close.bind(this),
outsideClickIgnoreClass: outsideClickIgnoreClass,
styles: styles,
containerProps: calendarContainerProps
},
- TimePicker ? _react2.default.createElement(TimePicker, {
- min: min,
- max: max,
- momentValue: momentValue,
- setMomentValue: this.setMomentValue.bind(this)
- }) : null
+ _react2.default.createElement(
+ 'div',
+ { className: 'picker-header' },
+ _react2.default.createElement(
+ 'div',
+ { className: 'save-button-container' },
+ _react2.default.createElement(
+ 'button',
+ { className: 'save-button', onClick: this.handleChange.bind(this) },
+ 'Save'
+ )
+ ),
+ TimePicker ? _react2.default.createElement(TimePicker, {
+ min: min,
+ max: max,
+ momentValue: momentValue,
+ setMomentValue: this.setMomentValue.bind(this)
+ }) : _react2.default.createElement('div', { className: 'time-picker-container' })
+ )
)
);
}
}, {
key: 'removeDate',
value: function removeDate() {
- var onChange = this.props.onChange;
-
- if (onChange) {
- onChange('');
- }
this.setState({
input: '',
inputValue: ''
@@ -30180,28 +30184,28 @@ return Tether;
/* 304 */
/***/ (function(module, exports) {
-module.exports = function(module) {
- if(!module.webpackPolyfill) {
- module.deprecate = function() {};
- module.paths = [];
- // module.parent = undefined by default
- if(!module.children) module.children = [];
- Object.defineProperty(module, "loaded", {
- enumerable: true,
- get: function() {
- return module.l;
- }
- });
- Object.defineProperty(module, "id", {
- enumerable: true,
- get: function() {
- return module.i;
- }
- });
- module.webpackPolyfill = 1;
- }
- return module;
-};
+module.exports = function(module) {
+ if(!module.webpackPolyfill) {
+ module.deprecate = function() {};
+ module.paths = [];
+ // module.parent = undefined by default
+ if(!module.children) module.children = [];
+ Object.defineProperty(module, "loaded", {
+ enumerable: true,
+ get: function() {
+ return module.l;
+ }
+ });
+ Object.defineProperty(module, "id", {
+ enumerable: true,
+ get: function() {
+ return module.i;
+ }
+ });
+ module.webpackPolyfill = 1;
+ }
+ return module;
+};
/***/ })
diff --git a/dist/react-datepicker2.css b/dist/react-datepicker2.css
index afc7f35..eaffd29 100644
--- a/dist/react-datepicker2.css
+++ b/dist/react-datepicker2.css
@@ -172,12 +172,20 @@
color: #ffffff;
}
+.picker-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+}
+.save-button-container {
+ flex: 1;
+}
+
/*time picker style*/
.time-picker-container {
- margin-bottom: 10
+ flex: 3;
}
-
.time-picker-container>.time-label {
float: left;
line-height: 30px;
diff --git a/dist/react-datepicker2.min.css b/dist/react-datepicker2.min.css
deleted file mode 100644
index d333117..0000000
--- a/dist/react-datepicker2.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.calendarContainer{border-radius:3px;box-shadow:0 3px 10px #dbdbdb;border:1px solid #ccc;width:300px;margin:auto;text-align:center;padding:10px;background-color:#fff}.calendarContainer *{box-sizing:border-box}.calendarContainer .dayPickerContainer:after,.calendarContainer .monthsList:after,.calendarContainer .daysOfWeek:after{content:'';display:block;clear:both}.datepicker-input{box-sizing:border-box}.calendarContainer .heading{height:42px;font-weight:bold;margin-bottom:10px}.calendarContainer .heading>button{border-radius:3px;background:none;margin:5px 0;border:1px solid #f7f7f7;text-align:center;line-height:30px;width:36px;height:32px;cursor:pointer}.calendarContainer .heading>button:hover{background-color:#f2f2f2}.calendarContainer .heading>span{line-height:35px}.calendarContainer .heading svg{width:10px}.calendarContainer .heading .prev{float:right}.calendarContainer .heading .next{float:left}.calendarContainer .heading .title{line-height:32px;width:auto;height:32px;font-size:1em;margin:5px 0;border:1px solid #f7f7f7;text-align:center;display:inline-block;font-weight:normal;padding:0 6px}.calendarContainer .dayWrapper{padding:5;float:left;width:14.28571429%}.calendarContainer .dayWrapper button{border:none;background:none;outline:none;width:100%;height:36px;border-radius:3px;cursor:pointer}.calendarContainer .dayWrapper button:hover{background-color:#eef}.calendarContainer .dayWrapper button[disabled]{color:#aaa;cursor:not-allowed;background-color:#ebebeb}.calendarContainer .dayWrapper button.selected{background-color:#337ab7;color:#fff}.calendarContainer .dayWrapper:not(.currentMonth) button{opacity:.5}.calendarContainer .daysOfWeek{border-bottom:1px solid #eee;margin-bottom:5px;padding-bottom:5px;display:flex;width:100%}.calendarContainer .daysOfWeek>div{flex-grow:1;justify-content:space-between}.calendarContainer .monthsList{clear:both;width:100%}.calendarContainer .monthsList button{width:33.33333332%;height:25%;float:right;border:1px solid #f9f9f9;outline:none;font-size:1em;background:#fff;padding:10px 0;cursor:pointer}.calendarContainer .monthsList button:hover{background:#eee;cursor:pointer}.calendarContainer .selected button,.calendarContainer .selected button:hover,.calendarContainer .selected button:active,.calendarContainer .selected button:focus{background-color:#337ab7;color:#fff}.calendarContainer.jalaali{direction:rtl}.calendarContainer.jalaali .dayWrapper{float:right}.time-picker-container{margin-bottom:10}.time-picker-container>.time-label{float:left;line-height:30px;width:50%;text-align:center}.time-picker-container>.time-picker-panel{float:right;width:50%}.time-picker-container.jalaali>.time-label{float:right}.time-picker-container.jalaali>.time-picker-panel{float:left}.rc-time-picker{display:inline-block;box-sizing:border-box}.rc-time-picker *{box-sizing:border-box}.rc-time-picker-input{direction:ltr;text-align:center;width:100%;position:relative;display:inline-block;padding:4px 7px;height:28px;cursor:text;font-size:12px;line-height:1.5;color:#666;background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:3px;transition:border .2s cubic-bezier(.645,.045,.355,1),background .2s cubic-bezier(.645,.045,.355,1),box-shadow .2s cubic-bezier(.645,.045,.355,1)}.rc-time-picker-panel{z-index:1070;width:170px;position:absolute;box-sizing:border-box}.rc-time-picker-panel *{box-sizing:border-box}.rc-time-picker-panel-inner{display:inline-block;position:relative;outline:none;list-style:none;font-size:12px;text-align:left;background-color:#fff;border-radius:3px;box-shadow:0 1px 5px #ccc;background-clip:padding-box;border:1px solid #ccc;line-height:1.5}.rc-time-picker-panel-input{margin:0;padding:0;width:100%;cursor:auto;line-height:1.5;outline:0;border:1px solid transparent}.rc-time-picker-panel-input-wrap{box-sizing:border-box;position:relative;padding:6px;border-bottom:1px solid #e9e9e9}.rc-time-picker-panel-input-invalid{border-color:#f00}.rc-time-picker-panel-clear-btn{position:absolute;right:6px;cursor:pointer;overflow:hidden;width:20px;height:20px;text-align:center;line-height:20px;top:6px;margin:0}.rc-time-picker-panel-clear-btn:after{content:"x";font-size:12px;color:#aaa;display:inline-block;line-height:1;width:20px;transition:color .3s ease}.rc-time-picker-panel-clear-btn:hover:after{color:#666}.rc-time-picker-panel-select{float:left;font-size:12px;border:1px solid #e9e9e9;border-width:0 1px;margin-left:-1px;box-sizing:border-box;width:56px;overflow:hidden;position:relative}.rc-time-picker-panel-select-active{overflow-y:auto}.rc-time-picker-panel-select:first-child{border-left:0;margin-left:0}.rc-time-picker-panel-select:last-child{border-right:0}.rc-time-picker-panel-select ul{list-style:none;box-sizing:border-box;margin:0;padding:0;width:100%;max-height:144px;overflow-x:hidden;overflow-y:scroll}.rc-time-picker-panel-select li{list-style:none;box-sizing:content-box;margin:0;padding:0 0 0 16px;width:100%;height:24px;line-height:24px;text-align:left;cursor:pointer;user-select:none}.rc-time-picker-panel-select li:hover{background:#edfaff}li.rc-time-picker-panel-select-option-selected{background:#edfaff;color:#2db7f5}li.rc-time-picker-panel-select-option-disabled{color:#bfbfbf}li.rc-time-picker-panel-select-option-disabled:hover{background:transparent;cursor:not-allowed}.tether-element.tether-element-attached-top.tether-element-attached-center.tether-target-attached-bottom.tether-target-attached-center.tether-enabled{z-index:2000}
\ No newline at end of file
diff --git a/docs/css/react-datepicker2.css b/docs/css/react-datepicker2.css
index 505ff49..c6def95 100644
--- a/docs/css/react-datepicker2.css
+++ b/docs/css/react-datepicker2.css
@@ -181,23 +181,30 @@
float: right;
}
+.picker-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+}
+.save-button-container {
+ flex: 1;
+}
/*time picker style*/
.time-picker-container {
- margin-bottom: 10
+ display: flex;
+ flex: 3;
}
.time-picker-container>.time-label {
- float: left;
+ flex: 1;
line-height: 30px;
- width: 50%;
- text-align: center;
+ text-align: right;
}
.time-picker-container>.time-picker-panel {
- float: right;
- width: 50%;
+ flex: 2;
}
.time-picker-container.jalaali>.time-label {
@@ -376,4 +383,4 @@ li.rc-time-picker-panel-select-option-disabled {
li.rc-time-picker-panel-select-option-disabled:hover {
background: transparent;
cursor: not-allowed;
-}
\ No newline at end of file
+}
diff --git a/docs/css/react-datepicker2.min.css b/docs/css/react-datepicker2.min.css
deleted file mode 100644
index 3a0746f..0000000
--- a/docs/css/react-datepicker2.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.calendarContainer{font-family:'Open Sans','Vazir';border-radius:3px;box-shadow:0 3px 10px #dbdbdb;border:1px solid #ccc;width:300px;margin:auto;text-align:center;padding:10px;background-color:#fff}.calendarContainer *{box-sizing:border-box}.calendarContainer .dayPickerContainer:after,.calendarContainer .monthsList:after,.calendarContainer .daysOfWeek:after{content:'';display:block;clear:both}.datepicker-input{box-sizing:border-box}.calendarContainer .heading{height:42px;font-weight:bold;margin-bottom:10px}.calendarContainer .heading>button{border-radius:3px;background:none;margin:5px 0;border:1px solid #f7f7f7;text-align:center;line-height:30px;width:36px;height:32px;cursor:pointer}.calendarContainer .heading>button:hover{background-color:#f2f2f2}.calendarContainer .heading>span{line-height:35px}.calendarContainer .heading svg{width:10px}.calendarContainer .heading .prev{float:right}.calendarContainer .heading .next{float:left}.calendarContainer .heading .title{line-height:32px;width:auto;height:32px;font-size:1em;margin:5px 0;border:1px solid #f7f7f7;text-align:center;display:inline-block;font-weight:normal;padding:0 6px}.calendarContainer .dayWrapper{padding:5;float:left;width:14.28571429%}.calendarContainer .dayWrapper button{border:none;background:none;outline:none;width:100%;height:36px;border-radius:3px;cursor:pointer}.calendarContainer .dayWrapper button:hover{background-color:#eef}.calendarContainer .dayWrapper button[disabled]{color:#aaa;cursor:not-allowed;background-color:#ebebeb}.calendarContainer .dayWrapper button.selected{background-color:#337ab7;color:#fff}.calendarContainer .dayWrapper:not(.currentMonth) button{opacity:.5}.calendarContainer .daysOfWeek{border-bottom:1px solid #eee;margin-bottom:5px;padding-bottom:5px;display:flex;width:100%}.calendarContainer .daysOfWeek>div{flex-grow:1;justify-content:space-between}.calendarContainer .monthsList{clear:both;width:100%}.calendarContainer .monthsList button{width:33.33333332%;height:25%;float:right;border:1px solid #f9f9f9;outline:none;font-size:1em;background:#fff;padding:10px 0;cursor:pointer}.calendarContainer .monthsList button:hover{background:#eee;cursor:pointer}.calendarContainer .selected button,.calendarContainer .selected button:hover,.calendarContainer .selected button:active,.calendarContainer .selected button:focus{background-color:#337ab7;color:#fff}.calendarContainer.jalaali{direction:rtl}.calendarContainer.jalaali .dayWrapper{float:right}.time-picker-container{margin-bottom:10}.time-picker-container>.time-label{float:left;line-height:30px;width:50%;text-align:center}.time-picker-container>.time-picker-panel{float:right;width:50%}.time-picker-container.jalaali>.time-label{float:right}.time-picker-container.jalaali>.time-picker-panel{float:left}.rc-time-picker{display:inline-block;box-sizing:border-box}.rc-time-picker *{box-sizing:border-box}.rc-time-picker-input{direction:ltr;text-align:center;width:100%;position:relative;display:inline-block;padding:4px 7px;height:28px;cursor:text;font-size:12px;line-height:1.5;color:#666;background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:3px;transition:border .2s cubic-bezier(.645,.045,.355,1),background .2s cubic-bezier(.645,.045,.355,1),box-shadow .2s cubic-bezier(.645,.045,.355,1)}.rc-time-picker-panel{font-family:'Open Sans','Vazir';z-index:1070;width:170px;position:absolute;box-sizing:border-box}.rc-time-picker-panel *{box-sizing:border-box}.rc-time-picker-panel-inner{display:inline-block;position:relative;outline:none;list-style:none;font-size:12px;text-align:left;background-color:#fff;border-radius:3px;box-shadow:0 1px 5px #ccc;background-clip:padding-box;border:1px solid #ccc;line-height:1.5}.rc-time-picker-panel-input{margin:0;padding:0;width:100%;cursor:auto;line-height:1.5;outline:0;border:1px solid transparent}.rc-time-picker-panel-input-wrap{box-sizing:border-box;position:relative;padding:6px;border-bottom:1px solid #e9e9e9}.rc-time-picker-panel-input-invalid{border-color:#f00}.rc-time-picker-panel-clear-btn{position:absolute;right:6px;cursor:pointer;overflow:hidden;width:20px;height:20px;text-align:center;line-height:20px;top:6px;margin:0}.rc-time-picker-panel-clear-btn:after{content:"x";font-size:12px;color:#aaa;display:inline-block;line-height:1;width:20px;transition:color .3s ease}.rc-time-picker-panel-clear-btn:hover:after{color:#666}.rc-time-picker-panel-select{float:left;font-size:12px;border:1px solid #e9e9e9;border-width:0 1px;margin-left:-1px;box-sizing:border-box;width:56px;overflow:hidden;position:relative}.rc-time-picker-panel-select-active{overflow-y:auto}.rc-time-picker-panel-select:first-child{border-left:0;margin-left:0}.rc-time-picker-panel-select:last-child{border-right:0}.rc-time-picker-panel-select ul{list-style:none;box-sizing:border-box;margin:0;padding:0;width:100%;max-height:144px;overflow-x:hidden;overflow-y:scroll}.rc-time-picker-panel-select li{list-style:none;box-sizing:content-box;margin:0;padding:0 0 0 16px;width:100%;height:24px;line-height:24px;text-align:left;cursor:pointer;user-select:none}.rc-time-picker-panel-select li:hover{background:#edfaff}li.rc-time-picker-panel-select-option-selected{background:#edfaff;color:#2db7f5}li.rc-time-picker-panel-select-option-disabled{color:#bfbfbf}li.rc-time-picker-panel-select-option-disabled:hover{background:transparent;cursor:not-allowed}
\ No newline at end of file
diff --git a/docs/demo_bundles.js b/docs/demo_bundles.js
index 6965d2c..19da3d3 100644
--- a/docs/demo_bundles.js
+++ b/docs/demo_bundles.js
@@ -6289,12 +6289,6 @@ var DatePicker = function (_Component) {
}, {
key: 'setOpen',
value: function setOpen(isOpen) {
- var momentValue = this.state.momentValue;
-
- if (momentValue && this.props.onChange) {
- this.handleChange(momentValue);
- }
-
this.setState({ isOpen: isOpen });
}
}, {
@@ -6322,36 +6316,28 @@ var DatePicker = function (_Component) {
}, {
key: 'handleChange',
value: function handleChange(value) {
+ var momentValue = this.state.momentValue;
+ console.log('handle change');
if (!this.lastValueChange || !this.lastValueChange.valueOf) {
// console.log('change 1');
- this.lastValueChange = value;
- this.props.onChange(value);
+ this.lastValueChange = momentValue;
+ this.props.onChange(momentValue);
return;
}
if (value.valueOf && value.valueOf() !== this.lastValueChange.valueOf()) {
// console.log('change 2');
- this.lastValueChange = value;
- this.props.onChange(value);
+ this.lastValueChange = momentValue;
+ this.props.onChange(momentValue);
}
}
}, {
key: 'setMomentValue',
- value: function setMomentValue(momentValue, doChange) {
- var _state = this.state,
- inputFormat = _state.inputFormat,
- timePicker = _state.timePicker;
-
-
- if (doChange !== false && this.props.onChange) {
- this.handleChange(momentValue);
- }
-
- // const inputValue = momentValue.format(inputFormat);
+ value: function setMomentValue(momentValue) {
+ var timePicker = this.state.timePicker;
var inputValue = this.getValue(momentValue, timePicker);
-
this.setState({ momentValue: momentValue, inputValue: inputValue });
}
}, {
@@ -6362,17 +6348,23 @@ var DatePicker = function (_Component) {
}, {
key: 'handleBlur',
value: function handleBlur(event) {
- var onBlur = this.props.onBlur;
- var _state2 = this.state,
- isOpen = _state2.isOpen,
- momentValue = _state2.momentValue,
- inputFormat = _state2.inputFormat;
+ var _props = this.props,
+ value = _props.value,
+ defaultValue = _props.defaultValue,
+ onBlur = _props.onBlur;
+ var _state = this.state,
+ isOpen = _state.isOpen,
+ momentValue = _state.momentValue,
+ inputFormat = _state.inputFormat;
if (isOpen) {
this.refs.input.focus();
- } else if (onBlur) {
- onBlur(event);
+ this.setState({ inputValue: value || defaultValue });
+ } else {
+ if (onBlur) {
+ onBlur(event);
+ }
}
if (momentValue) {
@@ -6383,6 +6375,11 @@ var DatePicker = function (_Component) {
}, {
key: 'handleClickOutsideCalendar',
value: function handleClickOutsideCalendar() {
+ var _props2 = this.props,
+ value = _props2.value,
+ defaultValue = _props2.defaultValue;
+
+ this.setState({ inputValue: value || defaultValue });
this.setOpen(false);
}
}, {
@@ -6426,9 +6423,9 @@ var DatePicker = function (_Component) {
}, {
key: 'renderInput',
value: function renderInput() {
- var _state3 = this.state,
- isOpen = _state3.isOpen,
- inputValue = _state3.inputValue;
+ var _state2 = this.state,
+ isOpen = _state2.isOpen,
+ inputValue = _state2.inputValue;
var className = (0, _classnames3.default)(this.props.className, (0, _defineProperty3.default)({}, outsideClickIgnoreClass, isOpen));
@@ -6451,16 +6448,15 @@ var DatePicker = function (_Component) {
}, {
key: 'renderCalendar',
value: function renderCalendar() {
- var _state4 = this.state,
- momentValue = _state4.momentValue,
- TimePicker = _state4.timePickerComponent;
- var _props = this.props,
- onChange = _props.onChange,
- min = _props.min,
- max = _props.max,
- defaultMonth = _props.defaultMonth,
- styles = _props.styles,
- calendarContainerProps = _props.calendarContainerProps;
+ var _state3 = this.state,
+ momentValue = _state3.momentValue,
+ TimePicker = _state3.timePickerComponent;
+ var _props3 = this.props,
+ min = _props3.min,
+ max = _props3.max,
+ defaultMonth = _props3.defaultMonth,
+ styles = _props3.styles,
+ calendarContainerProps = _props3.calendarContainerProps;
return _react2.default.createElement(
@@ -6479,23 +6475,31 @@ var DatePicker = function (_Component) {
styles: styles,
containerProps: calendarContainerProps
},
- TimePicker ? _react2.default.createElement(TimePicker, {
- min: min,
- max: max,
- momentValue: momentValue,
- setMomentValue: this.setMomentValue.bind(this)
- }) : null
+ _react2.default.createElement(
+ 'div',
+ { className: 'picker-header' },
+ _react2.default.createElement(
+ 'div',
+ { className: 'save-button-container' },
+ _react2.default.createElement(
+ 'button',
+ { className: 'save-button', onClick: this.handleChange.bind(this) },
+ 'Save'
+ )
+ ),
+ TimePicker ? _react2.default.createElement(TimePicker, {
+ min: min,
+ max: max,
+ momentValue: momentValue,
+ setMomentValue: this.setMomentValue.bind(this)
+ }) : _react2.default.createElement('div', { className: 'time-picker-container' })
+ )
)
);
}
}, {
key: 'removeDate',
value: function removeDate() {
- var onChange = this.props.onChange;
-
- if (onChange) {
- onChange('');
- }
this.setState({
input: '',
inputValue: ''
@@ -19752,28 +19756,28 @@ function saveRef(name, component) {
/* 205 */
/***/ (function(module, exports) {
-module.exports = function(module) {
- if(!module.webpackPolyfill) {
- module.deprecate = function() {};
- module.paths = [];
- // module.parent = undefined by default
- if(!module.children) module.children = [];
- Object.defineProperty(module, "loaded", {
- enumerable: true,
- get: function() {
- return module.l;
- }
- });
- Object.defineProperty(module, "id", {
- enumerable: true,
- get: function() {
- return module.i;
- }
- });
- module.webpackPolyfill = 1;
- }
- return module;
-};
+module.exports = function(module) {
+ if(!module.webpackPolyfill) {
+ module.deprecate = function() {};
+ module.paths = [];
+ // module.parent = undefined by default
+ if(!module.children) module.children = [];
+ Object.defineProperty(module, "loaded", {
+ enumerable: true,
+ get: function() {
+ return module.l;
+ }
+ });
+ Object.defineProperty(module, "id", {
+ enumerable: true,
+ get: function() {
+ return module.i;
+ }
+ });
+ module.webpackPolyfill = 1;
+ }
+ return module;
+};
/***/ }),
diff --git a/docs/index.html b/docs/index.html
index 5798010..5252c19 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,11 +5,11 @@
-
+
-