Passing Date Picker Value from Child to Parent with optional parameter

Question

EDTF.JS

function SentenceItem(props: {

readOnly?: boolean;

prefix?: string;

firstItem?: boolean;

default: string;

value: string;

}) {

if (props.readOnly && !props.value) return null;

return (

<>

{!props.firstItem ? ' ' : false}

{props.prefix ? `${props.prefix} ` : false}

<span className={styles.item}>{props.value ? props.value : props.default}</span>

</>

);

}

function SentenceBuild(props: {

form: FormHook<EditMedicationForm.EditMedicationFormStructure>;

fieldPath: EditMedicationForm.InstructionFields;

defaultValue: string;

useDefaultValue: boolean;

readOnly?: boolean;

}) {

const instruction = props.form.values[props.fieldPath];

if (!isDosageTimesInstruction(instruction)) return null;

const instructions = instruction.instructions;

const routeOfAdministration = instruction.routeOfAdministration;

const times = instruction.times;

const startsOn = moment(instruction.startsOn, ValidDateFormats.NodeDateTimeTimezone);

let showStartsOn = false;

if (startsOn && startsOn.isValid()) {

showStartsOn = moment().endOf('day').isBefore(startsOn, 'day');

}

if (props.useDefaultValue && props.defaultValue)

return (

{capitalizeFirstLetter(props.defaultValue)}

</div>

);

return (

<SentenceItem

firstItem

value={instructions === '' ? '' : capitalizeFirstLetter(instructions)}

default='[Administration dosage instructions]'

/>

<SentenceItem

prefix='via'

readOnly={props.readOnly}

value={routeOfAdministration?.name?.toLowerCase() ?? ''}

default='[route of administration]'

/>

<SentenceItem

prefix='at'

readOnly={props.readOnly}

value={times.length ? times.join(', ') : ''}

default='[time]'

/>

{showStartsOn && (

<SentenceItem

prefix='starting on'

readOnly={props.readOnly}

value={moment(startsOn).format(ValidDateFormats.Edit)}

default='[date]'

/>

)}

</div>

);

}

EDSF.JS

export const EditDurationSelectorField: React.FC<{

form: FormHook<EditMedicationForm.EditMedicationFormStructure>;

medicationStatus: MedicationStatus;

shortCourseDefaults: boolean;

setShortCourseDefaults: (setDefaults: boolean) => void;

}> = props => {

const medicationSettings = useMedicationSettings();

const expiresOnField = useField({ form: props.form, field: 'expiresOn' });

const performedOnField = useField({ form: props.form, field: 'performedOn' });

const expiresOnMoment = expiresOnField.value

? moment(expiresOnField.value, ValidDateFormats.Edit).clone().endOf('day')

: null;

const performedOnMoment = performedDate(performedOnField.value, ValidDateFormats.Edit);

There are two components startsOn value send to performedOnMoment=startson value

Naimish Makwana · Answer

It looks like you're working on passing a date picker value from a child component to a parent component in a React application. Here's a simplified example to illustrate how you can achieve this:

Child Component

import React from 'react';

const DatePicker = ({ onDateChange }) => {
    const handleChange = (event) => {
        onDateChange(event.target.value);
    };

    return (
        <input type="datetime-local" onChange={handleChange} />
    );
};

export default DatePicker;

Parent Component

import React, { useState } from 'react';
import DatePicker from './DatePicker';

const ParentComponent = () => {
    const [selectedDate, setSelectedDate] = useState('');

    const handleDateChange = (date) => {
        setSelectedDate(date);
    };

    return (
        <div>
            <h1>Selected Date: {selectedDate}</h1>
            <DatePicker onDateChange={handleDateChange} />
        </div>
    );
};

export default ParentComponent;

In this example:

The DatePicker component is the child component that contains the date picker input.
The ParentComponent is the parent component that maintains the state of the selected date.
The onDateChange function is passed as a prop from the parent to the child, allowing the child to update the parent's state when the date changes.

Thanks

Passing Date Picker Value from Child to Parent with optional parameter

Naimish Makwana