Wednesday, October 17, 2007

Using the SharePoint date control in a web part

After a lot of requests in comments in this blog, I figured this must be very hard to implement. So I tried, and found it quite easy. Here is a code sample of a web part that uses the sharepoint date control

The code is simple - three controls - a DateTimeControl from the Microsoft.SharePoint.WebControls namespace, a button and a text box.
The button has a click event. On click, the event sets the text box to display the date that was selected in the DateTimeControl.

public class DatePickerWebPart : System.Web.UI.WebControls.WebParts.WebPart


        DateTimeControl dtc;

        TextBox t;

        Button b;


        protected override void CreateChildControls()



            dtc = new DateTimeControl();

            dtc.ID = "dtc" + this.UniqueID;


            b = new Button();

            b.Text = "Click me to see the date";


            b.Click += new EventHandler(b_Click);

            t = new TextBox();




        void b_Click(object sender, EventArgs e)


            t.Text = dtc.SelectedDate.ToLongDateString();



Here is the result:

This is the web part when the page first loads

This is the web part when you click on the date picker

This is the web part when you click on the button

See? it is simple!


biste said...

It's better to set some properties reading from site's regional settings for having a calendar that reflects these settings:
dtc.LocaleId = (int)SPContext.Current.RegionalSettings.LocaleId

Anonymous said...

biste......God bless you for that last comment, spent a week or so before realising you have to explicitly set the localeid of the dtc........

Oskar said...

Is there any way to make the datetimecontrol NOT use a table for its rendering? I want to display the control inline but it appears my only option is to wrap it in yet another table cell or put it in a div with a css class that targets the inner table...

Stefan Keir Gordon said...

No man! That doesn't work!

I notice you used the current date in your example, since that is the only date that will ever post back...

Remove the line where you set the date time control ID and it will work fine!


Daniel Perez said...

Hi! nice post. I've done it some other way (using DatePicker.js from Layouts folder). It uses a Textbox, a Button and an iFrame. I'll try to put the snippet later... But I have a doubt about something: Sharepoint's calendar uses only month selection?I need to render a calendar that features Year jumps: I need to select a date from 2009, but don't want to change month by month....

thanks in advance....

Anonymous said...

check this out..

Lucas said...

Yeah.. I had a hard time. However I was using the SPDatePickerControl, I guess that control has some specific behavior or it sucks :/.

Only changed the class name on my implementation and it worked!
Thanks for the post!