Date Range Picker for Bootstrap の入力制御について

前提・実現したいこと

daterangepickerで初期で入力されているfromの日付が、今日以前だった場合にfromの入力値を変更不可（disabled）にしたいのですが方法がわかりません。（to は変更可能）
どうしても方法がわからないため、教えていただきたいです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<!-- Include Required Prerequisites -->
	<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
	 
	<!-- Include Date Range Picker -->
	<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
</head>
<body>
	<input type="text" name="daterange">

	<script>
	$('input[name="daterange"]').daterangepicker({
		locale: {
			format: 'YYYY-MM-DD'
		},
		startDate: '2018-04-10',
		endDate: '2018-04-18'
		});
	</script>
</body>
</html>

補足情報

http://www.daterangepicker.com/
コードやファイルにつきましては、こちらのサイトを参考にしております。

m.ts10806

2018/04/12 05:07

初期入力値はどのように決まるのでしょうか？

eeengineeeeeeer

2018/04/12 05:42 編集

初期入力値はDBからデータを取ってきたものセットしておく予定です

m.ts10806

2018/04/12 05:19

disabledで制限かけたところで外部からの入力は可能です。カレンダー選んだらその値が入ります。既に回答があるように設定で対応すべきでしょうね。（そもそも選べないように）

行動規範の内容に同意します

回答2件

ベストアンサー

単独で制限をかけるオプションはないようなので、変更時にsetStartDate()で修正したらどうでしょうか？
この場合、toがfromより前になることも出てくるので、setEndDate()も必要になってくるかもしれません。

JavaScript
1    $('input[name="daterange"]').daterangepicker({
2        locale: {
3            format: 'YYYY-MM-DD'
4        },
5        startDate: '2018-04-10',
6        endDate: '2018-04-18'
7    }).on('apply.daterangepicker', function(event, picker) {
8      $('input[name="daterange"]').data('daterangepicker').setStartDate('2018-04-10');
9      // setEndDateも？
10    });

投稿2018/04/12 05:11

x_x

総合スコア13749

公式のオプションを確認しましょう。
もともと用意されている機能です。

minDate

http://www.daterangepicker.com/

検索すればすぐに見つかるような内容なので
どうしても方法が分からない、というのを疑いたくなっちゃいますよ。
・実装参考
https://zxcvbnmnbvcxz.com/jquery-ui-datepicker-vol2/index.html

投稿2018/04/12 05:08

stampdoor

総合スコア483

eeengineeeeeeer

2018/04/12 05:17 編集

minDateを設定しても変更不可という挙動にはならない気がするのですが。。。もちろんminDateとmaxDateを両方指定すれば固定値になるので変更不可のような動きにはなりますが、fromのみを変更不可としたくtoに関しては変更可能としたいです。

stampdoor

2018/04/12 05:26 編集

minDateはdatepickerを選択不可にするオプションです。 inputに過去の日付を入力しようとしても今日の日付に戻されます。（今日、というかstartDateに設定された日付）あとはstartDateに今日の日付を自動処理で入るようにするようにすればよいと思います。それとも入力時は今日以前の日付を選択できるが、フォーカスが外れたときにdisabledにするということですか？

行動規範の内容に同意します

あなたの回答