JS Customize Height of the Date Widget

1.1 Problem

Sometimes the default style of date widget cannot satisfy certain demands. How can we change the style?

1.2 Solution

We can add JS event after the date widget is initialized, to adjust its CSS style.

Note:

• This method also applies to the data entry date widget.

• This method does not support mobile devices.

Add a date widget in the parameter pane, and add an after initialization event. Enter the following JS:

this.btn.bind('click',function() {
    setTimeout(function(){
        $('.fr-datepicker td').css({
            height:'10px',
            'font-size':'10px',
            padding:0
        });
        $('.fr-datepicker tr').css({
            height:'10px'
        });
    },100);   
});

Save and preview, the effect will be like:

js-datewidget.cpt