How to Configure Date and Time Formats for Parameters in the Bold Reports Angular Report Viewer
In Bold Reports®, the parameterSettings property lets you set the display format, the time interval and a 12-hour or 24-hour clock for the date and time parameters in your report, which makes them easier to use. This guide shows how to change the date and time format of report parameters in a Bold Reports Angular application. The settings apply to all date parameters in the report.
Step-by-Step Instructions
1. Update the app.component.html file
Add the bold-reportviewer component to your HTML template. Bind the parameterSettings property to the component to apply your custom configuration.
<!-- Bold Reports Report Viewer component -->
<bold-reportviewer id="reportViewer_Control"
[reportServiceUrl] = "serviceUrl"
[reportPath] = "reportPath"
[parameterSettings] = "parameterSettings">
</bold-reportviewer>
2. Update the app.component.ts file
Define the parameterSettings object in your app.component.ts file. This object controls the picker type, the display formats and the time increments.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public serviceUrl: string;
public reportPath: string;
public parameterSettings: any;
constructor() {
this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
this.reportPath = 'product-line-sales.rdl';
// Configure date and time parameter behavior
this.parameterSettings = {
dateTimePickerType: "DateTime",
dateTimeFormat: "MM/dd/yyyy hh:mm tt", // Customize based on your preference
timeDisplayFormat: "hh:mm tt",
timeInterval: 15
};
}
}
3. Property Descriptions
The following properties in the parameterSettings object control the date-time picker:
| Property | Description | Example |
|---|---|---|
dateTimePickerType |
Sets the picker type for date parameters. Use “DateTime” to show the date and time picker. | “DateTime” |
dateTimeFormat |
Defines the date and time format shown in the picker input field. | “MM/dd/yyyy h:mm tt” |
timeDisplayFormat |
Defines the time format shown in the time dropdown inside the picker popup. | “HH:mm” |
timeInterval |
Sets the number of minutes between two adjacent time values in the time dropdown. The default is 30. | 30 |
4. Configure Date Formats and Time Intervals
You can change the formats and interval to match your regional settings or preferences. The values below are common examples.
| Feature | Example formats / values | Example result |
|---|---|---|
| Date formats | MM/dd/yyyy, dd/MM/yyyy, yyyy-MM-dd, dd-MMM-yy, MMM dd, yyyy |
12/25/2025, 25-Dec-25 |
| Time formats | hh:mm tt (12-hour), HH:mm (24-hour), HH:mm:ss |
02:30 PM, 14:30:00 |
| Time intervals | 5, 10, 15, 30, 60 |
15-minute steps |
Time Format Selection Logic
Choose the format based on whether you want a 12-hour clock with AM/PM or a 24-hour clock:
// 12-hour format (with AM/PM)
dateTimeFormat: "dd/MM/yyyy hh:mm tt",
timeDisplayFormat: "hh:mm tt"
// 24-hour format (no AM/PM)
dateTimeFormat: "dd/MM/yyyy HH:mm",
timeDisplayFormat: "HH:mm"
5. Preview the Application
Run your Angular application using ng serve. Open the Parameter Panel and check that the date parameter uses your format and that the time dropdown moves in the interval you set (15-minute steps in the sample above).
