Report Parameter DateTime Picker Format on UI

4 posts, 0 answers
  1. Gede
    Gede avatar
    3 posts
    Member since:
    Sep 2012

    Posted 09 Apr 2014 Link to this post

    Hi,

    I'm using date parameter on my report. Currently the date displayed with this format "MM/dd/yyyy".
    Is there any chance to change its format to "dd-MMM-yyyy" or something start with "dd" ?
    I'm searching on the report properties but there's nothing to format its value.

    I have attached my screen for additional information and any help will be great.

    Thank you

    Ady.
  2. Stef
    Admin
    Stef avatar
    3043 posts

    Posted 11 Apr 2014 Link to this post

    Hi Ady,

    You can use custom template for the DateTime parameters, where you can specify the format for the dates - How To: Create a custom parameter editor.

    I hope this helps you.

    Regards,
    Stef
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Gede
    Gede avatar
    3 posts
    Member since:
    Sep 2012

    Posted 15 Apr 2014 Link to this post

    Hi Stef,

    Thanks for your reply. I'll read it as my reference.
    But my project using Integrated Visual Studio Report Designer UI, which I didn't explain it earlier and sorry for that.
    Does that custom report parameter still can be use or there is another way to create it?

    Regards,
    Gede Ady.

  5. Stef
    Admin
    Stef avatar
    3043 posts

    Posted 18 Apr 2014 Link to this post

    Hello Gede,

    The custom parameter editor is actually a UI template that will be used for a specific type of report parameters in the HTML5 Report Viewer's parameters area. It is not related to the report definition.
    Using this custom template, you can replace the default editors for report parameters, and use your own. Consider the following example:
    <div id="reportViewer1">
           loading...
       </div>
     
       <script type="text/javascript">
           $(document).ready(function () {
               $("#reportViewer1")
                   .telerik_ReportViewer({
                       serviceUrl: "api/ReportingApi/",
                       templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate.html',
                       reportSource: { report: "CSharp.Html5Demo.MyReports.Report1, CSharp.Html5Demo" },
                       viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                       scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                       scale: 1.0,
                       ready: function () {
                           //this.refreshReport();
                       },
                       parameterEditors: [
                      {
                          match: function (parameter) {
                              return parameter.type === "System.DateTime";
                          },
     
                          createEditor: function (placeholder, options) {
                              $(placeholder).html('<input type="datetime"/>');
                              var dateTimePicker = $(placeholder),
                                                   parameter,
                                                   valueChangedCallback = options.parameterChanged,
                                                   dropDownList;
     
     
                              function onChange() {
                                  var dtv = this.value();
                                  if (null !== dtv) {
                                      dtv = myadjustTimezone(dtv);
                                  }
                                  valueChangedCallback(parameter, dtv);
                              }
     
                              return {
                                  beginEdit: function (param) {
                                      parameter = param;
     
                                      var dt = null;
                                      try {
                                          if (param.value) {
                                              dt = myunadjustTimezone(param.value);
                                          }
                                      } catch (e) {
                                          dt = null;
                                      }
     
                                      $(dateTimePicker).find("input").kendoDateTimePicker({
                                          format: "dd/MM/yyyy",
                                          parseFormats: ["MM/dd/yyyy"],
                                          min: new Date(2013, 0, 1, 8, 0, 0),
                                          max: new Date(2013, 0, 4, 22, 0, 0),
                                          change: onChange,
                                          value: dt
                                      });
     
     
     
                                      dropDownList = $(dateTimePicker).find("input").data("kendoDateTimePicker");
     
                                  }
     
                              }
                          }
                      }]
                   });
           });
     
           function myadjustTimezone(date) {
               return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
           };
           function myunadjustTimezone(date) {
               return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), date.getUTCMilliseconds());
           };
     
     
       </script>
    You can check the ReportViewer-x.x.x.x.js file how the default editors are created.

    If Kendo Globalization suits your requirements, you can use this approach instead of creating a template only for Datetime parameters.

    If you need to change the culture specific formats in the report, please take a look at the Report Globalization help article.

    In order to provide you more accurate suggestions, please elaborate whether you need to globalize the whole application, or you need a specific presentation for Datetime parameters only in the viewer.

    Regards,
    Stef
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top