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.

Popular posts from this blog

STOP following those self-help content, START doing your immediate tasks and responsibilities

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

Spring Kafka - How to use ReplyingKafkaTemplate send and reply synchronously

How To Create Spring Boot Project Using Netbeans

ASUS Battery Health Charging Software To Make Your Battery Life Longer