/* eslint-disable jsx-a11y/label-has-for */
/**
* Datepicker component.
*/
import React, { useState } from 'react';
import PT from 'prop-types';
import moment from 'moment';
import './style.scss';
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';
import IconCalendar from 'assets/images/tc-edu/icon-calendar.svg';
import useWindowSize from 'utils/useWindowSize';
import CalendarWeek from 'react-dates/lib/components/CalendarWeek';
import IconNext from '../Assets/Images/icon-next.svg';
import IconPrev from '../Assets/Images/icon-prev.svg';
// eslint-disable-next-line no-unused-expressions, react/forbid-foreign-prop-types
CalendarWeek && CalendarWeek.propTypes && delete CalendarWeek.propTypes.children; // fixing the bug in react-dates, more detail in here https://github.com/airbnb/react-dates/issues/1121
function Datepicker({
value,
placeholder,
label,
onChange,
errorMsg,
required,
}) {
const [date, setDate] = useState(value ? moment(value) : null);
const [focused, setFocused] = useState(false);
const { width } = useWindowSize();
return (
<div
styleName={'container ${date ? 'haveValue' : ''} ${
errorMsg ? 'haveError' : ''
} ${focused ? 'isFocused' : ''}'}
>
<SingleDatePicker
hideKeyboardShortcutsPanel
customInputIcon={<IconCalendar />}
date={date}
onDateChange={(changedDate) => {
setDate(changedDate);
onChange(changedDate ? changedDate.toDate() : null);
}}
focused={focused}
onFocusChange={({ focused: changedFocused }) => setFocused(changedFocused)
}
id={'${value}-${placeholder}-${label}-${errorMsg}-${required}'}
placeholder={'${placeholder}${placeholder && required ? ' *' : ''}'}
inputIconPosition="after"
numberOfMonths={1}
navPrev={<IconPrev />}
navNext={<IconNext />}
displayFormat="MMM DD, YYYY"
daySize={width > 600 ? 47 : 35}
renderDayContents={d => (<div>{d.date ? d.date() : ''}</div>)}
enableOutsideDays
firstDayOfWeek={1}
weekDayFormat="ddd"
/>
{label ? (
<span styleName="label">
{label}
{required ? <span> *</span> : null}
</span>
) : null}
{errorMsg ? <span styleName="errorMessage">{errorMsg}</span> : null}
</div>
);
}
Datepicker.defaultProps = {
value: null,
placeholder: '',
label: '',
onChange: () => {},
errorMsg: '',
required: false,
};
Datepicker.propTypes = {
value: PT.instanceOf(Date),
placeholder: PT.string,
label: PT.string,
onChange: PT.func,
errorMsg: PT.string,
required: PT.bool,
};
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
date:null,
};
}
mySubmitHandler = (event) => {
event.preventDefault();
let date = this.state.date;
if (!Number(date)) {
alert("Your date must be a mmddyy number");}}
myChangeHandler = (event) => {
let dat = event.target.date;
let val = event.target.value;
this.setState({[dat]: val});}
render() {return (
<form onSubmit={this.mySubmitHandler}>
<h1>Hello {this.state.date}</h1>
<p>Enter the date:</p>
<input
type='text'
name='date'
onChange={this.myChangeHandler}
/>
<br/>
<br/>
<input type='submit' />
</form>
);}
const DateCalendar = (props) => {
const _date = props.date;
let {format, disabled} = props;
if (!format) format = 'MMDDYY';
const [show, setShow] = useState(false);
let displayDate = _date;
let dt = date(_date, format);
let hasError = false;
const changeDate = (dt) => {
if (disabled) return null;
props.onChange(dt.format(format));}}
ReactDOM.render(<MyForm />, document.getElementById('root'));
export default Datepicker;
// Citations: w3schools, wviviero
//Hello, i spent many days working on this, i searched the stores and the internet, but im unable to find anything that runs react js on server side properly. All i get is the text of the code when it is run. I put the methods for getting input in date format, and passing the input to the calendar box in here.