You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

101 lines
3.2 KiB

import React, { useState } from "react";
import onInput from "~/util/onInput";
import Input from "../Input/index";
import "./index.scss";
import moment from "jalali-moment";
export default function Birthdate(props) {
const { defaultValue, parent, name } = props;
let momentDate = moment(defaultValue[name]);
let isvalid = momentDate.isValid();
const day = isvalid ? momentDate.format("jDD") : null,
month = isvalid ? momentDate.format("jMM") : null,
year = isvalid ? momentDate.format("jYYYY") : null;
const [state, setState] = useState({ day, month, year });
const onChange = (_name, value) => {
let _state = { ...state, [_name]: value };
setState(_state);
parent.onChange(
name,
moment
.from(`${_state.year}/${_state.month}/${_state.day}`, "fa", "YYYY/M/D")
.locale("en")
);
};
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-birthdate d-flex justify-content-between align-items-center">
<label>تاریخ تولد</label>
<div className="mobile-birthdate__date d-flex align-items-center">
<Input
variant="standard"
name="day"
placeholder={window.t("روز")}
maxLength={2}
onInput={onInput.dayHandler}
parent={{ onChange }}
defaultValue={state}
/>
<span>/</span>
<Input
variant="standard"
name="month"
placeholder={window.t("ماه")}
maxLength={2}
onInput={onInput.monthHandler}
parent={{ onChange }}
defaultValue={state}
/>
<span>/</span>
<Input
variant="standard"
name="year"
placeholder={window.t("سال")}
maxLength={4}
onInput={onInput.yearHandler}
parent={{ onChange }}
defaultValue={state}
/>
</div>
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="birthdate d-flex justify-content-between align-items-center">
<label>تاریخ تولد</label>
<div className="birthdate__date d-flex align-items-center">
<Input
variant="standard"
name="day"
placeholder={window.t("روز")}
maxLength={2}
onInput={onInput.dayHandler}
parent={{ onChange }}
defaultValue={state}
/>
<span>/</span>
<Input
variant="standard"
name="month"
placeholder={window.t("ماه")}
maxLength={2}
onInput={onInput.monthHandler}
parent={{ onChange }}
defaultValue={state}
/>
<span>/</span>
<Input
variant="standard"
name="year"
placeholder={window.t("سال")}
maxLength={4}
onInput={onInput.yearHandler}
parent={{ onChange }}
defaultValue={state}
/>
</div>
</div>
) : null}
</>
);
}