Replacing Report Viewer date parameter default date picker with JQuery UI date picker

By default, Report Viewer control displays a default date picker for all the date parameters in parameter section. It creates a hidden iframe for each date picker and a calendar image(input type=’image’) is added next to each date input parameter which act as a trigger for the date picker.



There may be a situation when you want to use a JQuery date picker instead of default one. The advantage of  JQuery date picker is in its theme roller and can be displayed with custom theme suited to your application. This can be done by using following script on document ready.

   $("table[id*='ParameterTable'] :input[type='image']").each(function(i)
        var s = $(this).attr("src");
        if (s != null && s.indexOf("calendar") >= 0)
                showOn: "button",
                buttonImage: s,
                buttonImageOnly: true,
                dateFormat: 'dd/mm/yy'
                , changeMonth: true
                , changeYear: true
            });//end of date picker
    });//end of each

   });//end of ready


After fixing, the new JQuery UI date picker looks like as below



Hope this helps Smile