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
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} |
|
</> |
|
); |
|
}
|
|
|