Exclusive API for Date Widget

Difference from V10.0:

Added the setMaxAndMinDate and setPopupStyle APIs.

The setMaxAndMinDate API is supported in FineReport with the FineVis  Data Visualization plugin of V2.1.0 and later versions.

Date:

{

    max: string | Date;

    min: string | Date;

}

Start date and end date (in JSON format).

max: End date, which can be a string or a date in the yyyy-mm-dd HH:mm:ss format.

min: Start date, which can be a string or a date in the yyyy-mm-dd HH:mm:ss format.

Example 1: You can set the selectable date range to 2021-09-01 to 2021-09-08 when the obtained date widget object is defined as dateEditor.

dateEditor.setMaxAndMinDate({

    min: "2021-09-01",

    max: "2021-09-08"

});

Example 2: In a general report, you can set the selectable range of the date widget dateEditor0 on the parameter panel to 2021-09-01 to 2021-09-08.

_g().getParameterContainer().getWidgetByName("dateEditor0").setMaxAndMinDate({

    min: "2021-09-01",

    max: "2021-09-08"

});

Example 3: In a general report, you can set the selectable range of the date widget dateEditor0 in a data entry cell to 2021-09-01 to 2021-09-08.

_g().getWidgetByName("dateEditor0").setMaxAndMinDate({

    min: "2021-09-01",

    max: "2021-09-08"

});

Example 4: In an FVS visualization dashboard, you can click the title to set the selectable range of the date widget to 2021-09-01 to 2021-09-08.

duchamp.getWidgetByName("date").setMaxAndMinDate({

    min: "2021-09-01",

    max: "2021-09-08"

});

Example 5: In a dashboard, you can set the selectable range of the date widget dateEditor0 in body to 2021-09-01 to 2021-09-08.

_g().getWidgetByName("dateEditor0").setMaxAndMinDate({

    min: "2021-09-01",

    max: "2021-09-08"

});

Note: 

If an error occurs due to incomplete creation of the report block object after adding the event, you can add a delay function to postpone the execution.

setTimeout(function(){

_g().getParameterContainer().getWidgetByName("dateEditor0").setMaxAndMinDate({

    min: "2021-09-01",

    max: "2021-09-08"

});

}, 500);

For details, you can download the template Setting the Selectable Range of a Date Widget.cpt.

FVS visualization dashboard: Setting the Selectable Range of Date Widget by JS.fvs.

PopupStyle:

{

    itemHeight: string;

    fontSize: string;

}

The style of the pop-up box, which is in JSON format.

itemHeight: cell height in the pop-up box

fontSize: font size of the dates in the pop-up box

widget.setPopupStyle({

    itemHeight: "10px",

    fontSize: "10px"

});

Example 2: You can get the date widget dateEditor0 on the parameter panel, and set the cell height to 10 px and font size to 10 px for the pop-up box.

_g().getParameterContainer().getWidgetByName("dateEditor0").setPopupStyle({

    itemHeight: "10px",

    fontSize: "10px"

});

Example 3: In a general report, you can get the date widget dateEditor0 in a data entry cell, and set the cell height to 10 px and font size to 10 px for the pop-up box.

_g().getWidgetByName("dateEditor0").setPopupStyle({

    itemHeight: "10px",

    fontSize: "10px"

});

Example 4: In a dashboard, you can get the date widget dateEditor0 in body, and set the cell height to 10 px and font size to 10 px for the pop-up box.

_g().getWidgetByName("dateEditor0").setPopupStyle({

    itemHeight: "10px",

    fontSize: "10px"

});

Note: 

If an error occurs due to incomplete creation of the report block object after adding the event, you can add a delay function to postpone the execution.

setTimeout(function(){

_g().getParameterContainer().getWidgetByName("dateEditor0").setPopupStyle({

    itemHeight: "10px",

    fontSize: "10px"

});

}, 500);

For details, you can download the template Modifying the Date Widget Style.cpt.