What's the best approach to get Date/Time input from the user?

Question

This is a wheel that\'s been re-invented again and again over the years.

The Problem: The user needs to input a Date/Time

Basic considerations

Answer 1

I think the date range entry on Google Calendar is quite good. You can enter by keyboard or by mouse. The only quibble would be in entering dates for a different year.

You can do it easily enough via the keyboard, but they should have a second set of little arrows on the calendar to jump a year at a time back or forth using the mouse.

EDIT: In response to the question, "What if you want to schedule an event that goes from 11PM on Tuesday till 1AM on Wednesday (say a daily build, for instance)? How do you wrap the time over midnight?"

If the "to" time pushes it over midnight, then roll the "to" date to the next day. That would just be part of the business logic of the component. You'll notice in the second image above, the drop-down indicates both the end time and the duration of the event, which should be a hint.

If you try and put an end date earlier than the start date, you can highlight the background colour of the fields and/or show an error message on save.

Play around on Google Calendar and see how it behaves.