勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

   2024/01/08  jQuery Bootstrap JavaScript CSS

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメニューを使うことが多い。ただ、探しているとデザイン的に好みのものがあったのでメモ。bootstrap使用なので管理側でしか使えなさそうではある。

 

サンプル

http://sample.taitan916.info/datetimepicker/

 

ダウンロード先

http://tarruda.github.io/bootstrap-datetimepicker/

 

ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="./bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
language: 'en',
});
});
</script>
<title>bootstrap-datetimepicker</title>
</head>
<body>
<h1>bootstrap-datetimepicker</h1>
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</body>
</html>

 

注意点

ローカル環境だとjquery1.7.2で上手いこと動かなかった。バージョンに気をつける。

 - jQuery Bootstrap JavaScript CSS

  関連記事

SB Adminよりシンプル&軽量なBootstrap系ダッシュボードのテンプレートについて

ダッシュボード(管理画面)を作る際、SB Adminというテンプレートを利用する ...

CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成

CodeIgniter4.4.4&Bootstrap&jQuer ...

Bootstrap5系でよく使う要素及びClass名のまとめ記事

サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...

管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート

新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...

IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...