JavaScript

Javascript

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

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にもオプションの説明が記載されているので、そちらも参考にして下さい。
もっと細かい設定が出来ると思います。

関連記事

  1. JavaScript

    Javascript

    getPanoramaByLocation()メソッド

    前回の続きで、ストリートビュー未対応地域を想定した…

  2. JavaScript

    Javascript

    history.back()

    履歴を残したまま全ページに戻りたい場合、history.back(…

  3. JavaScript

    Javascript

    zoomi.jsでオンマウス時に画像を拡大

    画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼…

  4. JavaScript

    Javascript

    Google マップのストリートビューを実装してみました!!

    Google マップのストリートビューを実装してみました。&nbs…

  5. JavaScript

    Javascript

    flatpickr【デートピッカー用ライブラリ】

    flatpickrについて先日、という日付け選択用のデート…

  6. JavaScript

    Javascript

    Geolocation APIで位置情報を取得して、Yahoo!地図を表示

    Geolocation APIを使って位置情報を取得して、Yaho…

最近の記事

  1. PHP
  2. PHP
  3. 風邪予防
  4. WordPress(WP)
  5. PHP
  6. 宅建
  7. アンチWP
  8. 日本語ドメイン
  9. WordPress(WP)
  10. SSL(HTTPS通信)
PAGE TOP