skillup

技術ブログ

JavaScript UI

timepickerについて

投稿日:2016年6月7日 更新日:

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。

私も日頃Datepickerというライブラリを使っています。が、このプラグイン日付の入力はできても、時間の指定まではできません。

時間の指定ができるのが本日紹介するtimepickerというライブラリです。

下記のようにプルダウン形式で時間を選ぶことができます。

ソース

https://github.com/jonthornton/jquery-timepicker

jQuery以外には上記だけで読み込み可能()です。

小ネタ

inputのプロパティとしてreadonlyを有効にしているとライブラリが発動しないので気を付けましょう。 これで1時間ぐらい悩みました・・・

参考リンク

Googleカレンダー風に時間を入力「Timepicker for jQuery」 (←今回お世話になったリンクはこちら)

時間まで選択できるDatepickerプラグインTimepicker。を日本語化

-JavaScript, UI
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

アーカイブ