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.