ブログトップ 記事一覧 ログイン 無料ブログ開設

サンプルコードによるPerl入門 〜 安定と信頼のPerlを学ぼう 〜

2011-07-02

JavaScriptで簡単に日付を選択するためのコンポーネント

DateSelectSimple.jsを作成しました

 JavaScriptで簡単に日付を選択するためのコンポーネントDateSelectSimple.jsを作成しました。カレンダーのような大きなものではなく、セレクトフィールドを使って実装しています。見た目はそんなに気にしないが、業務で日付を選択するアプリケーションを書くときは便利かなぁと思います。jQueryにだけ依存しています。

以下のような特徴があります。

  • リストボックスを使って実装されていて縦のサイズを指定することができます。
  • 月や年を変更してから、日付を選択することができます。
  • 日付のフォーマットを指定することができます。
  • 空白の項目をひとつ追加することができます。
  • コールバック関数を使って、値を変更したときの処理を記述できます。

 使い方も簡単です。オブジェクトを生成して、componentメソッドを使って日付選択のコンポーネントを取得するだけです。

// JavaScript
var dss = DateSelectSimple.create({size: 10});
$("#date_select").append(dss.component());

// HTML
<div id="date_select"></div>

ダウンロード

DateSelectSimple.js

ドキュメント

動作確認はChrome, IE7, IE8, Firefox5で行っています。

見た目

f:id:perlcodesample:20110803233924p:image


もしかしたら役に立つかもしれないツールやモジュールへ

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/perlcodesample/20110702/1312379635
リンク元