Report Parameter DateTime Picker Format on UI

[Gede]

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.

[Stef]

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

 

 

[Gede]

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.

[Stef]

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

 

 

[Guss]

Rely Telerik... Is this still the status quo?
I'm sore 50% or more of your customers is outside of USA, and the rest of the world does not write MM/dd/yyyy.
They use either dd/MM/yyyy or yyyy-MM-dd.
One would expect that the data input control that is generated at least read the culture that the report was specified in !

[Guss]

Or if its not part of the report, then read the Page directive of the culture set on the page

[Katia]

Hi Guss,

Thank you for your feedback! The settings of the report such as Culture will not affect the report viewer. As report viewer uses Kendo UI DateTimePicker widget to display date parameters  its settings need to be changed separately. The two approaches for changing the date format used by this widget described earlier by Stef are still valid.


Regards,
Katia
Progress Telerik

[Rob]

Another 2 years and another attempt at asking if this has been changed.

After building a pile of reports I realized the date picker is displaying the date in the wrong format.. I am really hoping there is a simple way to change it to display 'dd/mm/yyyyy' now without having to add heaps of code to every report! :(

Thanks

[Rob]

Actually.. everything is correct from inside VS  when developing the DLL (using "preview" and "HTML Preview")

The format is only wrong from the web interface . I am using the HTML viewer. I am trying to work out how to change the culture for that .. but so far no luck! 

[Rob]

OK, sorted.. sorry for the posts.

For anyone else struggling..  I simply had to follow steps 1 ,2 and 3 here

https://docs.telerik.com/aspnet-mvc/globalization/overview#applying-cultures

Cheers
Rob