SSRS date-picker is invisible in Google Chrome, not working in Opera/IE?

Question

I\'m integrating SSRS reports(developed in VS 2008 vs. 9.0 ), and when I load it into the browser with Chrome, I get this:

Answer 1

The supposedly dead link (rajbandi.net) was accessible at the time of writing this post; I'm putting its contents here for use if the link is down again:

---

Fixing SSRS Report Viewer control date picker in Google chrome
Author: Raj Bandi
April 3, 2012
https://rajbandi.net/2012/04/03/fixing-ssrs-report-viewer-control-date-picker-in-google-chrome/

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
            });
        });
    }
});

Answer 2

At least in Chrome, an option could be just to show the date excluding the time. This make more sense to the end user.

//Update the dates
$(document).ready(function () {
    $('input[type=text]').each(function () {
        $(this).val($(this).val().replace('12:00:00 AM', ''));
    })
});

Answer 3

Removing current account/people and adding new account/people on chrome worked for me.

Answer 4

Maybe this post will be helpful for you? http://www.codeproject.com/Articles/504567/Print-button-Date-picker-in-SSRS-Reports-for-Non-I