aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx')
-rw-r--r--openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx75
1 files changed, 75 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
new file mode 100644
index 0000000000..cd39376bda
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import moment from 'moment';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+
+class CustomInput extends React.Component {
+
+ static propTypes = {
+ placeHolderText: React.PropTypes.string,
+ onChange: React.PropTypes.func,
+ onClick: React.PropTypes.func,
+ value: React.PropTypes.string
+ };
+
+ render() {
+ const {placeholderText, onClick, onClear, inputRef, value: date} = this.props;
+ const text = date ? date : placeholderText;
+ const textStyle = date ? '' : 'placeholder';
+ return (
+ <div ref={inputRef} className='datepicker-custom-input'>
+ <div onClick={onClick} className={`datepicker-text ${textStyle}`}>{text}</div>
+ <div onClick={onClear} className='clear-input'/>
+ <SVGIcon onClick={onClick} name='calendar'/>
+ </div>
+ );
+ }
+};
+
+const parseDate = (date, format) => {
+ return typeof date === 'number' ? moment.unix(date) : moment(date, format);
+};
+
+class Datepicker extends React.Component {
+ static propTypes = {
+ date: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+ format: React.PropTypes.string,
+ onChange: React.PropTypes.func,
+ selectsStart: React.PropTypes.bool,
+ selectsEnd: React.PropTypes.bool,
+ startDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+ endDate: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+ disabled: React.PropTypes.bool,
+ label: React.PropTypes.string,
+ isRequired: React.PropTypes.bool
+ }
+ render() {
+ let {date, format, onChange, selectsStart = false, startDate = null, endDate = null, selectsEnd = false,
+ disabled = false, inputRef} = this.props;
+ const placeholderText = 'Enter a date';
+ const props = {
+ format,
+ onChange,
+ disabled,
+ selected: date ? parseDate(date, format) : date,
+ selectsStart,
+ selectsEnd,
+ placeholderText,
+ startDate: startDate ? parseDate(startDate, format) : startDate,
+ endDate: endDate ? parseDate(endDate, format) : endDate
+ };
+
+ return (
+ <div className='customized-date-picker'>
+ <DatePicker
+ calendarClassName='customized-date-picker-calendar'
+ customInput={<CustomInput inputRef={inputRef} onClear={() => onChange(undefined)} placeholderText={placeholderText}/>}
+ minDate={selectsEnd && props.startDate}
+ maxDate={selectsStart && props.endDate}
+ {...props}/>
+ </div>
+ );
+ }
+}
+
+export default Datepicker;