カラムの初期値に現在の日付・時刻をセットする

PowerCMS X には管理画面のカスタマイズ機能があり、任意の JavaScript やテンプレートタグを挿入することで動的な機能を追加することが可能です。

• 管理画面のカスタマイズ
• PowerCMS X の管理画面を JavaScript でカスタマイズする方法
• 環境変数「user_js」

今回は例として、オブジェクト編集画面の日付入力欄に現在の日付・時刻をセットする方法をご紹介します。

概要

オブジェクトの新規作成時に日付入力欄に対して現在の日付・時刻をセットします。

実装イメージ

手順1. 日付入力欄の作成

対象のモデル編集画面で以下のカラムを作成します。

手順2. カスタマイズテンプレートの設置

管理画面をカスタマイズする手段は前述のようにいくつかありますが、今回はカスタマイズテンプレート（alt-tmpl）を使用したカスタマイズを行います。

CMS サーバ上の alt-tmpl 用のディレクトリに以下のファイルを設置します。

alt-tmpl/include/edit/モデル名/form_footer.tmpl

例えば記事の編集画面に適用したい場合は「モデル名」は「entry」となります。

ファイルの内容は以下のように記述します。

<mt:unless name="request.id">
<script>
document.addEventListener('DOMContentLoaded', function () {
    const now = new Date();
    const dateInput = document.getElementById('event_date_date');
    const timeInput = document.getElementById('event_date_time');
    // 日付（未入力の場合のみ）
    if (!dateInput.value) {
        const yyyy = now.getFullYear();
        const mm = String(now.getMonth() + 1).padStart(2, '0');
        const dd = String(now.getDate()).padStart(2, '0');
        dateInput.value = `${yyyy}-${mm}-${dd}`;
    }
    // 時刻（未入力の場合のみ）
    if (!timeInput.value) {
        const hh = String(now.getHours()).padStart(2, '0');
        const mi = String(now.getMinutes()).padStart(2, '0');
        const ss = String(now.getSeconds()).padStart(2, '0');
        timeInput.value = `${hh}:${mi}:${ss}`;
    }
});
</script>
</mt:unless>

オブジェクトの新規作成時は id が存在しないため、<mt:unless name="request.id"> を記述することで新規作成時だけこの JavaScript が適用されます。

document.getElementById('event_date_date')、document.getElementById('event_date_time') は手順1.で指定したカラムの「名前」を元に「_date」「_time」を付与したものとなります。

カテゴリー：サイト制作全般

投稿者：fujimoto