Changing DateTime parameter format and set time selection on html5 web form

[Harri]

I have tried to change USA MM/dd/yyyy format to Finnish dd.MM.yyyy and also add time part in HH:mm:ss to html5 web form page. I have tried it with editing datetime parameter editor customization from these links guidance:

https://docs.telerik.com/reporting/html5-report-viewer-howto-custom-parameter-editor

https://www.telerik.com/forums/report-parameter-datetime-picker-format-on-ui#WWhMNlOLgEODawH80sWuzg

https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker

but format is still MM/dd/yyyy when displayed and no time possible to select or set

 

 

My project is mainly copy from your html5 web form example where I have added script part is next:

<script type="text/javascript">
    $(document).ready(function () {
       $("#reportViewer1")
           .telerik_ReportViewer({
               reportServer: "~/",
               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 HH:mm:ss",
                                  parseFormats: ["MM.dd.yyyy", "HH:mm:ss"],
                                  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>

 

Regards

Harri

[Todor]

Hi Harri,

I tested the provided code with version 14.0.20.219 and it works as expected - see the attached screenshot. This test was with the Telerik Reporting REST Service running locally.

I noticed that you use Report Server, so I tested also with the local Report Server - version 6.0.20.219. The specified Date Time format was respected in the same way. In both cases, I was also able to select the Date and Time. Note that the version of the Html5 Viewer and the Report Server should match, e.g. '...0.20.219'.

Feel free to open a support ticket and send us a runnable application that demonstrates the issue for local investigation.

Regards,
Todor
Progress Telerik