استفاده از render

[hmahdavi921]

در بوت استرپ 5 المانی داریم با نام Floating labels که میخوام دیت پیکر رو روی اون اجرا کنم .
کامپوننتی که نوشتم به این صورت هست :

function InputDatePicker(props: { id: string; name: string; value: number; label: string; }) {
    return (
        <div className="form-floating mb-2">
            <input className="form-control text-center" id={props.id}
                name={props.name}
                defaultValue={props.value}
                type="text" placeholder={props.label} />
            <label htmlFor={props.id}> {props.label}</label>
        </div>
    );
}
export default InputDatePicker;

و به این صورت هم استفاده کردم :

 <DatePicker
     render={<InputDatePicker id={"[" + i + "].FirstSetupDate"}
         name={"[" + i + "].FirstSetupDate"}
         value={item.serviceTime}
         label={"تاریخ نصب"}
         key={"[" + i + "].FirstSetupDate" }
     />}
     className="rmdp-mobile "
     value="1403/07/01"
     format="YYYY/MM/DD"
     calendar={persianCalendar}
     locale={persian_fa}
 />

اما خوب کلا کار نمیکنه و دیت پیکر باز نمیشه. اگر render رو حذف کنم کاملا اوکی هست.

[shahabyazdi]

سلام خوبید ؟ اینجا باید پراپ های onChange و onFocus رو هم ست کنید. لطفا اینجا رو ببینید: https://shahabyazdi.github.io/react-multi-date-picker/types/#custom-(input)

…

On Tue, Sep 24, 2024 at 2:03 PM hossein ***@***.***> wrote: در بوت استرپ 5 المانی داریم با نام Floating labels که میخوام دیت پیکر رو روی اون اجرا کنم . کامپوننتی که نوشتم به این صورت هست : function InputDatePicker(props: { id: string; name: string; value: number; label: string; }) { return ( <div className="form-floating mb-2"> <input className="form-control text-center" id={props.id} name={props.name} defaultValue={props.value} type="text" placeholder={props.label} /> <label htmlFor={props.id}> {props.label}</label> </div> ); } export default InputDatePicker; و به این صورت هم استفاده کردم : <DatePicker render={<InputDatePicker id={"[" + i + "].FirstSetupDate"} name={"[" + i + "].FirstSetupDate"} value={item.serviceTime} label={"تاریخ نصب"} key={"[" + i + "].FirstSetupDate" } />} className="rmdp-mobile " value="1403/07/01" format="YYYY/MM/DD" calendar={persianCalendar} locale={persian_fa} /> اما خوب کلا کار نمیکنه و دیت پیکر باز نمیشه. اگر render رو حذف کنم کاملا اوکی هست. — Reply to this email directly, view it on GitHub <#315>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEOULKM4VANEQCT34GOGEY3ZYE5YNAVCNFSM6AAAAABOX7L6L6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGU2DKMBRGM4DSOA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[hmahdavi921]

به این صورت تغییر دادم و درست شد

function InputDatePicker(props: { id: string; name: string; value: number; label: string; onFocus: FocusEvent, onChange: ChangeEvent }) {

    return (
        <div className="form-floating mb-2">
            <input className="form-control text-center" id={props.id}
                name={props.name}
                defaultValue={props.value}
                type="text" placeholder={props.label}
                onFocus={props.onFocus}
                onChange={props.onChange}
            />
            <label htmlFor={props.id}> {props.label}</label>
        </div>
    );
}

export default InputDatePicker;

سپاس