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
    };

    if($.datepicker.regional[lcid])
        $.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.
///
</summary>
[ToolboxData("<{0}:jQueryDateTimeExtender runat=\"server\" />"),AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal),
AspNetHostingPermission(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal)]
public
class jQueryDateTimeExtender : Control
{

   private String targetClientID;


   protected override void OnPreRender(EventArgs e)
   {
        base.OnPreRender(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("); });");

        cs.RegisterClientScriptBlock(base.GetType(),
            "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);
        CssRegistration.Register("/_layouts/styles/jquery-ui-1.7.2.css");
    }

    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>
    public
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)

Comments

Nazar

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