jQuery UIのDatepickerでカレンダーから楽々日付入力
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の１機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
jQuery UI の Datepicker のカレンダーを複数月分表示
jQuery UI の Datepicker プラグインにおいて、複数月のカレンダーを表示する方法。カレンダーを複数月分表示させるには、numberOfMonths オプションを使う。２か月分表示させるには、「2」を設定し、３か月分表示させるには、「3」を設定する。 実装例（サンプル） 日付: 実装例（サンプル）の動作について 「日付:」の右側の、テキスト入力欄をクリックすると、今月・次月・次々月の３か月分の日本語のカレンダーが現れる。 カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。 をクリックすると、次月から３か月分の日本語のカレンダーになる。 をクリックすると、前月から３か月分の日本語のカレンダーになる。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="styleshe
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 Bootstrap2版はこちら Datepicker for Bootstrap (別記事) 実装方法 ダウンロード / サンプル (v0.2.6) スクリプト <link href="bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="css/timepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-timepicker.js" type="text/javascript"> 時刻指定時
Datepicker / カレンダー - jQuery UI 日本語リファレンス
テキスト入力欄に、カレンダーから、日付を入力できるようにするには、jQuery UI の Datepicker が便利だ。 jQuery UI の Datepicker プラグイン jQuery UI の Datepicker プラグインについての記事。Datepicker プラグインは、テキスト入力欄に、カレンダーから、日付を入力できるようにするプラグイン。テキスト入力欄をクリックすると、今月のカレンダーが現れる。カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。 カレンダーから入力した日付のフォーマットを変更 jQuery UI の Datepicker プラグインを使い、カレンダーからテキスト入力欄に入力した、日付のフォーマットを、ドロップダウンリストで選択したフォーマットに変更する方法。 Datepicker のカレンダーで選択できる日付の範囲を設定 jQue
シンプルな日付ピッカーを実装するjQueryプラグイン・jQuery.minical - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 デートピッカーを実装するjQuery プラグイン・jQuery.minicalです。 シンプルさと軽量さが特徴です。 jQuery UIを使うほどでもないよう な場合はこういった軽量でシンプル な物が使いやすいですね。 デートピッカー実装ライブラリです。 軽量というのが売りのようで、gzipで4KBほどに圧縮できるそうです。動作もシンプルにカレンダーをポップアップ表示させるだけのもの。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src='jquery.minical
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
