New to Telerik Reporting? Download free 30-day trial

How to change report parameter date format in HTML5 MVC Report Viewer

Environment

Product Progress® Telerik® Reporting
Report Viewer HTML5 MVC Report Viewer

Description

There are two major ways to change the default DateTime Parameter format that we would describe in this article.

Solution 1 - Change kendoDatePicker format

With this approach the new date format is assigned to the kendoDatePicker through the UpdateUi event. Since the event is raised multiple times during ReportViewer lifecycle, a flag is used to indicate whether date format change is necessary, to avoid calling the setDateFormat function on each UpdateUi raising.

The following script section should be added (in the head section) to the ReportViewer.cshtml file

<script>
        var dateUpdated = false;// Flag to indicate that date format has been set

        function setDateFormat(dateFormat) {
            var datepicker = $("#reportViewer1").find("[data-role='datepicker']");
            if (datepicker.length > 0) {
                dateUpdated = true;

                for (var i = 0; i < datepicker.length; i += 1) {
                    var dp = $(datepicker[i]).data("kendoDatePicker");
                    var currentFormat = dp.options.format;
                    var oldValue = dp.value();

                    dp.options.format = dateFormat;
                    dp.value(oldValue);
                }
            }
        }

        function onUpdateUi() {
            // Skip if date format already set
            if (!dateUpdated) {
                setDateFormat("dd/MM/yyyy");//SPECIFY THE DATE FORMAT HERE
            }
        }
    </script>

The following script shows how the ReportViewer description would look like in the .cshtml file after adding the UpdateUi event.

    <body>
    @(Html.TelerikReporting().ReportViewer()
        .Id("reportViewer1")
        .ServiceUrl(Url.Content("~/api/reports"))
        .ReportSource(new TypeReportSource() { TypeName = "ReportLibrary1.Report1, ReportLibrary1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" })
        .ViewMode(ViewMode.Interactive)
        .ScaleMode(ScaleMode.Specific)
        .Scale(1.0)
        .PersistSession(false)
        .PrintMode(PrintMode.AutoSelect)
        .ClientEvents(
                    editors => editors
                        .UpdateUi("onUpdateUi")
            )
    )
    </body>

Solution 2 - Create a custom parameter editor for the DateTime Parameter.

The following script section should be added (in the head section) to the ReportViewer.cshtml file

<script>
        function customMatch(parameter) {
            return parameter.type === "System.DateTime";
        }

        function createCustomEditor(placeholder, options) {
            $(placeholder).html('<input type="datetime"/>');
            var datePicker = $(placeholder),
                              parameter,
                              valueChangedCallback = options.parameterChanged,
                              dropDownList;

            function onChange() {
                var dtv = this.value();
                valueChangedCallback(parameter, dtv);
            }

            return {
                beginEdit: function (param) {
                    parameter = param;

                    var dt = null;
                    try {
                        if (param.value) {
                            dt = param.value;
                        }
                    } catch (e) {
                        dt = null;
                    }

                    $(datePicker).find("input").kendoDatePicker({
                        format: "MM/dd/yyyy",//SPECIFY THE DATE FORMAT HERE
                        change: onChange,
                        value: dt
                    });

                    dropDownList = $(datePicker).find("input").data("kendoDatePicker");
                }
            };
        }
</script>

The property ParameterEditors of the ReportViewer should be set in the body section of the ReportViewer.cshtml file, and it will look like this

<body>
    @(Html.TelerikReporting().ReportViewer()
        .Id("reportViewer1")
        .ServiceUrl(Url.Content("~/api/reports"))
        .ReportSource(new TypeReportSource() { TypeName = "ReportLibrary1.Report1, ReportLibrary1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" })
        .ViewMode(ViewMode.Interactive)
        .ScaleMode(ScaleMode.Specific)
        .Scale(1.0)
        .PersistSession(false)
        .PrintMode(PrintMode.AutoSelect)
        .ParameterEditors(
                    editors => editors
                        .CustomEditors(new CustomParameterEditor
                        {
                            MatchFunction = "customMatch",
                            CreateEditorFunction = "createCustomEditor"
                        })
            )
    )
</body>

Notes

In Telerik Reporting ,the default element for editing DateTime Parameters is kendoDatePicker. Its default DateTime format depends on the culture settings of the environment.

See Also

How to Create a Custom Parameter Editor.

In this article