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でのjQueryライブラリの読み込み+datepickerメモ

npm経由でjQueryやDatepickerなど一般的なライブラリをrequireしてビルドする手法について。 以前も下記エントリーで書きましたが、再学習。 npmでのJSライブラリインストール&ビ …

no image

vueでのコンポーネント間の変数のやりとりに関して

vueをコツコツと勉強していますが、コンポーネント間で変数の受け渡しをしたいときなどは色々注意が必要かと思います。 個人的には下記のような解釈で組んでおります。 Contents1 vuex2 syn …

no image

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

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

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

no image

AngularJSでのHtmlFormオプション+Filter

AngularJSにてHTMLのFormオプションの書き方など。 Contents1 HTMLオプション1.1 プルダウン1.1.1 配列型1.1.2 ラベル型1.2 チェックボックス1.3 ラジオ1 …

アーカイブ