SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(PR)

jQueryを利用したコンポーネントで軽量かつ高機能なWebアプリづくりを!

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

日付入力を支援するigDateEditorとigDatePicker

 日付入力に関するEditorsコンポーネントには、igDateEditorとigDatePickerがあります。まずは実際の実行結果を見てみましょう。

 図3は、実行直後の画面です。

図3 日付入力ボックスの実行結果
図3 日付入力ボックスの実行結果

 図4のように、スピンボタンをクリックすることで、日付を1日ずつ変化させることもできます。

図4 アップダウンボタンで前後の日付に変更
図4 アップダウンボタンで前後の日付に変更

 図5は、[▽]ボタンをクリックしてポップアップカレンダーを表示させている例です。

図5 ポップアップカレンダーで日付を選択
図5 ポップアップカレンダーで日付を選択

 igDatePickerは基本的に月単位での表示切り替えとなるので、少し前の時期や近い将来など実際のスケジュールと照らし合わせて入力して欲しい場合に利用すると良いでしょう。生年月日など数年以上前の情報などを入力させる場合には、直接数値を入力できるigDateEditorを利用してください。

 こちらのコンポーネントでは、数値以外の値や、2011年13月41日のように実在しない日付を入力することができませんので、値検証をほとんど意識しなくても良いというメリットがあります。実際のコードは、以下のとおりです。

igDateEditorとigDatePickerコンポーネントの利用例(igEditorsSample.htm)
<input id="dateEditor" type="text" />
<input id="datePicker" type="text" />

<script type="text/javascript">
    $('#dateEditor').igDateEditor({
        button: 'spin',
        dateInputFormat: 'dateLong',
        minValue: new Date(1900, 0, 1),
        maxValue: new Date(2011, 11, 31),
        width: 195,
        nullText: '生年月日を入力してください。'
    });

    $('#datePicker').igDatePicker({
        dropDownTriggers: 'button',
        dateInputFormat: 'dateLong',
        minValue: new Date(2011,8,1),
        maxValue: new Date(2011,10,31),
        width: 195,
        nullText: '今日の日付を入力してください。'
    });
</script>

 それぞれのinput要素に対して、igDateEditor/igDatePickerメソッドで日付入力機能を付加しています。それぞれのメソッドで共通で利用できるオプションは、以下のとおりです。

 

igDateEditorのオプションの一部
オプション 概要
button ボタンを入力補助として使用する場合、spinを指定
dateInputFormat 日付入力のフォーマットを指定
minValue 入力できる最も過去の日付を指定
maxValue 入力できる最も未来の日付を指定
width 幅を指定
nullText 入力前のウォーターマークテキストを指定

 igDatePickerメソッドもigDateEditorメソッドとほぼ同様のオプションが使用できます。

 その他、今回のサンプルではigDatePickerメソッドでdropDownTriggersオプションを使用しています。dropDownTriggersオプションはポップアップカレンダーを表示するトリガーを表します。サンプルではbutton値を指定していますので、ボタンクリック時にカレンダーを表示しますが、focus値を指定することで、テキストボックスにフォーカスを移動した時にカレンダーを表示させることもできます。

次のページ
HTML5対応のコンポーネントをjQueryで利用

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト ナオキ(ナオキ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6249 2011/10/28 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング