How To Create An HTML Input Date & Time In React

html datetime in react

The thing about HTML 5 is that it does have some features that work from different browsers and the other doesn't, the obvious element that is really useful is the HTML input type datetime-local. It works perfectly on Chrome, but unfortunately doesn’t work on Firefox and Safari, if this happened only on an internet explorer or something older, i wouldn’t bother, but Firefox or safari is a major browser with a huge amount of users, so it is something that we need to support in other for our app to be function.

So here’s what I came up with using a combination of HTML type date and html type time to create a single react component as a replacement of datetime-local.

Here's the full example code on Code Sandbox so you can play with: FULL CODES & DEMO.

The idea is just to create a combination of input date and input type which is supported by All major browsers, so there’s nothing fancy here.

There’s already a react-datetime library but it doesn’t work as I expected like it used to work using jQuery. Yeah i love jQuery so much, it doesn’t require me to spin my head when using datepicker the way i use datepicker in react now. ALso because of this struggle, i don’t want to use this react-datepicker library, it only gonna make my life harder.

The only drawback is that the inputs are separated in two, you need to click the box twice, before selecting the date and the time, which if you use datetime-local you can just click the box once, and then select the date and time.

Comments

Popular posts from this blog

ASUS Battery Health Charging Software To Make Your Battery Life Longer

How To Uninstall Angular CLI, The Angular Framework

Flutter Button With Left Align Text and Icon

How To Create Flutter Card With Example Code

Flutter AppBar, With Icon, Title and Actions Link