VisualHint's blog

Two values in a single DateTimePicker

To set two different dates in an application, e.g. a starting time and an ending time, you need two labels and two editors (as far as times are concerned) as showcased in this Outlook screenshot:

DateTimePicker in outlook

SFPE can reduce the space used inside a single editor and the result would look something like this:

More values in a single DateTimePicker

Here is how it's done:

SFPE defines a new DateTimePicker class. But we won't use this one here. It is a convenient class that mimics the API of the Microsoft DateTimePicker so that you get all the benefits of SFPE in a class that won't require you to learn something new. As such, it allows and creates only one FieldPack and this is the FieldPack that holds the value. So we will rely on its base class, called FieldPackEditor. But still the job will be easy:

fieldPackEditor1.JumpToNextFieldOnEdition = true;

DateTimeFieldPack pack = new DateTimeFieldPack("'From 'HH:mm");
pack.SeparatorWidth = 6;
pack.Value = new DateTime(2007, 9, 12, 13, 30, 0);

pack = new DateTimeFieldPack("'to 'HH:mm");
pack.Value = new DateTime(2007, 9, 12, 15, 0, 0);

I first configure the editor so that the editing is minimal. "JumpToNextFieldOnEdition" moves the focus cue to the next editable field when the user is done with the current field. Then I create a first DateTimeFieldPack instance that will hold our first time. The pack is added to the editor and a nice margin is set. At last I create the second pack that will hold the second time value. This is all it takes to get what you see in the screenshot.