2013年2月18日月曜日

jQuery Mobile Dateboxを利用して日付入力を簡単にする

このエントリーをはてなブックマークに追加

jQuery Mobile Dateboxは日付入力を支援するjQuery Mobileのプラグインです。date型に対応していないブラウザでの入力に便利です。日付入力方式はいろいろあるのですが、今回はカレンダー式の入力(CalBox)を試してみました。


準備
下記サイトにアクセスします。
http://dev.jtsage.com/jQM-DateBox2/demos/install.html

[Download Links - Current Version]より次のファイルをダウンロードして適当な場所に配置します。
・jqm-datebox.min.css
・jqm-datebox.core.min.js
・jqm-datebox.mode.calbox.min.js


ソースコード
準備したファイルをインポートして、inputのdata-role属性に"date-box"、data-options属性に日付のフォーマット等を指定することで利用できるようになります。下記では入力後に表示される日付の形式をYYYY/MM/DDとしています。


<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
        <link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="js/jqm-datebox.core.min.js"></script>
        <script type="text/javascript" src="js/jqm-datebox.mode.calbox.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
        <title>Input Date Test</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="content">
                <label for="date">Input Date</label>
                <input id="date" name="date" type="date" data-role="datebox" data-options='{"mode":"calbox", "overrideDateFormat":"%Y/%m/%d"}' />
            </div>
        </div>
    </body>
</html>


実行すると、上述のように、フォームの右端にカレンダーっぽいアイコンが現れます。これをタップするとカレンダーが現れて日付が入力できるようになりました。

0 件のコメント:

コメントを投稿