[BUG] - DatePicker styling classes: input and inputWrapper

[rafagouveia]

NextUI Version

2.3.6

Describe the bug

I'm facing difficulties while trying to style the DatePicker component. I noticed that the input and inputWrapper classes are not properly passing props to the component, which is hindering proper styling. This occurs both when attempting to style directly on the component and through extendedVariants.

I've tried several approaches to style this component, but the only property I managed to use was "base". However, when attempting to style, it ends up affecting the entire container of the component, including the label and the input.

screenshot:

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use the next ui version 2.3.6 in your project.
2. Implement the DatePicker component.
3. Attempt to style the DatePicker component using the input and inputWrapper classes.
4. Notice that the input and inputWrapper classes are not properly passing props to the component, resulting in improper styling.
5. Try styling the component directly and also through extendedVariants.
6. Observe that despite trying various approaches, only the "base" property is successfully applied for styling.
7. Notice that styling with the "base" property affects the entire container of the component, including the label and the input.

Expected behavior

I expected that when applying styles to the DatePicker component using the input and inputWrapper classes, the component would properly receive the props and apply the styling accordingly. Specifically, I anticipated that styling would be applied to the input field and its wrapper without affecting other elements within the component, such as the label.

Gravando.2024-04-27.111039.mp4

Screenshots or Videos

with inputWrapper prop

with input prop

with base prop

Operating System Version

• Windows 11

Browser

Edge

[linear]

ENG-750 [BUG] - DatePicker styling classes: input and inputWrapper

[christo9090]

2nd this issue. Just ran into it. No way to access the input via the ClassNames prop.

[eichtici-sys]

The label styles is not working too, only received:
<"base" | "selectorButton" | "selectorIcon" | "popoverContent" | "calendar" | "calendarContent" | "timeInputLabel" | "timeInput">

[tusmenko]

Up on this. label, description, input, inputWrapper classes are not properly passed to the slots, so just ignored

[whitetown]

I solved it like this:

<div className='bg-background-date'>
<DateInput name='min_date' />
</div>

.bg-background-date [data-slot='base'] [data-slot='input-wrapper'] {
@apply bg-background;
}

/* bonus for select and autocomplete */

.bg-background-autocomplete [data-slot='main-wrapper'] [data-slot='input-wrapper'] {
@apply bg-background;
}

.bg-background-select [data-slot='base'] [data-slot='mainWrapper'] [data-slot='trigger'] {
@apply bg-background;
}

[dmvdven]

Any updates on this issue? I've done some research and discovered that although the data slots are commented in the NextUI npm package, they aren't actually implemented or usable.

Comment in "use-date-picker.d.ts"

/**
     * Classname or List of classes to change the classNames of the element.
     * if `className` is passed, it will be added to the base slot.
     *
     * @example
     * ```ts
     * <DatePicker classNames={{
     *    base:"base-classes",
     *    label: "label-classes",
     *    calendar:"calendar-classes",
     *    selectorButton:"selector-button-classes",
     *    selectorIcon:"selector-icon-classes",
     *    popoverContent:"popover-content-classes",
     *    calendarContent : "calendar-content-classes",
     *    inputWrapper: "input-wrapper-classes",
     *    input: "input-classes",
     *    segment: "segment-classes",
     *    helperWrapper: "helper-wrapper-classes",
     *    description: "description-classes",
     *    errorMessage: "error-message-classes",
     * }} />
     * ```
     */

Code in "date-picker.d.ts"

undefined, tailwind_variants_dist_config.TVConfig<unknown, {
    [key: string]: {
        [key: string]: tailwind_variants.ClassValue | {
            base?: tailwind_variants.ClassValue;
            selectorIcon?: tailwind_variants.ClassValue;
            popoverContent?: tailwind_variants.ClassValue;
            selectorButton?: tailwind_variants.ClassValue;
            calendar?: tailwind_variants.ClassValue;
            calendarContent?: tailwind_variants.ClassValue;
            timeInputLabel?: tailwind_variants.ClassValue;
            timeInput?: tailwind_variants.ClassValue;
        };
    };
}

Concluding: the data slots below do not work

• label
• inputWrapper
• input
• segment
• helperWrapper
• description
• errorMessage

[Seliv-n]

I've encountered the same problem. In my case I needed to set some properties to the input wrapper. If you're using tailwind you may avoid this with its selectors. Still it's a temporary solution, so I'm looking forward to get it fixed
<DatePicker className="[&>div]:property-for-inputWrapper" />

[mariacheline]

• 1

[huggler]

<DatePicker className="my-4 [&>[data-slot='label']]:flex"

[LucasBPPereira]

Não tenho certeza se vai ajudar, porém da forma que eu fiz resolveu alguns problemas. Utilizando o método que o pessoal inseriu acima className=".... [&>[...]]" eu consegui especificar corretamente onde eu gostaria de fazer a alteração (foquei nos estilos):

<DatePicker
  className={
     cn("max-w-md [&_div[data-slot='segment'][data-editable='true']]:text-default-600 
focus:[&_div[data-slot='segment'][data-editable='true']]:text-blue-700 
[&_div[data-slot='description']]:text-default-500")
  }
  classNames={{ description: "!text-default-500", }} // não funcionou
  color="primary"
  variant="bordered"
/>

obs: cn() -> tailwind-merge + clsx

Minha ideia era mudar a cor dos caracteres da data "dd/mm/aaaa -- HH/MM", porém, utilizando apenas o classNames={{}} eu não conseguia. Então pelo DevTools busquei os atributos que correspondiam a div e a classe tailwind do elemento que seria alterada e no final deu certo.

& -> elemento pai
_div -> elemento que quero alterar
[atributo='valor'] -> especifica o elemento
:tailwind-class -> classe tailwind para estilizar, qualquer coisa use ! antes

mais uma obs: [&>el] -> filho direto do componente pai, o que não foi o meu caso, era um descendente