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

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. レンタルサーバ:おすすめの共用サーバ
  2. ホームページ(homepage)
  3. システムアップデート
  4. エックスサーバー(XSERVER)
  5. エックスサーバー(XSERVER)
  6. エックスサーバー(XSERVER)
  7. WEBサイト構築
  8. スパム(SPAM)対策
  9. サイト公開
  10. ネームサーバーの登録

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

  • ブログのプロフィールなんかで使用するキャラクター用のイラストが完成しました。プロの方に頼むとめっちゃ男前に作ってくれたから、見栄はってるみたいではずかしいけど、取りあえずこれで運用開始です。 あとは、Twitterのアイコンも現在作成して貰ってる最中やから、来週中には完成しそう!
    about 18時間 ago via Twitter Web App

アーカイブ

PAGE TOP