ラベル date-picker の投稿を表示しています。 すべての投稿を表示
ラベル date-picker の投稿を表示しています。 すべての投稿を表示

2011年8月5日金曜日

YUI3の Calendarウィジェット



YUI2にはあるけどYUI3には無いCalendarが、YUI3の次期バージョンである3.4でリリースされるようだ。


Calendar - YUI Libraryを参考に使ってみたら、簡単に使えた。
上記画像のように、YUI2のカレンダーよりちょっとかっこいい?
ただし、ここに書いてあってもまだ未実装の機能もあるようだ。
さらに、イベントハンドラ等、詳細についてはここには書いてない。詳細はAPI docsを見ろと書いてあるが、そのリンク先は現時点ではNot Found。


また、formへの日付入力で活躍するDatepicker機能はさらに次バージョンの3.5で実装予定のようだ。
The calendar is currently not enabled with popup functionality: it will be released as a calendar plugin in 3.5


2011年2月2日水曜日

Web form用入力ヘルパー JavaScriptライブラリいろいろ


Webページのformの入力を楽にしてくれるヘルパーJavaScriptツールのメモ。


郵便番号から住所を取得


(日本郵政はもうあきらめるとして、)ヤマト運輸あたりが郵便番号⇔住所変換APIを公開したら拍手喝采されそうなのに。

ライブラリじゃなければこんなのもある → floatingdays: 郵便番号検索APIのまとめ



都道府県を選択

jsmapは面白いけど、業務用として使うならjqselectableの方が一覧性があって使いやすい(選び易い)と思う。



日付を選択

Datepickerってプロフィール入力とかでよくある誕生日の入力には向かないので、年無しの月日だけの入力補助ってないのかな?

あと昔まとめたのはこちら → floatingdays: JavaScriptでページ上にカレンダーをポップアップ表示するライブラリのリンク集



(2011/3/18 追加)
ひらがな・カタカナ変換

2010年7月5日月曜日

jQuery UIの Datepickerで日本語のカレンダーを表示する方法

(2010/07/05追記:年月選択のオプションと、その見た目の調整のCSSを追加した。)
(2013/05/01変更:CSSがmin対応したので変更した。)

必要なJavaScriptとCSSは、全てGoogleがホスティングしてくれてた。
(2010/10/12追記:日本の祝日を表示するGCalendar HolidaysだけはGoogleはホスティングしていない。)


サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Datepicker</title>

<!-- jQuery UIのCSSファイルの読み込み -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.min.css" />

<!-- 見た目の調整 -->
<style>
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center;    /* 日付はセンタリングの方が好き */
}
/* 2011/4/25 削除 (土日の背景色はGClendar Holidaysが付けてくれる)
.ui-datepicker-week-end .ui-state-default {    / * 土日の背景を変える * /
    background-image: none;
    background-color: #b4ebfa;
}
*/
.ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month {
    width: auto;    /* そのままだと改行してしまう */
}
.ui-datepicker select.ui-datepicker-month {
    margin-left: 1em;    /* ちょっと離すほうが好き */
}
</style>

</head>
<body>

<input id="test" type="text" />


<!-- JavaScriptファイルの読み込み -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<!-- 日本語カレンダーを表示するにはこれも要る -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

<!-- こちらなら日本だけでなく全てのローカライズができるが、ファイルサイズが大きい
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>
-->

<!-- 2010/10/12追記:日本の祝日も表示 -->
<script src="gcalendar-holidays.js"></script>

<script>
$(function() {
    //テキストボックスにカレンダーをバインドする(パラメータは必要に応じて)
    $("#test").datepicker({
        //regional: "ja",    //日本語化 (2011/4/25 削除、要らなくなったみたい)
        showButtonPanel: true,    //「今日」「閉じる」ボタンを表示する
        firstDay: 1,    //週の先頭を月曜日にする(デフォルトは日曜日)
      
        //年月をドロップダウンリストから選択できるようにする場合
        changeYear: true,
        changeMonth: true,
      
        //選択可能な日付の範囲を限定する場合(月は0~11)
        minDate: new Date(2010, 6 - 1, 16),
        maxDate: new Date(2010, 8 - 1, 15)
    });
});
</script>

</body>
</html>

jQuery UIのテーマ(外観のデザイン)はjQuery UI - ThemeRollerで見られる。


Datepickerのローカライズ用ファイルは、Google AJAX Libraries APIjQuery UI on Google Codeと同じディレクトリ構成だったので見つけられた。(余談だがi18nディレクトリには今のところDatepickerのローカライズ用ファイルしか無いようだ。)
Google Codeの方には最小化されたファイル(xxx.min.js)は無かったが、AJAX Libraries APIの方にはあった。(ローカライズ用JSファイルは最小化してもそれほどファイルサイズが小さくならないけど。)CSSはminは無いようだ。
ちなみにjQuery UI本家のDatepickerのデモでもGoogle AJAX Libraries API(きちんとmin.jsの方)のを使っていた。


Google AJAX Libraries APIを使う場合にバージョンアップで突如使えなくなるのを回避したいなら、jQueryとjQuery UIのバージョンはリビジョンまでしっかり指定しておいた方が無難。


(2010/08/19追記)
GCalendar Holidaysを使えば、Datepickerのカレンダー上に日本の祝日を表示できる。(2011/4/25 さらに追記:土日の背景色も表示してくれる。)
サンプル:GCalendar HolidaysでjQuery UI Datepickerに祝日を表示するのサンプル - ゼロと無限の間に
(追記終わり)


参考

ブログ アーカイブ

tags