- Download and Install SwingLabs
- Date Picker and Month View
- Hyperlinks
- Tip of the Day
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Date Picker and Month View
Some applications include calendars as part of their GUIs. These calendars reveal dates in an intuitive manner. They flag scheduled appointments, holidays, and any other kinds of dates important to the user. Calendars also let the user select a range of dates for appointments, and present an appointment book that lets the user enter new appointments or view existing appointments for these dates.
SwingX’s date picker and month view components support calendars:
- The date picker, represented by the org.jdesktop.swingx.JXDatePicker class, consists of an editable text field, a button, a month view, and a link panel. The user enters a date in the text field, or clicks the button and selects a date from the month view (which then appears in the text field). The default link panel presents a date as a hyperlink. It can be replaced—your own appointment book panel?
- The month view, represented by the org.jdesktop.swingx.calendar.JXMonthView class, presents one or more months in the traditional calendar format. It allows the user to select a range of dates. By default, the month view presents the current month and year, and recognizes java.util.Calendar.SUNDAY as the first day of the week.
To create date pickers, call the public JXDatePicker() and public JXDatePicker(long millis) constructors. The first constructor uses the current date and the second constructor uses the specified millis date as the initially selected date. Both constructors obtain the formats for entering dates in the editable text field via org.jdesktop.swingx.calendar.JXDatePickerFormatterFactory:
// Create date picker with current date initially selected. JXDatePicker datePicker = new JXDatePicker (); // Create date picker with specified date initially selected. Calendar cal = Calendar.getInstance (); cal.set (2006, 7, 1); // August 1, 2006 long millis = cal.getTimeInMillis (); JXDatePicker datePicker = new JXDatePicker (millis);
After creating a date picker, you can call its public void addActionListener(ActionListener l) method to register an action listener that’s notified whenever the user enters or selects a date. You might set an appointment book link panel to the date’s appointments, for example. You can also call the public void removeActionListener(ActionListener l) method to remove the action listener.
You might find occasion to share the same listener among multiple date pickers. To identify these date pickers uniquely, call public void setActionCommand(String cmd) with some appropriate identification string for each date picker. Call the public String getActionCommand() method to return this identification string.
I’ve created a DPMVDemo1 application that demonstrates the date picker component. In addition to calling JXDatePicker() to create the date picker, this application registers an action listener that calls JXDatePicker’s public Date getDate() method to obtain the selected date, which outputs to the console. Figure 1 shows the date picker as part of DPMVDemo1’s GUI.
)
Figure 1 The link panel appears below the date picker’s month view component. (Instead of an arrow pointer, a hand pointer—which I was unable to capture—appears.)
The GUI in Figure 1 shows the date picker’s editable text field and button, which presents the month view of the editable text field’s date and the link panel when the button is clicked. The month view identifies the initially selected date with a rectangle and a colored background. Select any date by clicking an arrow and/or a day, but only one date can be selected. The link panel presents the initially selected date.
The GUI also includes a combo box that lists supported formats for entering a date in the editable text field. For example, EEE MM/dd/yyyy recognizes a weekday (long or short, such as Tuesday or Tue), a month (long, short, or two digits, such as July, Jul, or 07), a forward slash, a two-digit day, a forward slash, and a four-digit year. The most recently selected date replaces any invalid date entered in the editable text field.
Listing 1 presents the source code for DPMVDemo1.
Listing 1 DPMVDemo1.java.
// DPMVDemo1.java
import java.awt.*;
import java.awt.event.*;
import java.text.*;
import javax.swing.*;
import org.jdesktop.swingx.JXDatePicker;
public class DPMVDemo1
{
public static void main (String [] args)
{
// Establish a look and feel for this application’s GUI.
setLookAndFeel ();
// Create a frame window whose GUI presents the date picker and provides
// a list of supported date formats.
final JFrame frame = new JFrame ("Date Picker Month View Demo #1");
frame.getContentPane ().setLayout (new GridLayout (2, 1));
// Tell application to automatically exit when the user selects the Close
// menu item from the frame window’s system menu.
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
// Create GUI: date picker at the top and a combo box of date formats --
// that the date picker supports for entering dates via the editor -- at
// the bottom.
JPanel panel = new JPanel ();
panel.add (new JLabel ("Enter date (if desired) and click button"));
final JXDatePicker datePicker;
datePicker = new JXDatePicker ();
ActionListener al = new ActionListener ()
{
public void actionPerformed (ActionEvent e)
{
System.out.println (datePicker.getDate ());
}
};
datePicker.addActionListener (al);
panel.add (datePicker);
frame.getContentPane ().add (panel);
panel = new JPanel ();
panel.setLayout (new FlowLayout (FlowLayout.LEFT));
panel.add (new JLabel ("Supported date formats"));
DateFormat [] dfs = datePicker.getFormats ();
String [] fmts = new String [dfs.length];
for (int i = 0; i < dfs.length; i++)
fmts [i] = (dfs [i] instanceof SimpleDateFormat)
? ((SimpleDateFormat) dfs [i]).toPattern ()
: dfs [i].toString ();
panel.add (new JComboBox (fmts));
frame.getContentPane ().add (panel);
// Size frame window to fit the preferred size and layouts of its
// components.
frame.pack ();
// Display GUI and start the AWT’s event-dispatching thread.
frame.setVisible (true);
}
static void setLookAndFeel ()
{
try
{
// Return the name of the LookAndFeel class that implements the
// native OS look and feel. If there is no such look and feel, return
// the name of the default cross platform LookAndFeel class.
String slafcn = UIManager.getSystemLookAndFeelClassName ();
// Set the current look and feel to the look and feel identified by
// the LookAndFeel class name.
UIManager.setLookAndFeel (slafcn);
}
catch(Exception e)
{
}
}
}
After playing with DPMVDemo1, you might want to customize this application. I can think of two items that merit customization:
- Formats list. JXDatePicker provides a way to change the list of supported formats for entering dates in the editable text field. Call public void setFormats(String[] formats) or public void setFormats(DateFormat[] formats) to change this list. You can also return the current list by calling public DateFormat[] getFormats().
- Link panel. The default link panel presents the initially selected date as a hyperlink. Nothing happens if you click this hyperlink. If you want to accomplish something useful, try replacing the current link panel with a new panel via the public void setLinkPanel(JPanel linkPanel) method. You can also call public JPanel getLinkPanel() to return the current link panel.
You can interact with the month view component from within the date picker. Accomplish this task by calling JXDatePicker’s public void setMonthView(JXMonthView monthView) and public JXMonthView getMonthView() methods. Or you can ignore JXDatePicker and work directly with JXMonthView, and avoid the date picker’s extra components.
If you decide to work directly with JXMonthView, call public JXMonthView() to create a month view based on the month and year of the current date. Alternatively, call public JXMonthView(long millis) to create a month view based on the month and year of the millis argument’s date.
As with date picker, you can call JXMonthView’s public void addActionListener(ActionListener l) method to register an action listener that is notified whenever the user makes a selection. You can also call the public void removeActionListener(ActionListener l) method to remove the action listener.
You might find occasion to share the same listener among multiple month views. To identify these month views uniquely, call public void setActionCommand(String cmd) with some appropriate identification string for each month view. Call the public String getActionCommand() method to return this identification string.
JXMonthView provides methods to customize this component. For example, JXMonthView’s public void setFlaggedDates(long[] flaggedDates) method can be called to flag (highlight) various dates, perhaps to indicate holidays or appointments. Unfortunately, a bug prevents this method from working in the SwingX 0.8.0 release.
In contrast, JXMonthView’s public void setSelectionMode(int mode) method has no bugs. Call this method with the appropriate constant to change a month view’s selection mode from single selection (the default) to no selection (component is read-only), multiple selection (select an arbitrary range of consecutive dates by dragging the mouse), and week selection (like multiple selection, but in terms of weeks).
I’ve created a DPMVDemo2 application that demonstrates the month view component. In addition to calling JXMonthView() to create the month view, this application calls public void setPreferredCols(int cols) and public void setPreferredRows(int rows) to display a grid of months, and setSelectionMode() to set the selection mode to multiple selection.
DPMVDemo2 also registers an action listener that calls JXMonthView’s public DateSpan getSelectedDateSpan() method to return a multiple selection’s range of consecutive selected dates in an org.jdesktop.swingx.calendar.DateSpan object, calls DateSpan methods to obtain the start and end dates in this selection, and outputs these dates. Figure 2 shows the GUI.
)
Figure 2 The month view component can display a grid of months, and supports various selection modes.
Figure 2 shows a four-month grid and a multiple selection. It also shows that when you call the JXMonthView() constructor, the day portion of the current date is highlighted with a rectangle. This rectangle is displayed even when you select some other date range. In contrast, it doesn’t appear when you call the JXMonthView(long millis) constructor.
Listing 2 presents the source code for DPMVDemo2.
Listing 2 DPMVDemo2.java.
// DPMVDemo2.java
import java.awt.event.*;
import javax.swing.*;
import org.jdesktop.swingx.calendar.*;
public class DPMVDemo2
{
public static void main (String [] args)
{
// Establish a look and feel for this application’s GUI.
setLookAndFeel ();
// Create a frame window whose GUI presents the month view component.
final JFrame frame = new JFrame ("Date Picker Month View Demo #2");
// Tell application to automatically exit when the user selects the Close
// menu item from the frame window’s system menu.
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
// Install a month view component that presents four months (where the
// first month contains the current date), in a 2-by-2 grid, allows
// multiple consecutive days to be selected, and invokes an action
// listener at the end of the selection.
final JXMonthView monthView = new JXMonthView ();
monthView.setPreferredCols (2);
monthView.setPreferredRows (2);
monthView.setSelectionMode (JXMonthView.MULTIPLE_SELECTION);
ActionListener al;
al = new ActionListener ()
{
public void actionPerformed (ActionEvent e)
{
DateSpan ds = monthView.getSelectedDateSpan ();
System.out.println ("First selected date = " +
ds.getStartAsDate ());
System.out.println ("Last selected date = " +
ds.getEndAsDate ());
}
};
monthView.addActionListener (al);
frame.getContentPane ().add (monthView);
// Size frame window to fit the preferred size and layouts of its
// components.
frame.pack ();
// Display GUI and start the AWT’s event-dispatching thread.
frame.setVisible (true);
}
static void setLookAndFeel ()
{
try
{
// Return the name of the LookAndFeel class that implements the
// native OS look and feel. If there is no such look and feel, return
// the name of the default cross platform LookAndFeel class.
String slafcn = UIManager.getSystemLookAndFeelClassName ();
// Set the current look and feel to the look and feel identified by
// the LookAndFeel class name.
UIManager.setLookAndFeel (slafcn);
}
catch(Exception e)
{
}
}
}
Earlier, I presented the DPMVDemo1 application. For homework, modify this application to output a message when the default link panel’s hyperlink is clicked. Keep in mind that JXDatePicker’s getLinkPanel() method returns a reference to the current link panel, and the default link panel contains a single instance of JXHyperlink—a class that I explore in the following section.