質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.82%

  • PHP

    18246questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    14321questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6009questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    827questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Bootstrap 3 Datepickerで指定した日時をdisableにしたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 191

andy_dai1976

score 5

  Bootstrap 3 Datepickerで指定した日時をdisableにしたい。

 前提・実現したいこと

Laravel5.5を使って、システム開発を行っています。

日付を入力する箇所が2ヶ所あり(出発時刻、到着時刻)、それぞれに関して入力補助として Bootstrap 3 Datepicker を使用してカレンダー(日付と時間)を出すようにしています。

<!-- 出発時刻 -->
<input id="departure_time" type="text" class="form-control date_departure" name="departure_time" value="" placeholder="yyyy/mm/dd hh:mm" onkeyup="datetime()" >

<!-- 到着時刻 -->
<input id="arrival_time" type="text" class="form-control date_arrival" name="arrival_time" value="" placeholder="yyyy/mm/dd hh:mm" >


↓全体

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>◯◯システム</title>

<!-- Styles -->
<link href="http://localhost/css/app.css" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- Bootstrap DateTimePicker -->
<link rel="stylesheet" type="text/css" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css">

<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="moment-ja.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
</head>

<body>

<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">フライト追加</div>

<div class="panel-body">
</div>

<form class="form-horizontal" id="form_add_flight" name="form_add_flight" role="form" method="POST" action="confirm">
<input type="hidden" name="_token" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
<div id="_csrf_token_" hidden>XXXXXXXXXX</div>
<div id="_arrival_datetime_url_" hidden>http://localhost/arrival_datetime</div>
<div id="_departure_datetime_url_" hidden>http://localhost/departure_datetime</div>

<table class="table table-bordered horizontal-th">
<tr class="required">
<td colspan="2">
<div class="form-group">
<label for="departure_airport_id" class="col-md-4 control-label">出発空港</label>

<div class="col-md-6">
<select id="departure_airport_id" name="departure_airport_id" class="form-control" onChange="datetime('0')" >
<option value="1" >A空港</option>
<option value="2" >B空港</option>
<option value="3" >C空港</option>
・・・
<option value="99" >Y空港</option>
<option value="100" >Z空港</option>
</select>
</div>
</div>
</td>

<td colspan="2">
<div class="form-group">
<label for="arrival_airport_id" class="col-md-4 control-label">到着空港</label>

<div class="col-md-6">
<select id="arrival_airport_id" name="arrival_airport_id" class="form-control" onChange="datetime('0')" >
<option value="1" >A空港</option>
<option value="2" >B空港</option>
<option value="3" >C空港</option>
・・・
<option value="99" >Y空港</option>
<option value="100" >Z空港</option>
</select>
</div>
</div>
</td>
</tr>

<tr class="required">
<td colspan="2">
<div class="form-group">
<label for="departure_time" class="col-md-4 control-label">出発日時</label>
<div class="col-md-6">
<!-- 出発時刻 -->
<input id="departure_time" type="text" class="form-control date_departure" name="departure_time" value="" placeholder="yyyy/mm/dd hh:mm" >
</div>
</div>
</td>

<td colspan="2">
<div class="form-group">
<label for="arrival_time" class="col-md-4 control-label">到着日時</label>
<div class="col-md-6">
<div class="cal_datetime" id="cal_datetime">
<!-- 到着時刻 -->
<input id="arrival_time" type="text" class="form-control date_arrival" name="arrival_time" value="" placeholder="yyyy/mm/dd hh:mm" >
</div>
</div>
</div>
</td>
</tr>
</table>
</form>

<table class="table horizontal-th">
<tr>
<td style="padding-left:5px; text-align:center;">
<button type="button" class="btn btn-primary" onclick="post()">
<i class="fa fa-btn fa-search"></i> 次へ
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

</body>
</html>

呼び出されるJS側は

<script>
$(function () {
    $('.date_departure').datetimepicker({
        locale: 'ja',
        format : 'YYYY/MM/DD HH:mm',
        stepping: 15,
        sideBySide: true,
    });
});

$(function () {
    $('.date_arrival').datetimepicker({
        locale: 'ja',
        format : 'YYYY/MM/DD HH:mm',
        stepping: 15,
        sideBySide: true,
    });
});
</script>


となっています。

出発時刻が入力された場合 datetime() という別のJavaScriptの処理が呼び出され、Ajax にて出発時刻と所要時間から到着時刻が計算され、その値がarrival_timeのフォームに格納されます。

Ajaxでは

$.ajax({
type: 'POST',
contentType: false,
processData: false,
url: send_url,
data: formData,
success: function(data) {
$('#arrival_time').data("DateTimePicker").date(data);
$('#arrival_time').data("DateTimePicker").disabledDates(['2018-04-23', '2018-04-24']);
},
error: function(data) {
alert('エラーが発生しました。');
},
});

この時、disabledDates で指定した日付について指定不可としているのですが、こちらに時間を加えた日時で指定不可に変更したいと考えています。

 試したこと

「$('#arrival_time').data("DateTimePicker").disabledDates(['2018-04-23 10:00', '2018-04-24 13:00']);」としましたが、日付は指定不可(2018-04-23、2018-04-24は指定不可)とこれまで通りで、時間の部分は反映されませんでした。
⇒2018-04-23 10:00、2018-04-24 13:00 とピンポイントで指定不可としたい。

