Feb 04

Sometimes ago, I wrote a post of how to extend a SharePoint DateTimeField to support Firefox too. I was using ExtJs. Now, here is the same solution but with jQuery.

Still featured:

  • Localization
  • MinDate & MaxDate
  • Date Format
  • Unobtrusive code

No more long explanation as this is nearly the same code as before. As you may notice, I rely on jQuery official datepicker.

function jQueryDateTimeConvert(clientId, minDate, maxDate, startDay, lcid, dateFormat, buttonText) {
    $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));

    var opt = {
        showOn: 'button',
        buttonImage: '/_layouts/images/calendar.gif',
        buttonImageOnly: true,
        minDate: minDate != null ? $.datepicker.parseDate('yymmdd', minDate) : null,
        maxDate: maxDate != null ? $.datepicker.parseDate('yymmdd', maxDate) : null,
        buttonText: buttonText

        $.extend(opt, $.datepicker.regional[lcid]);
    opt.firstDay = startDay;

    opt.dateFormat = dateFormat;
    $("#" + clientId).datepicker(opt);

Server-side control:

/// <summary>
Extends the SharePoint DateTimeControl to support other browser than IE.
We use jQuery as a replacement of the IE ActiveX.
[ToolboxData("<{0}:jQueryDateTimeExtender runat=\"server\" />"),AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal),
AspNetHostingPermission(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal)]
class jQueryDateTimeExtender : Control

   private String targetClientID;

   protected override void OnPreRender(EventArgs e)

        // Leave the default field shipped for IE as it works well
        if (Page.Request.Browser.Browser.Contains("IE")) return;

        DateTimeControl dtControl = FindDateTimeControl(this.Parent);
        if (dtControl.TimeOnly) return;

        // Not a very elegant way but hey, it works...
        String textBoxClientID = dtControl.Controls[0].ClientID;
        ClientScriptManager cs = this.Page.ClientScript;
        RegisterjQueryUI(this.Page, cs);

        System.Text.StringBuilder script = new System.Text.StringBuilder();
        script.AppendFormat("$(document).ready(function() {{ jQueryDateTimeConvert('{0}',", textBoxClientID);

        if (dtControl.MinDate == DateTime.MinValue) script.Append("null,");
        else script.AppendFormat("'{0:yyyyMMdd}',", dtControl.MinDate);

        if (dtControl.MaxDate == DateTime.MaxValue) script.Append("null,");
        else script.AppendFormat("'{0:yyyyMMdd}',", dtControl.MaxDate);
        script.AppendFormat("{0},", dtControl.FirstDayOfWeek);

        // Manage the formatting of the date for the different culture. We'll ensure the formatting
        // is ext-js compatible.

        script.AppendFormat("'{0}',", CultureInfo.CurrentCulture.TwoLetterISOLanguageName);
        string dateFormat = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
        script.AppendFormat("'{0}',", GetJavaScriptDateFormat(dateFormat));
        script.AppendFormat("'{0}'", SPHttpUtility.EcmaScriptStringLiteralEncode(SPResource.GetString(Strings.CalendariconAltText)));

        script.AppendLine("); });");

            "jquerydatetime" + this.UniqueID.GetHashCode().ToString("X"),
            script.ToString(), true);

    /// <summary>
    /// Helper method to translate a .Net date format to a jQuery format.
    /// </summary>
    private string GetJavaScriptDateFormat(string dateFormat)
        return dateFormat.Replace('D', 'd').Replace('M', 'm').Replace("yyyy", "yy");

    /// <summary>
    /// Register the tiny mce configuration featured by SharePoint.
    /// </summary>
    public static void RegisterjQueryUI(Page page, ClientScriptManager cs)
        ScriptLink.Register(page, "jquery-ui-1.7.2.custom.min.js", false);
        ScriptLink.Register(page, "jquery-ui-l18n.min.js", false);
        ScriptLink.Register(page, "spdatetime.js", false);

    private DateTimeControl FindDateTimeControl(Control templateContainer)
        return (DateTimeControl) templateContainer.FindControl(this.Target);

    /// <summary>
    /// Gets or sets the ClientID of the DateTimeControl to extend.
    /// If you leave empty, it will search for a control named DateTimeField inside its parent template.
    /// </summary>
String Target
        get { return targetClientID ?? "DateTimeField"; }; }
        set { targetClientID = value; }

I use Redmond theme to fit default's standard look.

You will just need to modify a bit the CSS to avoid this rendering but don't worry, the update is in the package.

See source code and released package: SPjQueryDateTimeFeature.zip (592.88 kb)



Posted on Thursday, 1 April 2010 03:29

This free datetime column http://sharepointdatetime.codeplex.com/ - also completely support all native sharepoint themes.

Comments are closed