How to transform a Luxon DateTme object to a date

Question

I'm building a DatePicker React with the Material-UI picker library and using Luxon as an adapter. When I change the calendar date I'm getting an object with DateTime as follow:

The code I'm using of the DatePicker:

<MuiPickersUtilsProvider utils={LuxonUtils}>
              <DatePicker
                className={classes.input}
                disableToolbar
                variant="inline"
                label="Date"
                format="cccc, LLLL dd"
                helperText=""
                value={date}
                margin="normal"
                onChange={newDate => {
                  handleDateOnChange({ newDate });
                  setDate(newDate);
                }}
                inputVariant="filled"
                fullWidth
                minDate={new Date()}
              />
            </MuiPickersUtilsProvider>

The `on change is giving me back the OBJ I shared in the screenshot and what I would like to get is the date.

I'm doing a console.log(newDate) inside the handleDateOnChange and there is no more inside that why I'm not sharing that. The result of console.log() is the one you see above.

Answer 1

You can simply use toJSDate()

Returns a Javascript Date equivalent to this DateTime.

const DateTime = luxon.DateTime;
const dt = DateTime.local();
console.log(dt);
console.log(dt.toJSDate());

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>