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

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 【JavaS …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

情報アーキテクチャの分類

今回は情報の分類に関して。 ようはソフトウェア上に情報をどのように配置するかということについてです。 参考書では情報を大きく4つに分けています。 Contents1 オブジェクトのリスト2 アクション …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

アーカイブ