ホーム > サポート・マニュアル > マニュアル > カスタマイズの方法 > 組み込みのJavascript > 日付をカレンダー表示から入力する「日付選択カレンダー」

日付をカレンダー表示から入力する「日付選択カレンダー」

ドキュメント最終更新日時：2010/07/29 16:42

a-blog cmsでは、日付をカレンダー表示から入力する「日付選択カレンダー」の設定が標準で実装されています。（v1.2.1より）
この機能はエントリー作成画面の日付入力フィールドでも使用されています。

日付をカレンダー表示から入力する

1. 設定の編集

この機能の設定は、/js/acms/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みのJavaScriptの設定を編集する」を参照してください。

    // 日付選択カレンダー
    dpicMark            : 'input:text[name$=date]',
    dpicConfig          :
    {
        closeText       : '閉じる',
        prevText        : '&lt;前月',
        nextText        : '次月&gt;',
        currentText     : '今日',
        monthNames      : ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'],
        monthNamesShort : ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'],
        dayNames        : ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort   : ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'],
        dayNamesMin     : ['日','月','火','水','木','金','土'],
        dateFormat      : 'yy-mm-dd',
        firstDay        : 0,
        isRTL           : false
    },

dpicMark	日付選択カレンダーを表示させるHTMLの要素・属性を指定します。
dpicConfig	日付選択カレンダーの表示設定です。

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。

例）dpicMarkで「input:text[name$=date]」と指定した場合

<input type="text" name="date" value="%{NOW_DATE}" size="15" />

このように記述すると、入力フィールドをクリックしたときに日付選択カレンダーが表示され、日付をクリックすると入力フィールドに日付が入力されます。（日付の形式を変更するには、config.jsの「dateFormat」の値を変更してください。）

このドキュメントと関連している内容のエントリー

関連度 3 : スタイルを切り替える「styleswitch」
関連度 1 : 特定の部分の表示／非表示をフェード効果で切り替える機能（js-fader）
関連度 1 : 1行ごとに交互にclassを付与するゼブラ機能（zebra）
関連度 1 : フォームのテキスト入力エリアにプレースホルダーを表示させる（placeholder）
関連度 1 : マウスオーバーしている要素にクラスを付与する（hover）

ドキュメントの内容に関するお知らせフォーム

内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。

サポート情報検索

組み込みのJavascript

リストの続きを表示

組み込みのJavascriptの一覧に戻る