Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

JavaScriptライブラリ「Wijmo(ウィジモ)」の便利なウィジェットを試す

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

ダウンロード WijmoSample.zip (6.7 KB)

目次

手軽にカレンダーを表示できるCalendarウィジェット

 Web画面で年月日を表示したり入力したりする場合、簡単にカレンダーを表示できると便利です。Wijmoではカレンダーを表示するためのCalendarウィジェット(wijcalendar)が提供されています。jQuery UIで提供されるカレンダーウィジェット(DatePicker)にはない以下の機能を備えています。

  • 月切り替え時アニメーションの指定
  • 月プレビュー(前後月カレンダーを表示)
  • クイックナビゲーション(年単位の切替ボタン)

 単純にカレンダーを表示するためにはリスト7のように記述します。なおリスト7には日本語で自然な表示を行うための記述が含まれています。

[リスト7]Calendarウィジェットの表示
require(["wijmo.wijcalendar", "globalize",  "globalize.cultures"], function(){
    $(function(){
        // 日本語カルチャーを設定
        Globalize.culture("ja-JP");
        $("#calendar1").wijcalendar({
            titleFormat: "Y",      // タイトル書式
            toolTipFormat: "D"     // ツールチップ書式
        });
    });
}); 

 カレンダーの挙動はwijcalendarメソッドの引数によりカスタマイズ可能です。例えばカレンダーの月を切り替える際のアニメーションは、directionプロパティで方向を、durationプロパティで速度(時間)を、easingプロパティで速度変化を、それぞれ設定できます。

[リスト8]アニメーションの設定
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
    $(function (){
        // 日本語カルチャーを設定
        Globalize.culture("ja-JP");
        $("#calendar1").wijcalendar({
            titleFormat: "Y",      // タイトル書式
            toolTipFormat: "D",    // ツールチップ書式
            direction: "vertical", // アニメーション方向(縦)
            duration: 200,         // アニメーション時間(200ms)
            easing: "linear"       // アニメーション速度変化(一定速度)
        });
    });
});

 月プレビューを有効にするためにはallowPreviewプロパティをtrueに設定します。またクイックナビゲーションを有効にするためにはnavButtonsプロパティに"quick"を指定します。

[リスト9]月プレビュー、クイックナビゲーションの設定
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){
    $(function (){
        // 日本語カルチャーを設定
        Globalize.culture("ja-JP");
        $("#calendar1").wijcalendar({
            titleFormat: "Y",      // タイトル書式
            toolTipFormat: "D",    // ツールチップ書式
            allowPreview: true,    // 月プレビュー有効
            navButtons: "quick"    // クイックナビゲーション有効
        });
    });
});

 月プレビューを有効にするとカレンダーの左右にコントロールが表示され、マウスをポイントすると前月または次月のカレンダーがプレビュー表示されます。

図4 月プレビューにより次月のカレンダーが表示される
図4 月プレビューにより次月のカレンダーが表示される

 またクイックナビゲーションを有効にするとカレンダー上部に切替ボタンが2種類表示され、外側のボタンを押すと年単位でカレンダーが切り替わるようになります。なおjQuery UIのカレンダーウィジェットには年選択プルダウンを表示させるchangeYearプロパティが存在しますが、クイックナビゲーションのような前年/次年ボタンは表示されません。

図5 クイックナビゲーションの表示
図5 クイックナビゲーションの表示

 現実的には日付の入力が必要となった時のみカレンダーを表示するといったことが多いのではないでしょうか。Calendarウィジェットはこのような利用法に対応するポップアップモードを備えます。リスト10はポップアップモードを利用して、選択した日付をテキストボックスに反映させる例です。

[リスト10]カレンダー選択日付の取得
require(["wijmo.wijcalendar", "globalize", "globalize.cultures"], function(){ 
    $(function(){ 
        // 日本語カルチャーを設定
        Globalize.culture("ja-JP");
        $("#wijcalendar1").wijcalendar({
            titleFormat: "Y",      // タイトル書式
            toolTipFormat: "D",    // ツールチップ書式

            // ポップアップモードを有効化
            popupMode:"true", 
            // 日付選択時にテキストボックスに反映する処理
            selectedDatesChanged: function () { 
                var selDate = $(this).wijcalendar("getSelectedDate"); 
                if (selDate) { 
                    $("#txtbox_selected_date").val(selDate.toDateString()); 
                }
            }
        });
        // テキストボックスクリック時にカレンダーを表示
        $("#txtbox_selected_date").click(function(){
            $("#wijcalendar1").wijcalendar("popup", { 
                of: $("#txtbox_selected_date") 
            });
        });
    });
});
図6 テキストボックス選択でカレンダーが表示され、カレンダーで選択した日がテキストボックスに反映される
図6 テキストボックス選択でカレンダーが表示され、カレンダーで選択した日がテキストボックスに反映される

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5