実現したいこと
PHP(Laravel 5.8)のViewファイル上にてDB内の日時(punchIn:画像参照)を取得し表示する。その際、日時部分だけプルダウンにする。
※DB→MySQL
※日時のデータ型→Datetime
※データベース内のとあるレコード
背景
□打刻システムを作成している
□打刻時間(punchIn)をあとで編集したい
□編集をよりやりやすくしたい
状況
DBのpunchInカラムの日時(datetime型)を画像の1、2のように表記するのに複雑なことはない。
Controller
1public function edit(Request $request, $id) 2{ 3 $task = Task::findOrFail($id); 4 return view('records.edit', compact('task')); 5}
View
11を出力するには、<p>{{ $task->punchIn }}</p> 22を出力するには、<input type="datetime" value={{ $task->punchIn }}>
2の表記だと表示した「2019-10-25 00:53:34」の日時を編集することが可能。
別途追記すれば編集後の日時を再度DBへ保存することができる!!
(※しかし、日時編集はタイピングになるので超面倒・・)
理想
理想は画像の「出勤時間」のようにしたい。
・「出勤時間」の2019-10-25部分はクリックするとカレンダー表記
・「日時」はプルダウン化
・「秒」は邪魔なので表記不要
いかにjQueryなどを使用しスマートに実装できるか知恵をいただけませんでしょうか??
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
いかにjQueryなどを使用しスマートに実装できるか知恵をいただけませんでしょうか??
datepicker以外、jQueryは不要です。
view
1 2<div class="form-group row"> 3 <label class="col-md-3">出勤時間</label> 4 <input type="date" name="date"> 5 <select name='hour'> 6 @foreach(range(0, 23) as $hour) 7 <option value='{{ $hour }}' 8 @if(old('hour') == $hour) selected @endif 9 >{{ $hour }}</option> 10 @endforeach 11 </select>時 12 <select name='minute'> 13 @foreach(range(0, 59) as $minute) 14 <option value='{{ $minute }}' 15 @if(old('minute') == $minute) selected @endif 16 >{{ $minute }}</option> 17 @endforeach 18 </select>分 19</div> 20 21<script> 22$(function(){ 23 $('input[name=date]').datepicker({ 24 dateFormat: 'yy-mm-dd', 25 }); 26}); 27</script>
投稿2019/10/26 16:21
退会済みユーザー
総合スコア0
0
###わかったこと
1、punchInの「2019-10-15 00:53:34」は取得後に分解できる
2、編集後のpunchInの日時は、元の形式(yyyy-mm-dd hh:mm:ss)で保存しなければエラーになる。 ※DBでpunchInはDatetime型で定義したので
###(自分なりの)解決方法
View
1 2<div class="form-group row"> 3 <label class="col-md-3">出勤時間</label> 4 <input type="hidden" id="punchIn" name="punchIn" 5 value="{{ old('punchIn', $task->punchIn) }}"> 6 <input type="text" id="punchInYmd"> 7 <select id="selectPunchInHour"></select>時 8 <select id="selectPunchInMinute"></select>分 9</div> 10
jQuery
1$(function(){ 2 3 //時分のプルダウン 4 var hh = [ 5 '00', 6 '01', 7 '02', 8 '03', 9 '04', 10 '05', 11 '06', 12 '07', 13 '08', 14 '09', 15 '10', 16 '11', 17 '12', 18 '13', 19 '14', 20 '15', 21 '16', 22 '17', 23 '18', 24 '19', 25 '20', 26 '21', 27 '22', 28 '23', 29 ]; 30 31 var mm = [ 32 '00', 33 '01', 34 '02', 35 '03', 36 '04', 37 '05', 38 '06', 39 '07', 40 '08', 41 '09', 42 '10', 43 '11', 44 '12', 45 '13', 46 '14', 47 '15', 48 '16', 49 '17', 50 '18', 51 '19', 52 '20', 53 '21', 54 '22', 55 '23', 56 '24', 57 '25', 58 '26', 59 '27', 60 '28', 61 '29', 62 '30', 63 '31', 64 '32', 65 '33', 66 '34', 67 '35', 68 '36', 69 '37', 70 '38', 71 '39', 72 '40', 73 '41', 74 '42', 75 '43', 76 '44', 77 '45', 78 '46', 79 '47', 80 '48', 81 '49', 82 '50', 83 '51', 84 '52', 85 '53', 86 '54', 87 '55', 88 '56', 89 '57', 90 '58', 91 '59', 92 ]; 93 94 // -------------------------- 95 //「2019-10-15 00:53:34」をhhhh-mm-dd、hh、mm、ssに分解 96 var punchIn = $('#punchIn').val(); 97 var punchInSplit = punchIn.split(' '); 98 var punchInYmd = punchInSplit[0]; 99 var punchInHis = punchInSplit[1]; 100 var punchInHisSplit = punchInHis.split(':'); 101 var phnchInH = punchInHisSplit[0]; 102 var phnchInM = punchInHisSplit[1]; 103 var phnchInS = punchInHisSplit[2]; 104 105 // -------------------------- 106 //<select>タグのデフォルト値(hh)を設定 107 var hh, 108 $selectPunchInHour = $('#selectPunchInHour'), 109 $optionPunchInHours, 110 optionsPunchInHours, 111 isSelectedPunchInHour; 112 optionsPunchInHours = $.map(hh, function(name, value){ 113 isSelectedPunchInHour = (name === phnchInH); 114 $optionPunchInHours = $('<option>', {value: value, text: name, selected: isSelectedPunchInHour}); 115 return $optionPunchInHours; 116 }); 117 118 $selectPunchInHour.append(optionsPunchInHours); 119 120 // -------------------------- 121 //<select>タグのデフォルト値(mm)を設定 122 var mm, 123 $selectPunchInMinute = $('#selectPunchInMinute'), 124 $optionPunchInMinutes, 125 optionsPunchInMinutes, 126 isSelectedPunchInMinute; 127 optionsPunchInMinutes = $.map(mm, function(name, value){ 128 isSelectedPunchInMinute = (name === phnchInM); 129 $optionPunchInMinutes = $('<option>', {value: value, text: name, selected: isSelectedPunchInMinute}); 130 return $optionPunchInMinutes; 131 }); 132 133 $selectPunchInMinute.append(optionsPunchInMinutes); 134 135 // -------------------------- 136 //<input type="text" id="punchInYmd">にカレンダーを設定 137 $('#punchInYmd').val(punchInYmd); 138 $('#punchInYmd').datepicker({ 139 dateFormat: 'yy-mm-dd', 140 }); 141 142 143 // -------------------------- 144 //id=editBtnのボタンクリックしたら編集した年月日時分秒を全て繋げて 145 //[2019-10-15 00:53:34]と同じ形式にする 146 $('#editBtn').click(function(){ 147 var punchInYmdEdited = $('#punchInYmd').val(); 148 var punchInHEdited = $('select[id=selectPunchInHour] > option:selected').text(); 149 var punchInMEdited = $('select[id=selectPunchInMinute] > option:selected').text(); 150 $('#punchIn').val(punchInYmdEdited + ' ' + punchInHEdited + ':' + punchInMEdited + ':' + phnchInS); 151 }); 152 153 154 155}); 156
jQueryに関しては絶対もっとキレイな書き方があるのだろうが、
今のレベルでは到達できない。一応動きとしては
●試しにpunchInを「2019-10-15 00:53:34」
↓
「2019-10-14 23:59:34」に変更しDBへ保存すると・・
無事punchInカラムの日時(datetime型)を変更することに成功しました。
・・が、もっとキレイなコード書けるように頑張らねばならない。
以上
投稿2019/10/26 16:02
総合スコア14
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/26 17:20 編集
退会済みユーザー
2019/10/27 08:05 編集
2019/10/27 13:20
退会済みユーザー
2019/10/27 13:29
2019/10/27 14:43