6. Using the JDatePicker Component

The JDatePicker is a component that can edit a date and also select it using a drop down calendar. It inherits all the date editing features from JDateEditComponent. Here are the features this component provides:

This section uses the application shown below to explore all these capabilities. Not all editing features are presented here as they are presented in the date editing section.

Figure 2.6. A demo application for the JDatePicker component

A demo application for the JDatePicker component

Try this:

  1. Run DatePickerDemo using Java Web Start or consult the source code for yourself.

  2. Click the date picker component to display the drop down calendar. Then click on a date from the calendar. The date will be displayed by the component.

  3. Press the DOWN arrow key on the date picker component to display the drop down calendar. Now, use the arrows keys (LEFT, RIGHT, UP, DOWN) to select a date and then press ENTER. The last selected date will be displayed by the component.

  4. Click the Editable check box to make the date picker editable. Then click on the date picker, type 11112004 and press ENTER; November 11, 2004 will be selected.

  5. Click on the Foreground button and select a color. The dates from the drop down calendar will be painted using this color.

  6. Click on the Date Format combo box and select Short. The date selected by the date picker will be displayed using this format.

  7. In the bottom table, click on one of the cells from the Start column. Use the date picker cell editor to select a different date.

6.1. Working with an Editable Date Picker

There are applications where users prefer to use the keyboard rather than the mouse. JDatePicker can act like a regular date edit component but only if activated using the setEditable method. It is not active by default. More about the date editing features is presented in the JDateEditComponent tutorial section.

The following line of code turns the date picker into an editable one:

datePicker.setEditable(true);

6.2. Changing the Background Color

Setting the background color for JDatePicker is easy to do. Just use the setBackground method and specify your color.

If the date picker is editable, the background color for its date field is not changed. You have to register the JDatePicker.backgroundOnEditable client property in order for the background color to be set on the date field too. The following line of code shows how the background color can be set:

datePicker.putClientProperty("JDatePicker.backgroundOnEditable", Boolean.TRUE);
datePicker.setBackground(Color.red);

This might seem very complicated but we are trying to preserve the JComboBox behavior. JDatePicker uses a modified JComboBox so when you specify a background color, it is in fact set on the supporting JComboBox.

If the combo box is editable, the background color is not set on the editing component (Swing implementation bug?). JDatePicker uses the JDatePicker.backgroundOnEditable client property to correct this behavior.

6.3. Configuring the Drop Down Calendar

The drop down calendar is an important part of a date picker because it allows to select a date easily. As a programmer, you might want to configure it to better suit your needs. For instance, show the week numbers that are hidden by default. For such operations, the date picker does not provide a reference to the calendar but a set of methods through which you can change it.

We prefer this design because the calendar can be made implementation dependant. In the current implementation, we use JMonthView to represent the calendar. The methods that configure the calendar are of the form setCalendar<property> (setCalendarBackground, setCalendarForeground, etc). Here is a list with all the calendar properties that can be set through the JDatePicker API:

  • calendarDisplayToday indicates whether the today button is visible or not

  • calendarWeekNumbersVisible indicates whether the week numbers are visible or not

  • calendarBackground refers to the background color of the calendar

  • calendarForeground refers to the foreground color of the calendar

  • calendarTitleBackground refers to the background color of the calendar title

  • calendarTitleForeground refers to the foreground color of the calendar title

  • calendarTrailingForeground refers to the foreground color of the trailing days

  • calendarDateRenderer refers to the date renderer used to display the calendar days

The following lines of code customize the calendar of a date picker:

datePicker.setForeground(Color.black);
datePicker.setCalendarTitleBackground(new Color(50, 100, 255));
datePicker.setCalendarTitleForeground(Color.white);
datePicker.setCalendarTrailingForeground(Color.gray);
datePicker.setCalendarBackground(new Color(255, 255, 100));
datePicker.setCalendarDateRenderer(new DefaultDateRenderer());
datePicker.setFont(new Font("Arial", Font.PLAIN, 15));

6.4. Localizing the Component

Like any other JDateComponent, the JDatePicker can be localized for various languages and regions. The localization acts upon the calendar used by the date picker and on how it displays the selected date.

By default, the system's locale is used but it can be configured to use any locale. To change the locale, use the setLocale method.

The following line of code changes the locale to Spanish:

datePicker.setLocale(new Locale("es", "ES"));
datePicker.setDateFormat(DateFormat.FULL);

6.5. Using a Custom Look and Feel

JDatePicker can be used with any look and feel. The default ones are : Metal, Motif, Windows and Aqua but others can be supported as this section explains.

The JDatePicker implementation uses a modified JComboBox to represent the drop-down calendar. Actually, what is modified is its implementation, ComboBoxUI, for which the popup is changed. Let us see how this is done for a custom look and feel like Kunststoff.

First of all, create a class that extends the KunststoffComboBoxUI and implements ComboBoxUIExt (this interface is used internally by JDatePicker to change the popup when the look and feel changes).

import com.incors.plaf.kunststoff.KunststoffComboBoxUI;
import com.standbysoft.component.util.swing.ComboBoxUIExt;

public class KunststoffComboBoxUIExt extends KunststoffComboBoxUI implements ComboBoxUIExt {
  public void setComboPopup(ComboPopup popup) {
  }
}

Then, the popup set by the setComboPopup method must be returned by the createPopup method (overridden from BasicComboBoxUI).

import com.incors.plaf.kunststoff.KunststoffComboBoxUI;
import com.standbysoft.component.util.swing.ComboBoxUIExt;

public class KunststoffComboBoxUIExt extends KunststoffComboBoxUI implements ComboBoxUIExt {
  private ComboPopup popup;

  protected ComboPopup createPopup() {
    if (popup == null) {
      return super.createPopup();
    } else {
      return popup;
    }
  }

  public void setComboPopup(ComboPopup popup) {
    this.popup = popup;
  }
}

Once you have created an extended ComboBoxUI for a certain look and feel, just register it with the date picker.

import com.standbysoft.component.date.swing.plaf.basic.BasicDatePickerUI;
...
BasicDatePickerUI.registerDateComboBoxUI("com.incors.plaf.kunststoff.KunststoffLookAndFeel", KunststoffComboBoxUIExt.class);

6.6. Installing a Date Cell Editor for JTable

Setting a date picker as a table cell editor is simple, as the following example shows. The code sets up a date picker as the editor for Date objects.

JTable table = new JTable();
...
JDatePicker datePicker = new JDatePicker();
datePicker.setCustomDateFormat("MMMM/dd yyyy");
table.setDefaultEditor(Date.class, JDatePicker.createTableCellEditor(datePicker));

You can use createTableCellEditor() or createTableCellEditor(JDatePicker) to create table cell editor. The second method can be used to create a table cell editor with a configured date picker.