【Laravel 5.8】view上で<input type="datetime">の年月日時分秒の表記をセレクトボックス表記に変化させる

実現したいこと

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などを使用しスマートに実装できるか知恵をいただけませんでしょうか？？

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

回答2件

ベストアンサー

いかに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

sumAA

2019/10/26 17:20 編集

Kosuke_Shibuya様こんばんは。コードまでガッツリ記述いただきありがとうございます！！ > @foreach(range(0, 23) as $hour) 勉強不足としか言いようがありませんが、range()を使用してこんなことができるとは目から鱗でした。 > <input type="date" name="date"> UIはイマイチですが、これだけでもdatepickerの類似機能が既に実装されていて驚きしかありませんでした！！ > jQueryは不要です。 controllerの該当Action内などでDBから取得したdatetime型データ「質問内の例なら2019-10-25 00:53:34」をexplode関数などで分解して変数に代入。それをView内でselectedにしてしまえるとすれば（ここはまだテストしていませんが）、確かにjQueryでの膨大な記述が不要になりますね！！いただいたメッセージを通じて、 HTMLやPHPをもっと勉強しないとフレームワークの真価を全然発揮できないことを痛感しました（まさに豚に真珠状態・・涙）。これからもっと精進していきます。ありがとうございました！！

退会済みユーザー

2019/10/27 08:05 編集

> 「質問内の例なら2019-10-25 00:53:34」をexplode関数などで分解して変数に代入。そんなことしなくても、carbonで処理すればもっとキレイにかけますよ。

sumAA

2019/10/27 13:20

> そんなことしなくても、carbonで処理すればもっとキレイにかけますよ。こんばんは。コメントありがとうございます。 Carbon::parse($task->punchIn)->format('H')などで分解は確かにできますよね。次の問題が連結→DB再保存となるのですが、確かCarbon::parseするとデータ型がstringになってしまうので連結はともかくDB再保存に不安が残りますね（他の記述で何度かエラーが出て避けてもいました）。ともあれ、ご提案いただいたコードで動かせればコード量、ファイル数を減少させられるので時間のあるときに一度git cloneしてコード試してみます。

退会済みユーザー

2019/10/27 13:29

> Carbon::parse($task->punchIn)->format('H')などで分解は確かにできますよね。そうじゃなくて・・・ Model の $dates プロパティに、指定すれば、 $task->punchIn->format('H')　で取得できます。

sumAA

2019/10/27 14:43

> Model の $dates プロパティに、指定すれば、$task->punchIn->format('H')　で取得できます。今調べてみましたら「日付ミューテタ」（Laravelドキュメント）でヒット・・恥ずかしながら全然知りませんでした（涙）。昨日から多くのご指導いただき本当にありがとうございます。非常に勉強になりました！！

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

###わかったこと
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