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.

 

ReportViewerDefaultDatepicker_thumb3

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.


   $(document).ready(function(){
   $("table[id*='ParameterTable'] :input[type='image']").each(function(i)
   {
        var s = $(this).attr("src");
        if (s != null && s.indexOf("calendar") >= 0)
        {
            $(this).hide();
            $(this).prev("input").not(":disabled").datepicker({
                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

 

ReportViewerJQueryDatepicker_thumb3

Hope this helps Smile