I changed your program to just use a FlowLayout so every component could be displayed at its preferred size. The formatted text field is sized to hold 5 characters. It uses a width of 11 for each character (which seems a bit excessive) so you get lots of extra space.
In your code it looks like you manually tried to control the number of columns for the formatted text field:
JSpinner startTime = new JSpinner(timeModel);
JComponent editor = (JSpinner.DefaultEditor) startTime.getEditor();
JFormattedTextField ftf = ((JSpinner.DefaultEditor) editor).getTextField();
ftf.setColumns(5);
startTime.setEditor(new JSpinner.DateEditor(startTime, "HH:mm"));
The problem is you accessed the formatted text field before you changed the editor. Instead you need to set the editor before you access the formatted text field.
JSpinner startTime = new JSpinner(timeModel);
startTime.setEditor(new JSpinner.DateEditor(startTime, "HH:mm"));
JComponent editor = (JSpinner.DefaultEditor) startTime.getEditor();
JFormattedTextField ftf = ((JSpinner.DefaultEditor) editor).getTextField();
ftf.setColumns(3);
I also changed the columns to 3 to decrease the amount of extra white space. Now the preferred size of the spinner is more reasonable. Test it with a FlowLayout to see what I mean.