SSRS Report Viewer control works well in IE6+ but has some known compatibility issues with other major browsers(Firefox, Chrome etc.) around date picker and print button.

For more information read this

http://msdn.microsoft.com/en-us/library/ms251673.aspx

I am presenting a simple solution to fix date picker issue in Chrome with  a combination of some server side code and Client side JQuery script.

 

Server Side Code

 

1) Add the below code in the page/control file in which the reportviewer control resides

 <asp:HiddenField ID="DatePickers" runat="server" />

 

2) Add the below code in the code behind file of page/control in which the reportviewer control resides(.Net 2.0 version)

protected override void OnPreRender(EventArgs e)
{
  base.OnPreRender(e);
  DatePickers.Value = string.Join(",",(new List(GetDateParameters()).ToArray()));
}
private IEnumerable GetDateParameters()
{
  // I'm assuming report view control id as reportViewer
  foreach (ReportParameterInfo info in reportViewer.ServerReport.GetParameters())
  {
    if (info.DataType == ParameterDataType.DateTime)
    {
        yield return string.Format("[{0}]",info.Prompt);
    }
  }
}

 

Client Side Code

 

1) Add the below script in the html head section

$(document).ready(function(){

 if ($.browser.webkit)
 {
    $($(":hidden[id*='DatePickers']").val().split(",")).each(function(i, item){
         var h = $("table[id*='ParametersGrid'] span").filter(function(i) {
             var v = "[" + $(this).text() + "]";
             return (v != null && v.indexOf(item) >= 0);
          }).parent("td").next("td").find("input").datepicker({
           showOn: "button"
           ,buttonImage: '/Reserved.ReportViewerWebControl.axd?OpType=Resource&Name=Microsoft.Reporting.WebForms.calendar.gif'
           ,buttonImageOnly: true
           ,dateFormat: 'dd/mm/yy'
           ,changeMonth: true
           ,changeYear: true
           });
     });
  }

});

 

Hope this helps!!!

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.

   $(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

 

Hope this helps

In Chrome browser, Report Viewer (8 & 9) toolbar elements are displayed in multiple rows as shown below.

 

 

The quick fix for this to change the toolbar table display to ‘inline-block’ when toolbar is displayed. This can be done by applying the following simple Jquery script on document ready. Add css class ‘ms-report-viewer-control’ to your reportviewer control.

$(document).ready(function() {
   if ($.browser.webkit)
   {
	$(".ms-report-viewer-control :nth-child(3) table").each(function(i, item) {
	$(item).css('display', 'inline-block'); });
   }
});

After this fix, the toolbar elements are displayed in a single row

 

 

Hope this helps