Time Selector for Java Swing

Time Selector is an easy to use Java Swing widget for selecting any time in a 24-hour period to the nearest minute. 

Features

Animated demo of
          TimeSelection widget



Interactive Demo

If you have the Java plug-in enabled in your browser, you can interact directly with the Time Selector in the applet below.


Try this: 
  • Click the drop down button.
    The time selection table is displayed with four rows.
  • Click "5" in the second row (afternoon hours).
    The "5" is selected.
  • Click ":20" in the third row.
    The ":20" is selected, and the minute increment resets to "+0".
  • Click "+7" in the bottom row (minute increments).
    The display closes and the selected time of "05:27 PM" appears in the text field.

  • Usage Instructions

    The Time Selector widget looks like a traditional JComboBox initialized with the current time.

    A screenshot of time
          selector

    Clicking on the dropdown arrow displays the selection table.

    Time DisplayThe button icon changes to an up-arrow indicating that clicking it will collapse the time display.

    Morning hours are shown in the first row, 

    afternoon hours in the second row,

    ten-minute intervals on the third row,

    and minute increments on the last row.


    Selecting a specific time requires just three mouse clicks to select the hour, ten-minute interval, and minute increment you desire.
    The selection grid automatically closes upon selecting a minute increment and the resulting time is displayed in the text field.

    Changing only the hour is as easy as double-clicking it, or if you prefer, single-click the hour then click the collapse button.

    If your desired time is an exact ten minute interval, click the desired interval, then collapse the selection table. Or even quicker, double-click the desired interval to select it and close the table.
    Reopening the display retains the selected time.

    Limitations
    Currently the cells in the time display can not be navigated with the keyboard.  The mouse is required to click the cells in the display.  However, with a Swing application the dropdown button can be selected with the keyboard (space bar or Enter key), and the time display can be collapsed with the Escape key.

    Video Demo

    View the Time Selector in action in this 1-minute video.




    Example Code

    Add the time selection field to your Swing application with two lines of code:
    TimeSelectionField starttime = new TimeSelectionField();
    frame.add(starttime);

    Access the selected time via one of two accessor methods.  The getSelectedTime method returns a Java Date object. The getText method returns a formatted String.

    Date selectedTime = starttime.getSelectedTime();
    or
    String timeString = starttime.getText();
    
    You can also add a listener (in the same manner as JComboBox) so you can be notified when a time is selected.  View the javadoc.

    The following complete working program is available in the examples folder in the source code repository.

    import java.awt.Dimension;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import javax.swing.JFrame;
    import javax.swing.JOptionPane;
    import timeselector.TimeSelectionField;

    /**
    * Simple demonstration of how to add a listener to a TimeSelectionField in a Swing application.
    *
    * @author jdalbey
    */
    public class TimeSelectorListener
    {
    public static void main(String[] args)
    {
    final JFrame frame = new JFrame("Time Selector Listener Demo");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setPreferredSize(new Dimension(600, 200));
    final TimeSelectionField starttime = new TimeSelectionField();
    starttime.addActionListener(
    new ActionListener()
    {
    @Override
    public void actionPerformed(ActionEvent event)
    {
    JOptionPane.showMessageDialog(frame, "Selected time is: "
    + starttime.getText(), "Info", JOptionPane.INFORMATION_MESSAGE);
    }
    });
    frame.add(starttime);
    frame.pack();
    frame.setVisible(true);
    }
    }

    Design Goals

    Time Selector arose out of frustration with the time selection process in popular programs such as Microsoft Outlook and Google Calendar.


    Poor time selection in Microsoft Outlook.

    outlook example


    The dropdown menu only provides time choices of 30-minute intervals.  Any other time must be entered in the text box with the keyboard, which is tedious and error prone.

     
    The scrollbar is tedious.  It requires the user target it with their mouse, grab it, and then scroll up or down through a long list of options.







    The first design goal for Time Selector was to select time with accuracy to the minute without any manual text entry.
    The second design goal was to eliminate scrolling through long lists of time choices.
    These goals have been achieved through the clever use of table format for presenting hours and minutes. The number of mouse clicks has been reduced by having the display close automatically when a minute increment is clicked.
    The tradeoff for these choices is that the display is larger and requires slightly more screen real estate than a traditional dropdown box. 


    There's never been an easier way to select times. Add the time selector to your next application and experience the delight of fast, error-free time selection.