Home     Download a Licensed Product     Message Board     Contact Peter     About PeterBlum.com     Policies     Newsletter
Peter's Date and Time
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.

    Start: End:
  • 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.

    Start Date    End Date

  • JavaScript programmers can use several published methods to interact with the control.

Back

www.PeterBlum.com is written by Peter L. Blum.
Copyright © 2002-2008, Peter L. Blum. All Rights Reserved
This site is best viewed with browsers that support style sheets.
Privacy policy