Date picker styling

[100tomtomas100]

Hey i am tryig to style Date picker component with no luck.

In classNames i can not style inputWrapper (whatever i write there it does not get to input-wrapper, it seems that it is not connected) and if i choose variant="bordered" there is no way how to edit the background color as the background color is on inputWrapper.
I want to change the color of svg with fill and it gets passed to the element but if i understand it correctly it takes the current color from inputWrapper and the className with fill gets ignored.
in popup i managed to change background colors of the calendar and time but not where you have to choose the month
In no place i managed to change text color.

Any guidance on how to change any of this would be appreciated!

[wingkwong]

see #2895

currently it's not supported yet.

[100tomtomas100]

Thank you!
I guess the timezone can not be changed by a user as well?

[wingkwong]

are you talking about the style? or are you talking about the locale?

[100tomtomas100]

defaultValue={parseZonedDateTime(
  `${today(getLocalTimeZone())}[America/Los_Angeles]`
)}

I have this default but I can not change the timezone in the form. It is always the timezone of Los Angeles. Is it possible to set it so i can modify it in the form?

[wingkwong]

do you mean you wanna change the timezone inside the date picker from the UI, e.g. changing GTM-8 to GTM-5? If so, I think it's not possible.

[100tomtomas100]

Yes! Exactly I was looking for that. I want to implement a form for scheduling a call and people are from all around a world. Its a pitty its not changeable. Thank you for the help!

[greykiller102]

How do i change that today dates bg color?. Im using nextui calendar but only numbers showing when i change style text-black.

[zervidev]

I recently went through this, the way it is working for me is:

`import { useState } from "react";
import { DatePicker } from "@nextui-org/react";

const MyDatePickerComponent = () => {
const [isFocused, setIsFocused] = useState(false);

const stylesDatePicker = {
selectorButton: ["hover:text-primary"],
};

const stylesDateInput = {
label: ["!text-primary"],
inputWrapper: [
"border",
"!border-gray-400",
"hover:!border-blue-500",
isFocused && "!border-blue-500",
],
};

return (
<DatePicker
label="Fecha de ingreso"
variant="bordered"
classNames={stylesDatePicker}
dateInputClassNames={stylesDateInput}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
/>
);
};

export default MyDatePickerComponent;`

This is how the border of my component stays in place while the calendar opens and I choose the date.
If anyone has a better idea, it would be appreciated.

[brayanalexgiraldos]

como hiciste para cambiar el idioma a ese datapicker , ayudame por fa , lo requiero en español y que tenga formato dd/mm/yyyy , tal cual lo tienes en la foto

[RocioGL33]

THANK YOU SO MUCH! This work for me