Posted by A problem that I have run into a couple of times is the concept of DateTime inputs. Granted it’s pretty easy on the back end to take a single DateTime data item, and wire it to a database of similar type, but on the front end, it’s not as easy. This post will cover a number of ways to handle date times as inputs in a user friendly way.
The first approach is to make a single field hold the information for both the date and the time. This makes sense because on the back end, that’s how the data usually is set up. You’re likely to just have a datetime field in a database, rather than both a date field and a time field. For the user, it can be a little more cumbersome if you look at it from the perspective of “the date and the time are two different things”. That cumbersome feeling can be mitigated by use of a datetimepicker. These are similar to datepickers, but also account for an entry to time as well.
Here are a list of examples of mostly javascript solutions (in no particular order):
- http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_datetime-local
- https://github.com/xdan/datetimepicker
- http://eonasdan.github.io/bootstrap-datetimepicker/
- http://www.malot.fr/bootstrap-datetimepicker/
- https://indrimuska.github.io/angular-moment-picker/
- http://sidaudhi.github.io/angular-circular-timepicker/
- http://logbon72.github.io/angular-material-datetimepicker/
- https://rawgit.com/Gillardo/bootstrap-ui-datetime-picker/master/example/index.html
- https://www.npmjs.com/package/angular-ui-bootstrap-datetimepicker
Alternatively, you can separate your inputs into two fields and make them work in tandem with each other. Below is a plunker example of how you can have those two separate fields and then tie them together to make a single javascript date object, all using vanilla javascript and html. DateTimePickers aren’t always straightforward, but there are many plugins that you can use to your advantage if you want more than the default html input type. Ultimately, I’d argue that it depends on the context of the application for which one is best, and that there isn’t necessarily a single best option.