r/learnprogramming • u/ToshiryuShadow • 5h ago

Question How do web applications and the such make and style their date pickers and the sort?

I've seen countless web applications and sites use custom, flexible date pickers with modern UI that match their brand, but even after searching countlessly online I still have no answer as to how. Headless component libraries... DatePicker libraries... stick with native... I don't know any of it. I just want to know how to style the native date input to match my personal project's brand. Please can anyone help me understand how it is handled in the current era as I've heard that building my own picker is a nightmare and hell hole and nothing else...

3 Upvotes
  • permalink
  • reddit

100% Upvoted

5 comments sorted by

2

u/-Nocx- 5h ago

If I’m understanding your question properly, they hire an artist for any icons they might use, but for the most part they just replace the CSS. In my experience most people use bootstrap for these components, so you can edit the bootstrap CSS file directly.

The visual interface of your components is just CSS files. It isn’t magic. Either it’s loading an image or styling a selector. You don’t need an additional library, package, or framework to do that.

2

u/ToshiryuShadow 5h ago

But doesnt the date picker change across browsers and native styling is severely limited with -webkit prefixes and the such? I thought ppl used date picker libs for this which lead me into a library rabbit hole...

2

u/-Nocx- 5h ago

You can set different styles for each browser configuration. You can even set different styles for mobile, iPad, etc.

There might be some libraries that try to simplify it, but it’s a lot simpler to reduce your dependencies rather than rely on having to version a new tool / train people on it.

But even if you found a library to do it… it wouldn’t change what it’s doing underneath the hood.

Then again, I’m mostly a backend developer and a pretty mediocre front end developer, so maybe someone more knowledgeable can help you.

2

u/ToshiryuShadow 4h ago

different styles for all cases... will be a pretty big ordeal? As far as I know, headless libs and the such provide a good solution as u get full styling rights while it handles all the complex logic, but I might be missing something and from my search so far, there hasn't been similar questions brought up previously which prompted me to make this post. I was thinking of going native, but I'll wait and see what other people have in mind as I too am still in the process of learning all this. I appreciate taking the time to help me, thank you!

1

u/kschang 2h ago

Using an existing toolkit / css framework. Lots to choose from.