Bootstrap Material DatePickerについて
こちらの記事は、Bootstrap Material DatePickerというデートピッカー、タイムピッカー ライブラリについて紹介します。
こちらのライブラリは、BootstrapというJavascriptフレームワークで使用するために開発されたものです。
ただ、Bootstrapフレームワークが無くても実装可能で、設定方法も難しくないので、
ぜひ、試してみて下さい。
デモページはこちらです。
[ Bootstrap Material DatePicker ]
Bootstrap Material DatePickerの設定方法
デートピッカー・タイムピッカーの設定
以下を<head>～</head>内に追加して下さい。
※CDNにキャッシュされているファイルを読み込みます。
<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>
さらに、以下のJavascriptコードを<head>～</head>内に追加して下さい。
<script>
$(function(){
$("#picker").bootstrapMaterialDatePicker({
weekStart:0,
format:"YYYY-MM-DD HH:mm"
});
});
</script>
※表示フォーマットを変更する場合には、formatの部分を変更して下さい。
で、以下のHTMLを<body>～</body>内に追加して下さい。
<input type="text" id="picker">
設定はこれだけです。
ブラウザから設置先画面にアクセスして、表示されているテキストボックス内をクリックしてみて下さい。
デートピッカーが立ち上げれば、問題なく設定できています。
この通りに追加して貰えれば動作すると思いますが、
念の為に、以下にソースをまとめておきます。
<!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のコードを以下の様に変更して下さい。
<script>
$(function(){
$("#picker").bootstrapMaterialDatePicker({
weekStart:0,
lang:"ja",
format:"YYYY-MM-DD HH:mm"
});
});
</script>
※「lang:"ja"」を指定します。
これで、カレンダーが日本語表示になります。
念の為ソースをまとめておきます。
<!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><!-- moment.jsを使って日本語対応 -->
<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>
デートピッカーのみの設定
デートピッカーのみを使用したい場合には、Javascriptのコードを以下の様に変更して下さい。
<script>
$(function(){
$("#picker").bootstrapMaterialDatePicker({
weekStart:0,
lang:"ja",
time:false,
format:"YYYY-MM-DD"
});
});
</script>
※「time:false」を指定します。
タイムピッカーのみの設定
上記では、デートピッカーのみの設定方法について説明しましたが、
タイムピッカーのみの設定の場合には、Javascriptのコードを以下の様に変更して下さい。
<script>
$(function(){
$("#picker").bootstrapMaterialDatePicker({
lang:"ja",
date:false,
format:"HH:mm"
});
});
</script>
※「date:false」を指定します。
選択出来る日付の範囲を指定
選択出来る日付の範囲を指定した場合には、Javascriptのコードを以下の様に変更して下さい。
<script>
$(function(){
$("#picker").bootstrapMaterialDatePicker({
lang:"ja",
format:"YYYY-MM-DD HH:mm",
minDate:moment(), //本日～
maxDate:moment().add(7, "days") //7日後まで
});
});
</script>
※minDateとmaxDateを指定します。
最後に
簡単に、Bootstrap Material DatePickerの設定方法についてまとめてみましたが、
今回は、以下のサイトを参考にさせて頂いています。
[ Design Link Work ]
また、GitHubにもソースが上がっています。
[ GitHub ]
GitHubにもオプションの説明が記載されているので、そちらも参考にして下さい。
もっと細かい設定が出来ると思います。
