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.
61 lines
1.8 KiB
61 lines
1.8 KiB
import React, { useState } from "react"; |
|
import onInput from "../../../../utils/onInput"; |
|
import Input from "../../../../components/Input/index"; |
|
|
|
import moment from "jalali-moment"; |
|
|
|
export default function Birthdate({ defaultValue, 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); |
|
|
|
props.onChange( |
|
name, |
|
moment |
|
.from(`${_state.year}/${_state.month}/${_state.day}`, "fa", "YYYY/M/D") |
|
.locale("en") |
|
); |
|
}; |
|
return ( |
|
<div className="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="روز" |
|
maxLength={2} |
|
onInput={onInput.dayHandler} |
|
onChange={onChange} |
|
defaultValue={state} |
|
/> |
|
<span>/</span> |
|
<Input |
|
variant="standard" |
|
name="month" |
|
placeholder="ماه" |
|
maxLength={2} |
|
onInput={onInput.monthHandler} |
|
onChange={onChange} |
|
defaultValue={state} |
|
/> |
|
<span>/</span> |
|
<Input |
|
variant="standard" |
|
name="year" |
|
placeholder="سال" |
|
maxLength={4} |
|
onInput={onInput.yearHandler} |
|
onChange={onChange} |
|
defaultValue={state} |
|
/> |
|
</div> |
|
</div> |
|
); |
|
}
|
|
|