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 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], // Array of range objects with from time and to time [hours, minutes] disabledTimes: [ { from: [0,0], to: [9,0] }, { from: [16,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; const dateIconElement = ; const timeIconElement = ; return (

{input.label && ( {input.label} )} { this.onChange(value); }} containerClassName="form-control" date={input.showTimeSelect != true} dateIcon={dateIconElement} time={input.showTimeSelect == true} timeIcon={timeIconElement} {...this.props.customProps} > {hasErrors && (

{input.errors.join(', ')}

)} {input.helpText && ( {input.helpText} )}

); } } DateInputField.propTypes = { onChange: PropTypes.func.isRequired, }; export default DateInputField;

Discover Calgary's new workspace solution for your growing business