Datime-local styling

[delaneyj]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Per this article you can style the native button so it works on light or dark mode.

Describe the solution you'd like
Ability to switch out icon on datetime-local inputs similar to current Input API.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

 <Center position="relative" width={26} height={40}>
      <Icon icon="mdi:calendar" cursor="pointer" fontSize="$xs" />
      <Input
        type="datetime-local"
        position="absolute"
        left={0}
        top={0}
        width="$full"
        height="$full"
        opacity={0}
        cursor="pointer"
        boxSize="border-box"
        onInput={(e) => setDateStr(e.currentTarget.value)}
        value={dateStr()}
        css={{
          '::-webkit-calendar-picker-indicator': {
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
            margin: 0,
            padding: 0,
            cursor: 'pointer',
          },
        }}
      />
    </Center>
  )

Is the closest I've been about to come but miss clicks regularly. Not sure how to improve.

The other option I'm currently using is to set a bg color to $neutral8 but that doesn't feel great with the rest of the ui

[fabien-ml]

Hi, following the article I was able to do something like this https://codesandbox.io/s/hope-ui-datime-local-styling-xf0e3k?file=/src/App.tsx with hope-ui v0.x.

The input and icon has same size, i didn't notice miss click (tested on chrome, firefox and safari for macos)

[delaneyj]

@fabien-ml this helped me greatly! still would like to see a builtin support for this though.