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

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

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

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …