datetimepickerを使用してユーザーに日時と時間を指定させ、それをサーバーに保管させたいです。
下記のソースでdatetimepickerそのものは稼働します。
ここで得られた日時の値をサーバーのデータベースに保存させようにしています。
問題点
サーバーに保存させるには<input type="hidden" name="datetime" value="">のように
name属性が必要となるはずですが、datetimepickerではname属性のソースが見当たりません。
どこにname属性を仕込んめば、ユーザーが選択した日時をpostできるようになりますでしょうか?
皆さんが当たり前に使用しているはずなのですが、google様に確認しても見当たりませんでした。
よろしくお願いいたします。
php
1 2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 3<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 4<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> 5<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 6<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 7<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 8<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" /> 9例 10index.html 11<html> 12 <head> 13 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 14 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" /> 15 </head> 16 <body> 17 <div class="container"> 18 <div class="row"> 19 <div class='col-sm-6'> 20 <div class="form-group"> 21 <div class='input-group date' id='datetimepicker1'> 22 <input type='text' class="form-control" /> 23 <span class="input-group-addon"> 24 <span class="glyphicon glyphicon-calendar"></span> 25 </span> 26 </div> 27 </div> 28 </div> 29 </div> 30 </div> 31 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 32 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 33 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> 34 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 35 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 36 37<form action="dateget.php" method="post"> 38 39 <script type="text/javascript"> 40 $(function () { 41 $('#datetimepicker1').datetimepicker(); 42 }); 43 </script> 44 <script type="text/javascript"> 45// 日付が変更された時のイベント設定 46onSelect: function(dateText, inst){ 47 // 選択日をYYYYMMDD形式でformに設定 48 document.getElementById('selectDate').value = formatDateToString(new Date(inst.currentYear, inst.currentMonth, inst.currentDay)); 49 // submit()でフォームの内容を送信 50 $('#echoForm').submit(); 51} 52 </script> 53 54<button type="submit" class="btn btn-lg btn-block btn-primary">発注</button> 55 56</form> 57
あなたの回答
tips
プレビュー