Bootstrap 3 Datepickerで指定した日時をdisableにしたい。
前提・実現したいこと
Laravel5.5を使って、システム開発を行っています。
日付を入力する箇所が2ヶ所あり（出発時刻、到着時刻）、それぞれに関して入力補助として Bootstrap 3 Datepicker を使用してカレンダー（日付と時間）を出すようにしています。
HTML
1<!-- 出発時刻 -->
2<input id="departure_time" type="text" class="form-control date_departure" name="departure_time" value="" placeholder="yyyy/mm/dd hh:mm" onkeyup="datetime()" >
3
4<!-- 到着時刻 -->
5<input id="arrival_time" type="text" class="form-control date_arrival" name="arrival_time" value="" placeholder="yyyy/mm/dd hh:mm" >
↓全体
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7
8<title>◯◯システム</title>
9
10<!-- Styles -->
11<link href="http://localhost/css/app.css" rel="stylesheet">
12<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
13
14<!-- jQuery -->
15<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
16<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
17
18<!-- Bootstrap DateTimePicker -->
19<link rel="stylesheet" type="text/css" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
20<link rel="stylesheet" href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css">
21
22<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
23<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
24<script src="moment-ja.js"></script>
25<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
26</head>
27
28<body>
29
30<div class="container">
31<div class="row">
32<div class="col-md-10 col-md-offset-1">
33<div class="panel panel-default">
34<div class="panel-heading">フライト追加</div>
35
36<div class="panel-body">
37</div>
38
39<form class="form-horizontal" id="form_add_flight" name="form_add_flight" role="form" method="POST" action="confirm">
40<input type="hidden" name="_token" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
41<div id="_csrf_token_" hidden>XXXXXXXXXX</div>
42<div id="_arrival_datetime_url_" hidden>http://localhost/arrival_datetime</div>
43<div id="_departure_datetime_url_" hidden>http://localhost/departure_datetime</div>
44
45<table class="table table-bordered horizontal-th">
46<tr class="required">
47<td colspan="2">
48<div class="form-group">
49<label for="departure_airport_id" class="col-md-4 control-label">出発空港</label>
50
51<div class="col-md-6">
52<select id="departure_airport_id" name="departure_airport_id" class="form-control" onChange="datetime('0')" >
53<option value="1" >A空港</option>
54<option value="2" >B空港</option>
55<option value="3" >C空港</option>
56・・・
57<option value="99" >Y空港</option>
58<option value="100" >Z空港</option>
59</select>
60</div>
61</div>
62</td>
63
64<td colspan="2">
65<div class="form-group">
66<label for="arrival_airport_id" class="col-md-4 control-label">到着空港</label>
67
68<div class="col-md-6">
69<select id="arrival_airport_id" name="arrival_airport_id" class="form-control" onChange="datetime('0')" >
70<option value="1" >A空港</option>
71<option value="2" >B空港</option>
72<option value="3" >C空港</option>
73・・・
74<option value="99" >Y空港</option>
75<option value="100" >Z空港</option>
76</select>
77</div>
78</div>
79</td>
80</tr>
81
82<tr class="required">
83<td colspan="2">
84<div class="form-group">
85<label for="departure_time" class="col-md-4 control-label">出発日時</label>
86<div class="col-md-6">
87<!-- 出発時刻 -->
88<input id="departure_time" type="text" class="form-control date_departure" name="departure_time" value="" placeholder="yyyy/mm/dd hh:mm" >
89</div>
90</div>
91</td>
92
93<td colspan="2">
94<div class="form-group">
95<label for="arrival_time" class="col-md-4 control-label">到着日時</label>
96<div class="col-md-6">
97<div class="cal_datetime" id="cal_datetime">
98<!-- 到着時刻 -->
99<input id="arrival_time" type="text" class="form-control date_arrival" name="arrival_time" value="" placeholder="yyyy/mm/dd hh:mm" >
100</div>
101</div>
102</div>
103</td>
104</tr>
105</table>
106</form>
107
108<table class="table horizontal-th">
109<tr>
110<td style="padding-left:5px; text-align:center;">
111<button type="button" class="btn btn-primary" onclick="post()">
112<i class="fa fa-btn fa-search"></i> 次へ
113</button>
114</td>
115</tr>
116</table>
117</div>
118</div>
119</div>
120</div>
121
122</body>
123</html>
呼び出されるJS側は
JavaScript
1<script>
2$(function () {
3 $('.date_departure').datetimepicker({
4 locale: 'ja',
5 format : 'YYYY/MM/DD HH:mm',
6 stepping: 15,
7 sideBySide: true,
8 });
9});
10
11$(function () {
12 $('.date_arrival').datetimepicker({
13 locale: 'ja',
14 format : 'YYYY/MM/DD HH:mm',
15 stepping: 15,
16 sideBySide: true,
17 });
18});
19</script>
となっています。
出発時刻が入力された場合 datetime() という別のJavaScriptの処理が呼び出され、Ajax にて出発時刻と所要時間から到着時刻が計算され、その値がarrival_timeのフォームに格納されます。
Ajaxでは
Ajax処理
1$.ajax({
2type: 'POST',
3contentType: false,
4processData: false,
5url: send_url,
6data: formData,
7success: function(data) {
8$('#arrival_time').data("DateTimePicker").date(data);
9$('#arrival_time').data("DateTimePicker").disabledDates(['2018-04-23', '2018-04-24']);
10},
11error: function(data) {
12alert('エラーが発生しました。');
13},
14});
この時、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/
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/24 10:15 編集
2018/04/24 12:16