Passing Date Picker Value from Child to Parent with optional parameter

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}

{props.value ? props.value : props.default}

);

}

function SentenceBuild(props: {

form: FormHook;

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

);

return (

firstItem

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

default='[Administration dosage instructions]'

prefix='via'

readOnly={props.readOnly}

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

default='[route of administration]'

prefix='at'

readOnly={props.readOnly}

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

default='[time]'

{showStartsOn && (

prefix='starting on'

readOnly={props.readOnly}

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

default='[date]'

)}

);

}

EDSF.JS

export const EditDurationSelectorField: React.FC<{

form: FormHook;

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

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

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 (
        
            Selected Date: {selectedDate}
            
        
    );
};

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