Cannot edit input field border colour in Datepicker

[jeremiahtam]

The Datepicker component does not have a theme access to modify the input field. There is no props or theme access to the input field itself. So it becomes impossible to change the cyan border color when in focus.

[akmalnatha]

Have you solved this issue? I'm currently facing the same problem.

[headi]

According to the respective component, that can be found here, you should be able to customize it with something like this:

<Datepicker theme={{
      root: {
        input: {
          field: {
            input: {
              colors: {
                gray: "border-gray-300 bg-gray-50 text-gray-900 focus:border-red-500 focus:ring-red-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-red-500 dark:focus:ring-red-500",
              },
            },
          }
        }
      }
    }}/>

(notice: I swapped cyan-500 for red-500
So Datepicker component will put what is inside root.input to the TextInput component theme which in turn is looking for field.input.colos[color] with the default color being gray.
If you want to know what the theme looks like, go here

[jeremiahtam]

<Datepicker theme={{
root: {
input: {
field: {
input: {
colors: {
gray: "border-gray-300 bg-gray-50 text-gray-900 focus:border-red-500 focus:ring-red-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-red-500 dark:focus:ring-red-500",
},
},
}
}
}
}}/>

This seem to work fine. Thanks.
I don't know why its not part of the documentation.