ドキュメント(http://eonasdan.github.io/bootstrap-datetimepicker/Functions/)を確認しましたが、直接指定できる項目は見つかりませんでした。
ただ、もし同様の課題を解決されている方がいらっしゃいましたら、方法をご教示いただければと思います。

 補足情報(FW/ツールのバージョンなど)

◆動作環境
・Windows10 Pro 64bit
・Apache2.4
・PHP7.1
・Laravel5.5
・MySQL5.7
・Bootstrap 3 Datepicker
http://eonasdan.github.io/bootstrap-datetimepicker/

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

オプションのdisabledTimeIntervalsでできますが、まず、バージョンが古いのでこの機能が追加された4.14.30以降に上げなければいけません。
http://eonasdan.github.io/bootstrap-datetimepicker/Changelog/

$('#arrival_time').data("DateTimePicker").disabledTimeIntervals([[moment('2018-04-23 10:00'), moment('2018-04-24 11:00')]]);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/24 19:15 編集

    コメントありがとうございます。
    バージョンが古かったため、適用されなかったのですね。
    バージョンを上げて、確認してみます。

    …最近のバージョンって、CDN対応していないのですね(汗

    キャンセル

  • 2018/04/24 21:16

    バージョンアップ(現時点での最新 4.17.37 にしてみました)した後、所定のコード
    $('#arrival_time').data("DateTimePicker").disabledTimeIntervals([[moment('2018-04-23 10:00'), moment('2018-04-24 11:00')]]);
    を追加した所、入力制限を実現することができました。
    ⇒上記ですと 2018/4/23 10:00~2018/4/24 11:00 が選択できなくなります。

    ありがとうございました。

    キャンセル

+1

試したわけではないのでドキュメントを読んだ回答で申し訳ないのですが、下記は使えませんでしょうか?

momentが引数なので、うまく日付時間を渡せればいけそうに思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/23 13:00

    ご回答ありがとうございます。
    ↓以下のように実装して試してみました。

    $.ajax({
    type: 'POST',
    contentType: false,
    processData: false,
    url: send_url,
    data: formData,
    success: function(data) {
    $('#arrival_time').data("DateTimePicker").date(data);
    $('#arrival_time').data("DateTimePicker").disabledTimeIntervals([[moment('2018-04-23 10:00'), moment('2018-04-23 10:00')], [moment('2018-04-24 11:00'), moment('2018-04-24 11:00')]]);
    },
    error: function(data) {
    alert('エラーが発生しました。');
    },
    });

    ↓結果ですが
    「TypeError: $(...).data(...).disabledTimeIntervals is not a function」というエラーで止まってしまいました。

    キャンセル

  • 2018/04/23 13:08

    datetimepicker()のオプションなのでdata属性に対して入れるものではなさそうです。

    $('#date_arrival').datetimepicker({
    disabledTimeIntervals:[設定値]
    });

    キャンセル

  • 2018/04/23 13:39

    ご返信ありがとうございます。

    > datetimepicker()のオプションなのでdata属性に対して入れるものではなさそうです。

    そうなんですね。てっきりFunctionsの項目に入っていたので、functionだと思っていました。
    (For example: にはオプション指定の説明書きはありましたが…)

    先程の内容を

    $('#arrival_time').data("DateTimePicker").disabledTimeIntervals([[moment('2018-04-23 10:00'), moment('2018-04-23 10:00')], [moment('2018-04-24 11:00'), moment('2018-04-24 11:00')]]);



    $('#arrival_time').datetimepicker({
    disabledTimeIntervals: [[moment('2018-04-23 10:00'), moment('2018-04-23 10:00')], [moment('2018-04-24 11:00'), moment('2018-04-24 11:00')]]
    });

    に変更して確認しました。

    エラーは発生しなくなりましたが、disabledTimeIntervals で指定した日時が、特に制限がかかる事なく、通常通り選択できる状況です。

    キャンセル

  • 2018/04/23 13:40

    ふーむなるほど・・・。
    ドキュメントざっと読んだときにはいけそうに思ったのですが、早とちりを失礼しました。
    ちょっと私のほうでも簡単に作って確認してみます。

    キャンセル

  • 2018/04/23 13:47

    すいません。お手数おかけします。
    私の方でも何か進展がありましたら、投稿させていただきます。
    よろしくお願いいたします。

    キャンセル

  • 2018/04/23 14:39

    ちなみに該当架所以外のHTMLってどのように組まれていますか?
    可能な範囲で周辺のHTMLも追記していただきたいのですが・・・

    キャンセル

  • 2018/04/23 15:34 編集

    ↓一部編集しておりますが、以下の通りです(HTMLに限定しています)。
    ※本文に転記しました。

    キャンセル

  • 2018/04/23 15:17 編集

    あ、コードブロックの関係もあるので、お手数なのですが質問本文に添付していただいた方がありがたいです(他の見ている人もすぐ目に付くので)

    キャンセル

  • 2018/04/23 15:33

    ご返信ありがとうございます。
    本文にも転記いたしました。
    よろしくお願いいたします。

    キャンセル

  • 2018/04/23 15:44

    「ピンポイントで指定不可」なので例で言えば4/24は選択できる ということですよね
    また、日付が違えば、その時刻は選択できる ですよね

    キャンセル

  • 2018/04/23 17:43

    そうですね。

    例えば [moment('2018-04-23 10:00'), moment('2018-04-23 10:00')] なら、2018-04-23 10:00 は指定できませんが、その他の時間帯であれば 2018-04-23 は指定可能。
    他の日付であれば、10:00 でも指定は可能…というイメージです。

    更に言えば、[moment('2018-04-23 10:00'), moment('2018-04-23 11:00')] であれば、2018-04-23 の 10:00~11:00 で指定不可です。

    キャンセル

  • 2018/04/24 21:18

    どうやら、指定していたバージョンが古かったのが原因だった様です。
    色々とご相談にのっていただき、ありがとうございました。

    キャンセル

  • 2018/04/25 05:36

    解決できたようで何よりです。
    何事も基本は最新を使うのが一番ですね^^;

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    18246questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    14321questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6009questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    827questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。