Bootstrap Material DatePicker【デートピッカー・タイムピッカー】

コンテンツ

Bootstrap Material DatePickerについて

こちらの記事は、Bootstrap Material DatePickerというデートピッカー、タイムピッカーライブラリについて紹介します。

こちらのライブラリは、BootstrapというJavascriptフレームワークで使用するために開発されたものです。

ただ、Bootstrapフレームワークが無くても実装可能で、設定方法も難しくないので、
ぜひ、試してみて下さい。

デモページはこちらです。
[ Bootstrap Material DatePicker ]

Bootstrap Material DatePickerの設定方法

デートピッカー・タイムピッカーの設定

以下を<head>～</head>内に追加して下さい。
※CDNにキャッシュされているファイルを読み込みます。

さらに、以下のJavascriptコードを<head>～</head>内に追加して下さい。

※表示フォーマットを変更する場合には、formatの部分を変更して下さい。

で、以下のHTMLを<body>～</body>内に追加して下さい。

設定はこれだけです。

ブラウザから設置先画面にアクセスして、表示されているテキストボックス内をクリックしてみて下さい。
デートピッカーが立ち上げれば、問題なく設定できています。

この通りに追加して貰えれば動作すると思いますが、
念の為に、以下にソースをまとめておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap Material DatePicker デモ</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>

<script>
$(function(){
$("#picker").bootstrapMaterialDatePicker({
weekStart:0,
format:"YYYY-MM-DD HH:mm"
});
});
</script>
</head>
<body>

<input type="text" id="picker">

</body>
</html>

Bootstrap Material DatePicker　デモ

日本語化対応

こちらのスクリプトは、日本語化にも対応しています。

まず、以下を<head>～</head>内に追加して下さい。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/ja.js"></script>
※bootstrap-material-datetimepicker.min.jsの上に読み込んで下さい。

次に、Javascriptのコードを以下の様に変更して下さい。

これで、カレンダーが日本語表示になります。
念の為ソースをまとめておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap Material DatePicker デモ</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/ja.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>

<script>
$(function(){
$("#picker").bootstrapMaterialDatePicker({
weekStart:0,
lang:"ja",
format:"YYYY-MM-DD HH:mm"
});
});
</script>
</head>
<body>

<input type="text" id="picker">

</body>
</html>