Ajax Toolkit date range pickers in SharePoint Online

I was always a fan of Microsoft Ajax Toolkit JavaScript. In the past was some documentation about how to use it only on client side, but now it seems the documentation is only about how to use it with server side components which generate for you JavaScript code. Unfortunately, you cannot do this on SharePoint Online, so I have decided to extract files from the latest version created under the governance of DevExpress and apply them in SharePoint Online environment.

Files preparation

Download files from this location, extract them from archive and upload them into a folder located on SharePoint. All of them should be in the same folder, so please don’t change their location relative to start.js file. Start.js file is an old files on demand loader created by Microsoft, which is not popular but I still consider to be the best option for what Microsoft has created.

Then, in your aspx file, using script manager or script proxy manager, add reference to these files.

<asp:ScriptManager runat="server" LoadScriptsBeforeUI="false">
<asp:ScriptReference Path="../Common/Resources/Resources.js" />
<asp:ScriptReference Path="../Common/Start.js" />
<asp:ScriptReference Path="../Common/Extended.js" />

Also, please create a reference to CSS file included in the archive.


Now as we have already a loader, we don’t need to worry about loading order of the files or if the files are already loaded or not. We just need to place our logic into Sys.require function calling.

Sys.require([Sys.scripts.Calendar], function () {
// Logic is placed here

In the HTML mark-up, please create two SharePoint text input controls.

<SharePoint:InputFormTextBox runat="server" ClientIDMode="Static" ID="startDate" />
<SharePoint:InputFormTextBox runat="server" ClientIDMode="Static" ID="endDate" />

We should start now creating the logic. Starting from somewhere, we can create two simple independent date pickers.

    $create(Sys.Extended.UI.CalendarBehavior, { id: 'startDate', format: 'yyyy-MM-dd'}, {}, null, $get('startDate'));
    $create(Sys.Extended.UI.CalendarBehavior, { id: 'endDate', format: 'yyyy-MM-dd' }, {}, null, $get('endDate'));

If everything goes as expected, we should have now two date pickers with no relationship between them. However, selecting a range means end date should be greater or equal with start date, so we need to create a relationship. For this, we need to attach a handler for date change event on start date client control.

        $create(Sys.Extended.UI.CalendarBehavior, { id: 'startDate', format: 'yyyy-MM-dd' }, {
            dateSelectionChanged: function (instance) {

                var dt = instance.get_selectedDate();

                // Add this only if you want to adjust end date automatically according the start date selection


        }, null, $get('startDate'));
        $create(Sys.Extended.UI.CalendarBehavior, { id: 'endDate', format: 'yyyy-MM-dd', startDate: $get('startDate').value }, {}, null, $get('endDate'));

I would say this is all you need for this functionality. What I like on this implementation is actually you can choose if your end date is automatically adjusted or not. When I have used jQuery date pickers, I couldn’t remove this option or it is hidden somewhere and I am not aware about. However, for complicated forms, customers requested to remove automatically adjustment, because users in general will use it to bypass validation and will start enter wrong information.


3 thoughts on “Ajax Toolkit date range pickers in SharePoint Online

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s