Selecting date and time with a datepicker for the date but with time immediately visible in Rails

Question

I'm using Rails 4, and also Twitter Bootstrap.

I'd like to select the date with a date picker, but have a separately visible component for selecting the hour and minutes.

I've had a look at smalot bootstrap-datetimepicker https://github.com/smalot/bootstrap-datetimepicker , but looking at the Demo Page, they don't demonstrate any ability to show date and time separately. You have to choose date, and then later on choose time, which doesn't feel very intuitive.

I've also looked at Eonasdan bootstrap-datetimepicker https://github.com/Eonasdan/bootstrap-datetimepicker , but the time picking for it, even in inline mode, is not intuitive - will people know they can just click on the hour value to change it?

I'm thinking of just using a date picker for picking the date, and selecting the hour and minute myself, but it kind of feels wrong handing off part of a datetime to a gem/library and handling the rest of it myself.

I came across Separate date and time form fields in Rails , which is asking about this kind of problem, but it's a question from September 2010.

How do I select the date with a date picker, but have simple and immediately visible selection of time?

Answer 1

First, unless you find a plugin that does what you want off the rack, then yes, it's up to you to handle it, and yes, it feels kinda wrong - depending on how you do it.

Not sure what you had in mind, but the way it feels "the most wrong" is if your form has a single "date time" field under the hood, and you use javascript to botch together the date from the plugin and the time from your own setup, and store them in your datetime field. The nice thing about this is your rails app just gets a single datetime field and knows exactly what to do with it.

Here's how I'd approach it:

Keeping in mind that forms don't necessarily have to map 1-to-1 with your models, I'd split it in the controller layer, and conceptually think of "a form with two fields: date, and time", and then in your controller (or a form object, which is probably better for this situation) you'd stitch the date and time together, before saving them to your model. This approach means you can have separate validation on each field, which is probably also what you want (because I'd assume it's possible for users to input a valid date, but an invalid time or vica versa).

In terms of handling the date with a plugin and the time yourself, that's now fine - they're two completely separate fields from the perspective of your form, so there's nothing dirty about it. It just means you need the extra logic in your controller layer to split the datetime when you display the form, and merge the date and time back into one when you save the form.

Edit: if you haven't heard of form objects, check out https://github.com/apotonick/reform and http://railscasts.com/episodes/416-form-objects