前提・実現したいこと
modaalでモーダルを開きそのモーダルの中のフォームでpickadate.jsによって日付を変更したいができない。
そのためmodaalの公式サイトからafter_openやafter_close、before_closeなどを試しましたが動きませんでした。
そこでこのmodaal場でpickadate.jsが機能するオプション設定をご教授いただけると幸いです。
よろしくお願い致します。
-----追記-----
起きている現象:日時を入力するフォームをクリックしてもpickadate.jsのカレンダーが起動しない。
実現したいこと:日時を入力するフォームをクリックするとpickadate.jsのカレンダーが起動し、そこで選択した日時が
フォーム内に入力される。
そしてmodaalによるモーダルを閉じて再びmodaalによるモーダルを表示した際も再び日時を編集できるようにする。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
php
1<div class="scheduleEdit"> 2 <a href="#modal" class="modal">集活内容を編集する</a> 3</div> 4 5<div id="modal" style="display:none;"> 6 7<?php 8echo '<form action="output.php" method="post" enctype="multipart/form-data"> 9 <h4>内容を編集</h4> 10 11 <dl> 12 <dt>日付</dt> 13 <dd><input type="text" class="datepicker" id="date_box" name="date" value="'.$row['date'].':'.$row['youbi'].'" required></dd> 14 </dl> 15 16 <dl> 17 <dt>時間</dt> 18 <dd><input type="text" class="timepicker" id="time_box" name="time" value="'.$row['time'].'" required></dd> 19 </dl> 20 21 <input type="submit" id="login" name="login" value="確認して作成"> 22 23 </form>'; 24 25?> 26 27</div> 28 29 30<script> 31 32 function myFunction() { 33 $('#date_box').pickadate({ 34 format: 'yyyy-mm-dd:ddd' 35 }); 36 $('#time_box').pickatime({ 37 format: 'HH:i', // 24時間表記 38 interval: 30, // 表示間隔 39 min: [10,00], // 予約開始時間 40 max: [20,00] // 予約終了時間 41 }); 42} 43 44 45 function ff() { 46 var tt = document.getElementsByClassName('datepicker'); 47 tt.readOnly = true; 48 } 49 50 $('.modal').modaal({ 51 after_close: ff, 52 after_open: myFunction, 53 }); 54</script>
補足情報(FW/ツールのバージョンなど)
PHP のバージョン: 7.1.13