勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

bootstrap-datetimepickerについて

      2014/07/02

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、
普通のセレクトメニューを使うことが多い。

ただ、探しているとデザイン的に好みのものがあったのでメモ。
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

  関連記事

jquery_logo
FullCalendarでtitle以外も表示させたい

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

jquery_logo
jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

jquery_logo
jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

jquery_logo
簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...

jquery_logo
フォームのpasswordとtextをjQueryで切り替えて

パスワード入力の際、大抵「●●●」みたいな形で隠されるが、 jQueryでそれを ...

jquery_logo
クリップボードの操作

<? /* クリックでクリップボードにコピーする。 http://zxcv ...

jquery_logo
imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

jquery_logo
jQueryで要素のleftやwidthを取得

jQueryで要素のposition(leftやtop)とwidthとheigh ...

jquery_logo
画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

jquery_logo
画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...