componen input datetime_local with react

[carza06]

I need help getting my taipy gui markdown element to capture the date from a datetime_local component in react

this is my component inb react:

import React, { useState, useContext } from 'react';
// import {DateTimePickerComponent} from '@syncfusion/ej2-react-calendars/src/index';
// import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
import './styled.css';
import {
  useDynamicProperty,
  createSendUpdateAction,
  createSendActionNameAction,
  useDispatch,
  Context,
} from "taipy-gui";

interface DateProps {
  value?: JSON;
  defaultValue: string;
}

const DateTimeP = (props: DateProps) => {
  // const [dateTime, setDateTime] = useState('');
  const dispatch = useDispatch()
  const taipyContext = useContext(Context)
  const context_param = "btn_from_date_destinations" // "context"
    // const value = useDynamicProperty(props.value, props.defaultValue, JSON.parse("{}"));

    // const dateTimeProps = JSON.parse(value)
    // console.log('dateTimeProps => ', dateTimeProps)

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      // setDateTime(e.target.value);
      console.log("Context => ", Context)
      console.log("taipyContext => ", taipyContext)
      const send_update = createSendUpdateAction(
        "btn_from_date_destinations",
        {},
        context_param,
        undefined,
        false
      )
      const send_update_2 = createSendActionNameAction(
        undefined,
        context_param,
        "test_change",
      )
      // dispatch(send_update)
      dispatch(send_update_2)
    };



    return (
      <div className='MuiFormControl-root MuiFormControl-marginDense MuiTextField-root taipy-input w-100 mw-100 parent-w-100 css-whrf72'>
        <label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-18nyrsw"
        data-shrink="true" id=":r2:-label">To</label>
        <div className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-hiddenLabel css-4jmk3h">
          <input
            type="datetime-local"
            className="custom-datetime-input css-1weoyhk css-1weoyhk"
            onChange={handleChange}
          />
          <fieldset aria-hidden="true" className="MuiOutlinedInput-notchedOutline css-igs3ac">
            <legend className="css-14lo706">
              <span>To</span>
            </legend>
          </fieldset>
        </div>
      </div>
    );
};

export default DateTimeP;

and element with markdown

<|{btn_from_date_destinations}|example.date_input|>

[FlorianJacta]

@FabienLelaquais @FredLL-Avaiga Would you be able to help?

[FabienLelaquais]

Hey @carza06
Thank you for giving this new control a try in Taipy.

Can you please provide all your extension library implementation, including the Python side of it?
I suspect an issue the the property declaration - especially since I don't understand how come the 'value' and 'defaultValue' members of the component properties have different types (and JSON will not be provided by Taipy).
Thanks!

[carza06]

i am use the simple component with react, is an input with type datetime_local. i can view the component in my page but the value i dont know how use in taipy.

this is my configuration in the library with example.
"date_input": Element( "value", {"value": ElementProperty(PropertyType.dynamic_dict)}, # The name of the React component (ColoredLabel) that implements this custom # element, exported as ExampleLabel in front-end/src/index.ts react_component="DateTimeP", ),

[FredLL-Avaiga]

you can look at the implementation of other similar components

[carza06]

Yes, but I can't find the exact documentation for this case.

[carza06]

is possible? @FabienLelaquais

[FabienLelaquais]

@carza06
I don't quite understand what you are trying to achieve here.
I see no React in your code, but the use the the "datetime-local" type in your input field.
My first major question would be: what are you trying to achieve?

One obvious thing I find suspicious is a date input field whose value would be defined... as a dict. (dynamic_dict).
I suspect looking at Taipy GUI's implementation for the date control will help in sharing a datetime object from the Python side.

This article in https://stackoverflow.com/questions/31109961/value-of-datetime-local-with-react may help should the behavior of the HTML element be the problem.

Let us know, thanks.

[carza06]

@FabienLelaquais
My final goal is a datetime input that I can call an action with the enter key and at the same time put the minutes so that they can choose only 15 at a time. ejm(0,15,30,45).

[FabienLelaquais]

Oh ok, got it. thanks @carza06
I must confess that at this very moment, we are trying to come up with a way, from the Python side of things, to describe constraints such as this one (and avoid a roundtrip to the server when the user enters the selection phase).
If it is an exercise for you then fine, carry on.
I would start with the 'date' component, duplicate it, and tweak it a little so I implement that feature.
Far faster than starting from scratch as you're aiming.

However, note that if it's a feature you know you'd like in the future, may be waiting for it will be better...