import React, { Component } from 'react'; import { observer } from 'mobx-react'; import PropTypes from 'prop-types'; import { withTranslation } from 'react-i18next'; import DateTimePicker from 'react-widgets/lib/DateTimePicker'; import i18n from 'i18next'; import moment from 'moment'; import i18next from 'i18next'; import withCustomComponent from 'ui/components/withCustomComponent'; @withCustomComponent('DateInputField') @withTranslation() @observer class DateInputField extends Component { constructor(props) { super(props); this.state = { touched: false, // Sunday = 0, ..., Saturday = 6 disabledWeekdays: [0,1,2,6], // Array of range objects with from time and to time [hours, minutes] disabledTimes: [ { from: [0,0], to: [10,0] }, { from: [18,45], to: [23,45] } ] }; } onChange = (date) => { this.setState({ touched: true }); if (!date) { this.props.onChange(this.props.name, null); return; } const input = this.props; if (input.id === 'tourDate') date = this.validateTourDate(date, false); let currentDate = input.value ?? new Date(); let clone = moment(currentDate).clone().toDate(); if (input.showTimeSelect) { clone.setMinutes(date.getMinutes()); clone.setHours(date.getHours()); } else { clone.setYear(date.getFullYear()); clone.setMonth(date.getMonth()); clone.setDate(date.getDate()); } this.props.onChange(this.props.name, clone); }; onFocus = () => { this.setState({ touched: true }); }; componentDidMount() { const input = this.props; // Checks disabled days and times on TourForm if (input.id === 'tourDate' && !!this.props.showTimeSelect === false) { this.validateTourDate(input.value, true); } } // Validates date and time based on disabled arrays in state validateTourDate(date, init) { let tourDate = date; const { disabledWeekdays, disabledTimes } = this.state; // CHECK WEEKDAY IS VALID if (disabledWeekdays.indexOf(tourDate.getDay()) !== -1) { while (this.state.disabledWeekdays.indexOf(tourDate.getDay()) !== -1) { tourDate.setDate(tourDate.getDate() + 1); } if (!init) { this.props.appStore.setPopMessage( t('Tours are not available on selected weekday. Defaulted to next available weekday.') ); return tourDate; } } // CHECK TOUR TIME IS VALID for (let i = 0; i < disabledTimes.length; i++) { let rangeObject = disabledTimes[i]; let startTime = moment(tourDate).startOf('day').add(rangeObject.from[0], 'hours').add(rangeObject.from[1], 'minutes'); let endTime = moment(tourDate).startOf('day').add(rangeObject.to[0], 'hours').add(rangeObject.to[1], 'minutes'); // If time is within an invalid range, reset to earliest valid time if (moment(tourDate).isBetween(startTime, endTime)) { tourDate = moment(tourDate).startOf('day') .add(disabledTimes[0].to[0], 'hours') .add(disabledTimes[0].to[1], 'minutes') .toDate(); if (!init) { this.props.appStore.setPopMessage( t('The selected time is not available for a tour. We have defaulted to the earliest available time.') ); return tourDate; } break; } } // If initializing component, change date directly. If not, just return date value to this.onChange if (init) return this.props.onChange(this.props.name, tourDate); return tourDate; } render() { const input = this.props; const hasErrors = input.errors && input.errors.length > 0; const { touched } = this.state; return ( <> {input.label || input.name}

{ this.onChange(value); }} containerClassName="form-control" date={input.showTimeSelect != true} time={input.showTimeSelect == true} >

{hasErrors && ( {input.errors.join(', ')} )} ); } } DateInputField.propTypes = { onChange: PropTypes.func.isRequired, }; export default DateInputField;

Articles