DateTime Textbox

As part of a new UI library, I have put together a full-featured date & time textbox using the jQuery UI Datepicker and a Timepicker Addon in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The DateTime Textbox supports the following features:

• Month or year quick change options.
• Date and time range control.
• Multi-month display option.
• Alternate field and format display option.
• Option to display week number of the year.
• Internationalization (i18n) support for format, layout, and text.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Future Proof
  • Future Compatibility: If natively supported by the browser, the following new HTML5 input types will be used, if desired:
    • type="datetime"
    • type="date"
    • type="time"
  • Simple Implementation

The Demo

The Markup

Just basic input elements, with a normal type attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can take advantage of these full-featured date and time fields by simply setting an input's type attribute to one of the predetermined date & time values ("datetime" or "date" or "time") and setting the desired optional custom data attributes. The custom data attributes are optional, so the input element could simple have only the type attribute set without the many custom data attributes. If native browser support is available and that behavior is indicated (data-useNativeSupportIfAvailable), then the browser implementation of the control will be used.

That sounds like a DRY solution to me (see UI Manifesto).

<label for="txtDateTime">Date & Time:</label>
<input id="txtDateTime" type="datetime"
    data-useNativeSupportIfAvailable="true"
    data-dateQuickMonthChange="false"
    data-dateQuickYearChange="true"
    data-dateMin="null"
    data-dateMax="null"
    min=""
    max=""
    data-dateNumberOfMonthsToDisplay="1"
    data-dateCurrentMonthPositionInMultiMonthDisplay="0"
    data-dateShowOtherMonthDays="false"
    data-dateAllowSelectionOfOtherMonthDays="false"
    data-dateShowWeek="false"
    data-dateYearRange="nnnn:+20"
    data-dateAlternateDisplayElementSelector=""
    data-dateAlternateFormat=""
    data-timeHourStep="1"
    data-timeMinuteStep="5"
    data-timeHourDisplayStep="6"
    data-timeMinuteDisplayStep="10"
    data-timeHourMin="0"
    data-timeHourMax="23"
    data-showTodayNowAndCloseButtons="true"/>

<label for="txtDate">Date Only:</label>
<input id="txtDate" type="date"
    data-useNativeSupportIfAvailable="true"
    data-dateQuickMonthChange="false"
    data-dateQuickYearChange="false"
    data-dateMin="-3m"
    data-dateMax="+3m"
    min="2011-11-22"
    max="2012-05-22"
    data-dateNumberOfMonthsToDisplay="3"
    data-dateCurrentMonthPositionInMultiMonthDisplay="0"
    data-dateShowOtherMonthDays="false"
    data-dateAllowSelectionOfOtherMonthDays="false"
    data-dateShowWeek="true"
    data-dateYearRange="c-1:c+1"
    data-dateAlternateDisplayElementSelector="#altDisplay"
    data-dateI18nAlternateFormat="DD, MM d, yy"
    data-showTodayNowAndCloseButtons="true"/>
<input type="text" id="Text3" value="Select a date to see alternate display option." style="border-width:0; width:300px;" />

<label for="txtTime">Time Only:</label>
<input id="txtTime" type="time"
    data-useNativeSupportIfAvailable="true" 
    data-timeHourStep="1"
    data-timeMinuteStep="5"
    data-timeHourDisplayStep="6"
    data-timeMinuteDisplayStep="10"
    data-timeHourMin="0"
    data-timeHourMax="22"
    min="00:00:00"
    max="22:55:00"
    data-showTodayNowAndCloseButtons="true"/>

    <!-- Global DateTime Control Settings - Start -->
    <span id="lbl_dateI18nAlternateFormat">mm/dd/yy</span>
    <span id="lbl_dateI18nDateFormat">mm/dd/yy</span>
    <span id="lbl_dateI18nFirstDayOfWeekIndex">0</span>
    <span id="lbl_dateI18nPreviousText">Previous</span>
    <span id="lbl_dateI18nNextText">Next</span>
    <span id="lbl_dateI18nMonthNames">['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']</span>
    <span id="lbl_dateI18nMonthNamesAbbreviated3">['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</span>
    <span id="lbl_dateI18nDayNames">['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</span>
    <span id="lbl_dateI18nDayNamesAbbreviated3">['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</span>
    <span id="lbl_dateI18nDayNamesAbbreviated2">['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</span>
    <span id="lbl_dateI18nWeekTitleText">Wk</span>
    <span id="lbl_dateI18nIsRtl">false</span>
    <span id="lbl_dateI18nShowMonthAfterYear">false</span>
    <span id="lbl_dateI18nYearSuffix"></span>
    <span id="lbl_timeI18nIs24Hour">false</span>
    <span id="lbl_timeI18nTimeFormat">h:mm tt</span>
    <span id="lbl_timeI18nTimeOnlyHeaderText">Choose Time</span>
    <span id="lbl_timeI18nTimeTitleText">Time:</span>
    <span id="lbl_timeI18nHourTitleText">Hour:</span>
    <span id="lbl_timeI18nMinuteTitleText">Minute:</span>
    <span id="lbl_timeI18nSecondTitleText">Second:</span>
    <span id="lbl_i18nTodayNowButtonText">Now</span>
    <span id="lbl_i18nCloseButtonText">Done</span>
    <!-- Global DateTime Control Settings - End -->

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the markup, CSS, and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)
• jQuery UI
  (must include Datepicker & Slider)
• Modernizr
  (used for Future Compatibility checks)
• Timepicker Addon
  (addon for Datepicker)
  Thank you Trent Richardson!