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.

 

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

2 thoughts on “Replacing Report Viewer date parameter default date picker with JQuery UI date picker

  1. Which version of Reporting Services is this for?

    I put the code in place (ReportingServices.js) and watched Chrome step through it, but it didn't work.

    When I looked at source code, it seems that the elements in my source don't really match up with what your JavaScript is looking for. I'm working with Reporting Services 2008 R2.

    Your Code:
    [quote]$("table[id*='ParameterTable'] :input[type='image']").each(function(i)[/quote]

    My Source:
    <table id="ParametersGridctl31_ctl04">

    Your Code:
    [quote]$("table[id*='ParameterTable'] :input[type='image']").each(function(i)
    {
    var s = $(this).attr("src");
    if (s != null && s.indexOf("calendar") >= 0) [/quote]

    My Source:
    <td class="ParamEntryCell" style="padding-right:0px;">
    <div id="ctl31_ctl04_ctl11">
    <input name="ctl31$ctl04$ctl11$txtValue" type="text" value="7/1/2012 12:00:00 AM" size="30" onchange="javascript:setTimeout('__doPostBack('ctl31$ctl04$ctl11$txtValue','')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ctl31_ctl04_ctl11_txtValue" disabled="disabled" class="DisabledTextBox" />
    </div>
    </td>

    I'd really love to get this working, but it seems a long ways off. Any ideas on how to adapt it to work for 2008? (or am I missing something?).

  2. Hi ,
    We have implemented above solution, which is working fine in local environment (Windows Server Enterprise, SQL 2008, VS2010, Report viewer version 10) but not in cloud environment (i.e. ‘Windows server 2012 standard’, SQL 2012, VS2010).

    Please let us know if any change required in above code.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.