2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017 Amdocs
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React, {Component} from 'react';
24 import {connect} from 'react-redux';
25 import DatePicker from 'react-datepicker';
26 import Moment from 'moment-timezone';
27 import i18n from 'utils/i18n/i18n';
31 DATE_PICKER_PLACEHOLDER
32 } from 'generic-components/dateRange/DateRangeConstants';
33 import DateRangeActions from 'generic-components/dateRange/DateRangeActions';
35 let mapStateToProps = ({dataIntegrity: {dateRangeData}}) => {
36 let {dateRangeStart, dateRangeEnd, dateRangeError} = dateRangeData;
45 let mapActionToProps = (dispatch) => {
47 startDateChange: (startDate, endDate) => {
48 dispatch(DateRangeActions.onStartDateChange(startDate, endDate));
50 endDateChange: (endDate, startDate) => {
51 dispatch(DateRangeActions.onEndDateChange(startDate, endDate));
56 export class DateRange extends Component {
58 dateRangeStart: React.PropTypes.instanceOf(Moment),
59 dateRangeEnd: React.PropTypes.instanceOf(Moment),
60 dateRangeError: React.PropTypes.string
64 let {startDateChange, endDateChange,
65 dateRangeStart, dateRangeEnd} = this.props;
68 <div className='date-range'>
69 <span className='date-input'>
70 <label>{i18n(LABEL_START_DATE) }: </label>
72 className='start-date-picker'
73 selected={dateRangeStart}
74 onChange={(dateValue) => startDateChange(dateValue, dateRangeEnd) }
75 placeholderText={i18n(DATE_PICKER_PLACEHOLDER) }
78 <span className='date-input'>
79 <label>{i18n(LABEL_END_DATE) }: </label>
81 className='end-date-picker'
82 selected={dateRangeEnd}
83 onChange={(dateValue) => endDateChange(dateValue, dateRangeStart) }
84 placeholderText={i18n(DATE_PICKER_PLACEHOLDER) }
91 export default connect(mapStateToProps, mapActionToProps)(DateRange);