Fork me on GitHub
M J14:12:51

Hello, I am using '@mui/x-date-pickers-pro/DateRangePicker' This is the component I want to use from MUI

import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

export default function BasicDateRangePicker() {
  const [value, setValue] = React.useState([null, null]);

  return (
      localeText={{ start: 'Check-in', end: 'Check-out' }}
        onChange={(newValue) => {
        renderInput={(startProps, endProps) => (
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
HOW do I convert it in clojure so that I sent the value as an array of 2 nils. Imports are all correct, since when I use date-picker without range it works. Thisis what I have now
(let [date-range (r/atom ["" ""])]
                                 (fn []
                                 [localization-provider {:date-adapter   cljs-time-adapter
                                                       :adapter-locale {:start "Check-in" :end "Check-out"}}
                                 [date-range-picker {:value @date-range
                                                     :onChange (fn [value1 value2]
                                                                 (println value1))
                                                     :render-input (react-component [startProps endProps]
                                                                                    [text-field startProps]
                                                                                    [text-field endProps])}]]]))


Seems like you're using Reagent so a better suited channel would be #C0620C0C8. You probably have to convert the CLJS vector into a JS array with clj->js.

M J14:12:19

Ok, I will try there. thanks


There's no need to cross-post when I have already given an answer here.

M J14:12:37

IT didnt work


Are there any errors in the JS console?

M J14:12:02

"Cannot read properties of undefined (reading '0')"


Well, there you go. :) Figure out what that undefined is (or rather, was supposed to be), given the stack trace and the debugging capabilities of the browser.

Sam Ritchie17:12:11

You need :> before a vanilla react component


Given that they say that it works without a value, I assume adapt-react-component was used.

👍 1