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

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript

    Javascript

    Yahoo!地図のWeb APIを使ってみました!!

    弊社では今までGoogleMapしか使ってこなかったのですが、使用…

  2. JavaScript

    Javascript

    videoタグを使用する際には、html5mediaもご一緒に!!

    動画をサイト上に載せる場合、HTML5でのコーディングがメインにな…

  3. JavaScript

    Javascript

    写真の右クリックコピーを禁止!!

    弊社は不動産会社様にホームページを提供する機会が多いのですが、その…

  4. JavaScript

    Javascript

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

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

  5. JavaScript

    Javascript

    画像 右クリックでのダウンロードは禁止!!

    普段物件画像を取り扱うシステムを構築することが多いんですが、不動産…

  6. JavaScript

    Javascript

    「REQUEST_DENIED」というエラーコード...

    GoogleMap APIを利用してマップ表示させたいのですが、&…

最近の記事

  1. レンタルサーバ
  2. コピペ(Copy and Paste)
  3. Check Copy Contents(CCC)
  4. WordPress(WP)
  5. セキュリティ
  6. セキュリティ
  7. THE THOR(ザ・トール)
  8. SONY α6400の本体
  9. THE THOR(ザ・トール)
  10. 短縮URL
PAGE TOP