DateTextBox Control
Back
The DateTextBox Control is a complete solution to date entry in a web form. It is
a greatly extended TextBox which assists the user in entering the day, month, and
year of a date. Users can popup a calendar to select a date from that interface
or use an assortment of commands available as single keystroke, from a context menu,
or from a Help button.
Product Features
The extensive feature list is shown below. Test the features yourself in the Demos
found here.
Entering data into the TextBox
Note: All of the below requires a browser that supports the client side scripting.
These features scale down or turn off in lesser browsers.
- Supports several date formats:
|
Short
|
|
|
Short w/abbreviated month
|
|
|
Abbreviated
|
|
|
Long
|
|
All Peter's Date and Time controls use the System.Globalization.CultureInfo object
to determine the extact format. So they are fully localizable.
DEMO: The above textboxes are actual controls. Give them a try as you explore each
of these features.
- Keystrokes are filtered to allow only the characters supported by the date format.
This is not a "masked textbox", where the user is highly constrained to
type a very specific character at a specific position because of the next feature...
- Has a powerful fuzzy logic parser to interpret what the user types when they do
not follow the date format precisely. Fuzzy logic allows users to enter data more
quickly as they can use shortcuts.
Here are its features:
- The user can omit the month and year. When the user exits the TextBox, the month
and year associated with Today's date is assigned automatically. For example, if
today is 10/5/2006 (MM/dd/yyyy) and the user enters '12', it will update with '10/12/2006'.
If the user enters '11/12', it will reformat with '11/12/2006'.
- The user can type the first few characters of a month name and the software will
figure out the rest. For example, type "Ja 29, 2006" and it will identify the month
as January.
- If the user omits the date separator and exits the TextBox, separators will be
added for them. The rule is that the field has at least 3 characters and there are
no date separators. For example, they can enter '905' or '90506' for '09/05/2006'
(shown with the pattern "MM/dd/yyyy" although it works in any short date pattern.)
- When the user exits the TextBox, the date automatically reformats to match the
date pattern rules for lead zeros on months and days, corrects a textual month name,
and assign the century when a 2-digit year is entered. For example, if the ShortDatePattern
is MM/dd/yyyy and the user types in '1/4/07', it will reformat to '01/04/2007'.
- You can install custom client and server side parsers to handle any date formats
and coding systems that are not built in. For example, suppose your users need
to enter +3d as a code for "add 3 days to the current date".
- There are numerous commands available to assist the user (especially valuable when
the user is likely to use the control frequently for data entry.) Commands are offered
as single keystrokes, from an optional right click Context Menu or optional Help
button.
The Context Menu and Help button require a license covering Peter's Interactive
Pages module.
Here are the commands:
- Assign Today's date with the Today command. The default keystroke is 'T'.
- Assign a special date that you might like the user to select by default. The control
can default to this date. The user can use the Special command to assign the special
date. The default keystroke is 'S'.
- Assign the next day with the Next Day command. Several keystrokes are available
by default including down arrow,
period,
plus
and
greater than. Assign the previous day with the Previous Day command. The
keystrokes default to
up arrow,
comma,
minus, and less than.
- Assign the next month with the Next Month command. The default keystroke is pagedown. Assign the previous month with
the Previous Month command. The default keystroke is
pageup.
- Popup the calendar with the Popup command. The default keystroke is 'C'
- Limit the user to dates within a minimum and maximum. With the addition of the
SpecialDates
control and UnselectableDatesValidator, prevent the user from entering specific
dates, including days of the week.
DEMO: This DateTextBox will not permit selecting either Saturday or Sunday. Use
the textbox to type dates for either day and then hit tab to see the UnselectableDatesValidator
report an error. It will even say the specific name of the day in the error message.
Popup the calendar to see how it does not permit selection of those dates either.
It will also prevent selection of dates earlier than 3 months ago and 3 months from
now. The RangeValidator reports errors. Also, the popup Calendar and its popup MonthYearPicker
will not allow selection outside the range.
Popup Calendar
The popup calendar features the
Calendar control.
You have access to nearly all of its 200+ properties. Here are some highlights:
- Add buttons to move by a year. Buttons to change months can be in several locations
in the header.
- The MonthYearPicker control appears when the user clicks on the month name. It
lets the user quickly jump to any month.
- The calendar has several commands: Today, Show, Clear, Next Month, Prev Month,
Next Year, and Prev Year. These can be show in the optional context menu and help
button (Requires a license covering Peter's Interactive Pages module.). They
all can appear as buttons on the calendar. In Internet Explorer, users can invoke
them through the keyboard, such as "T" for Today.
- The calendar supports extensive keyboard controls, including command keystrokes,
arrow keys to move the selection and typing digits to a date.
- Show multiple months at once.
- Show the currently selected date in a descriptive label at the bottom of the calendar.
- Extensive customization of the appearance using style sheets and alternative graphics.
A style sheet file is provided, ready for editing, along with supporting documenation.
Several images for the month change buttons are provided, or create your own.
- Using the SpecialDates control, you can change the format, style, and selectability
of dates within the popup calendar.
DEMO: Here are two examples. Each offers the optional Apply button which keeps
the calendars open until you click Apply. Use the close box to cancel.
|
Extensive customization:
|
Multiple Months View:
|
Other Features
- Supports databinding on its value.
- Make the TextBox read only so the user is forced to use the calendar to pick a
date. Set options to popup the calendar when the user clicks in the textbox or simply
points their mouse to the calendar's toggle button.
DEMO: The TextBox is ReadOnly. Use the calendar to edit it. The calendar pops up
by clicking in the textbox (as well as the button) and by pointing to the button.
- Two DateTextBox fields can be linked together to support date range entry. This
enforces that the start date never exceeds the end and vice versa. You can require
a minimum number of days between the two dates and several other rules.
DEMO: The two datetextboxes are connected to support range entry. Try to set the
start date above the end date.
- Link a
TimeOfDayTextBox
to a DateTextBox. The two will work together with one DateTime value.
- You can add a special popup menu called the QuickDateMenu with a list of dates
the user is likely to enter so the user can avoid typing. When the QuickDateMenu
is connected to a date range, it can have terms like "This Week", "Last Month",
and "Year To Date".
DEMO: Use the QuickDateMenu. It is the image to the left of the DateTextBoxes.
- JavaScript programmers can use several published methods to interact with the control.
Back
|