This is a migrated thread and some comments may be shown as answers.

Report Parameter DateTime Picker Format on UI

9 Answers 536 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Gede
Top achievements
Rank 1
Gede asked on 10 Apr 2014, 03:54 AM
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.

9 Answers, 1 is accepted

Sort by
0
Stef
Telerik team
answered on 11 Apr 2014, 05:44 PM
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.

 
0
Gede
Top achievements
Rank 1
answered on 16 Apr 2014, 03:23 AM
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.

0
Stef
Telerik team
answered on 18 Apr 2014, 01:42 PM
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.

 
0
Guss
Top achievements
Rank 2
Veteran
answered on 12 Mar 2018, 02:41 PM
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 !
0
Guss
Top achievements
Rank 2
Veteran
answered on 12 Mar 2018, 03:05 PM
Or if its not part of the report, then read the Page directive of the culture set on the page
0
Katia
Telerik team
answered on 15 Mar 2018, 01:28 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rob
Top achievements
Rank 1
Veteran
Iron
answered on 05 Jul 2020, 09:50 PM

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

0
Rob
Top achievements
Rank 1
Veteran
Iron
answered on 05 Jul 2020, 10:09 PM
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! 
0
Rob
Top achievements
Rank 1
Veteran
Iron
answered on 05 Jul 2020, 11:31 PM
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
Tags
General Discussions
Asked by
Gede
Top achievements
Rank 1
Answers by
Stef
Telerik team
Gede
Top achievements
Rank 1
Guss
Top achievements
Rank 2
Veteran
Katia
Telerik team
Rob
Top achievements
Rank 1
Veteran
Iron
Share this question
or