Styling Possibilities for Datepicker Field

[patrick-tresp]

Question

Hi,

we have recently implemented the datetimepicker module and we like it a lot. One thing we are now facing is the challenge to somehow style the component that shows the date.

We would like to style it as all our input fields ( border, backgroundColor, fontColor and even enrich it with a calendar icon )

Is there any way to use a custom component ( like a textLink, an styled inputfield or anything ) to show the Calendar or can it only be triggered by using the

<DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />

A very simple example would help i guess.

[ravirajn22]

Use display: 'inline' for iOS this will show the picker directly on screen, now design your input fields the way you want, then onPress show this DateTimePicker in a modal or whatever way you want.

[anthlasserre]

Yes @ravirajn22. While waiting another props enhance it stills actually the best way to customize your DatePicker field.

[patrick-tresp]

I did try out a lot, but tbh. i could not get to a useful approach. There is too many conditions to meet to have it working on all devices with all operating systems - OR i am still misunderstanding it.

If you have any best practice to use a custom "Button" to show the DateTimePicker in a Modal after click - i am happy. if not - thank you for your help.

[david-bishop-levelstudio]

You could use "compact" or "default" display and then create your own "tappable" component to open the calendar widget, which is absolutely positioned and has pointerEvents="none" over the default button.

[vonovak]

Hello and thanks for asking, to the best of my knowledge, changing the styles of the provided compact picker is not possible, the native component does not offer much styling possibilities. You'll have to resort to workarounds. Thank you 🙂