キンコミ kintone user community

みんなの投稿

2021/07/19 15:21

CSS等に詳しい方へ。。

グラフ表示の際の日付ですが、CSSやjavascriptを使えば「m/d」の形で表示できるのでしょうか。

2件のコメント (新着順)
koichi
開発
2021/07/20 15:27

ジャッカルさん
こんにちは。

標準機能で難しいとなると、JavaScriptでの対応になると思います。
以下サンプルです。

(function() {

    'use strict';

    // 日付妥当性チェック
    function isDate(strDate) {

        // 空文字は無視
        if (strDate == '') {
            return true;
        }
        // 年/月/日の形式のみ許容する
        if (!strDate.match(/^\d{4}\-\d{1,2}\-\d{1,2}$/)) {
            return false;
        }

        // 日付変換された日付が入力値と同じ事を確認
        var date = new Date(strDate);
        if (date.getFullYear() != strDate.split('-')[0]
            || date.getMonth() != strDate.split('-')[1] - 1
            || date.getDate() != strDate.split('-')[2]
        ) {
            return false;
        }

        return true;

    }

    var events = ['app.report.show'];
    kintone.events.on(events, function(event) {

        // 対象グラフビューであるか判定(対象グラフビューでなければ終了)
        if (location.href.indexOf('5520476') == -1) {
            return event;
        }

        var el = document.getElementsByClassName('gaia-report-crosstable-groupvalue');
        for (var i = 0; i < el.length; i++) {
            if (isDate(el[i].textContent)) {
                var date = new Date(el[i].textContent);
                // 日付表記をm/dに変更
                el[i].textContent = date.getMonth() + 1 + '/' + date.getDate();
            }
        }

    });

})();

「5520476」はグラフビューのIDです。お使いの環境に合わせてご変更ください。(グラフビューを開いたときのURLの末尾の番号です。)
細かく動作確認できていませんが、恐らくクロス集計表でしか変換できないコードです。

西村さんがご提案されたようなkintone標準機能でクリアできると一番良いですね。
これからのkintoneのバージョンアップに期待です。


ジャッカル
2021/07/20 17:41

koichiさん。ありがとうございます。希望の表記になりました。
こちら、クロス集計表が複数の場合、ビューID毎に書き換えて追加する形でしょうか。
クロス集計に関しては全て上記の表記適用したいですね。

koichi
開発
2021/07/20 18:01

ジャッカルさん

ご確認いただきありがとうございます。
同一アプリ内のすべてのクロス集計表に適用する場合、以下の部分は削除ください。

// 対象グラフビューであるか判定(対象グラフビューでなければ終了)
if (location.href.indexOf('5520476') == -1) {
    return event;
}
ジャッカル
2021/07/22 19:43

koichiお世話になってます。先日のコード動作確認とれまして、一点ご報告があります。
表記されているM/dの内、Mが1カ月前になってしまってましたので、どちらを修正すればよろしかったでしょうか。

koichi
開発
2021/07/22 21:02

ジャッカルさん

getMonth()に「+1」が抜けてました。
getMonth()は月を0番目から数えるので、+1することで本来の月と一致します。

el[i].textContent = date.getMonth() + 1 + '/' + date.getDate();

上のコードも修正してます。ご確認ください。

ジャッカル
2021/07/23 09:54

kouchiさん、修正のご教示「ありがとうございます。問題なく動作確認致しました。
大変助かりました。

ジャッカルさん

CSSやjavascriptではないですが、グラフ表示用に自動計算で「m/d」を作成するのはどうですか。標準機能で可能です。^^

DATE_FORMAT(日付, "M/d", "Asia/Tokyo")
もしくはソート順とかで影響でないよう
DATE_FORMAT(日付, "MM/dd", "Asia/Tokyo")

ではいかがでしょう。


ジャッカル
2021/07/20 09:20

ご提案ありがとうございます。その方法は自身でも先日気付き用意したのですが、クロス集計時の設定上、どうしても「日付フィールド」での運用じゃないといけませんでしたので悶絶しておりました所です。。。