summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/datepicker
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/datepicker')
-rw-r--r--openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx151
1 files changed, 92 insertions, 59 deletions
diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
index 25e7e7e02d..b4bc8be9ec 100644
--- a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
+++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx
@@ -5,72 +5,105 @@ import moment from 'moment';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
class CustomInput extends React.Component {
+ static propTypes = {
+ placeHolderText: PropTypes.string,
+ onChange: PropTypes.func,
+ onClick: PropTypes.func,
+ value: PropTypes.string
+ };
- static propTypes = {
- placeHolderText: PropTypes.string,
- onChange: PropTypes.func,
- onClick: PropTypes.func,
- value: PropTypes.string
- };
-
- render() {
- const {placeholderText, onClick, onClear, inputRef, value: date} = this.props;
- const text = date ? date : placeholderText;
- const textStyle = date ? '' : 'placeholder';
- return (
- <div onClick={onClick} ref={inputRef} className='datepicker-custom-input'>
- <div className={`datepicker-text ${textStyle}`}>{text}</div>
- {date && <SVGIcon onClick={e => {e.stopPropagation(); onClear();}} name='close' className='clear-input'/>}
- <SVGIcon name='calendar'/>
- </div>
- );
- }
-};
+ render() {
+ const {
+ placeholderText,
+ onClick,
+ onClear,
+ inputRef,
+ value: date
+ } = this.props;
+ const text = date ? date : placeholderText;
+ const textStyle = date ? '' : 'placeholder';
+ return (
+ <div
+ onClick={onClick}
+ ref={inputRef}
+ className="datepicker-custom-input">
+ <div className={`datepicker-text ${textStyle}`}>{text}</div>
+ {date && (
+ <SVGIcon
+ onClick={e => {
+ e.stopPropagation();
+ onClear();
+ }}
+ name="close"
+ className="clear-input"
+ />
+ )}
+ <SVGIcon name="calendar" />
+ </div>
+ );
+ }
+}
const parseDate = (date, format) => {
- return typeof date === 'number' ? moment.unix(date) : moment(date, format);
+ return typeof date === 'number' ? moment.unix(date) : moment(date, format);
};
class Datepicker extends React.Component {
- static propTypes = {
- date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- format: PropTypes.string,
- onChange: PropTypes.func,
- selectsStart: PropTypes.bool,
- selectsEnd: PropTypes.bool,
- startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- disabled: PropTypes.bool,
- label: PropTypes.string,
- isRequired: 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
- };
+ static propTypes = {
+ date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ format: PropTypes.string,
+ onChange: PropTypes.func,
+ selectsStart: PropTypes.bool,
+ selectsEnd: PropTypes.bool,
+ startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ disabled: PropTypes.bool,
+ label: PropTypes.string,
+ isRequired: 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>
- );
- }
+ 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;