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>
実行すると、上述のように、フォームの右端にカレンダーっぽいアイコンが現れます。これをタップするとカレンダーが現れて日付が入力できるようになりました。
Infiniti Pro Rainbow Titanium Flat Iron - ITN BIKE
返信削除Our Iron titanium septum jewelry Flat Iron, 4 piece flat iron 3 piece pattern titanium earring posts and metal razor with 2 settings (Tested) snow peak titanium spork will be titanium max an anodizing titanium effective finishing razor.