JS 日付パネルの高さを調整

  • 作成者:ayuan0625
  • 編集回数:11次
  • 最終更新:ayuan0625 于 2020-12-15
  • I. Overview

    1.1 Problem

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

    image.png


    1.2 Solution

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

    js-2.gif

    Note:

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

    • This method does not support mobile devices.

    II. Example

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

    image (1).png

    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-2.gif

    III. Download template

    Attachment List


    Theme: FineReport カスタム開発
    • いいね
    • 良くない
    • 閲覧しただけ