teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

質問文を要約しました

2019/10/26 15:10

投稿

sumAA
sumAA

スコア14

title CHANGED
@@ -1,1 +1,1 @@
1
- 【Laravel 5.8】jQueryでinputフォームの年月日時分秒の「時分」だけセレクトボックス化したい
1
+ 【Laravel 5.8】view上<input type="datetime">の年月日時分秒の表記をセレクトボックス表記に変させる
body CHANGED
@@ -1,247 +1,42 @@
1
- ### 前提
2
-
3
- PHP(Laravel 5.8)で勤怠記録を保存できるシステムを作っています。
4
- ユーザーがView画面から記録できるのは、
5
- 「出勤時間、退勤時間、休憩入り時間、休憩戻り時間、メモ」の5点。
6
-
7
- 記録は、
8
- 1、ユーザー登録、ログイン→Topページへ移行
9
- 2、Topページから打刻記録ページへ移行
10
- 3、View上の「ボタン」をクリックによって、その瞬間の出退勤時間がそれぞれ
11
-  データベース(MySQL)にDatetime型(yyyy-mm-dd h:i:s)で記録される
12
- 4、記録した出退勤時間、休憩時間、メモの編集をしたければ、
13
-  Editページで一度記録された時間を変更することができる
14
-
15
- 以上が大まかな流れとなります。
16
- ※問題となっているコードは後ほど記載いたします。
17
-
18
-
19
- **環境:**
20
- **フレームワーク:Laravel 5.8**
21
- **View:Bootstrap4**
22
- **データベース:MySQL**
23
- **エディタ:Atom**
24
- **ブラウザ:Chrom**
25
-
26
-
27
1
  ### 実現したいこと
28
- **inputフォームの見た目だけ変更させて日時を表示し、データとしてはyyyy-mm-dd h:i:sの形でデータベースに保存したい!**
29
2
 
3
+ **PHP(Laravel 5.8)のViewファイル上にてDB内の日時(punchIn:画像参照)を取得し表示する。その際、日時部分だけプルダウンにする。**
4
+ ※DB→MySQL
5
+ ※日時のデータ型→Datetime
6
+ ![](2ff3b6eefd978ab6c061dd2f0ff28e0e.png)
7
+ ※データベース内のとあるレコード
30
8
 
31
- 詳細を申し上げますと、
32
- Editページでは一度記録した該当月日の
33
- ・出勤時間
34
- ・退勤時間
35
- ・休憩入り時間
9
+ ### 背景
36
- ・休憩戻り時間
37
10
 
11
+ □打刻システムを作成している
38
- MySQLから呼び出、Controllerを介してViewにて表示をしてます。
12
+ □打刻時間(punchIn)あとで編集
13
+ □編集をよりやりやすくしたい
39
14
 
15
+ ### 状況
16
+ ![イメージ説明](a449d39badd6a8b73717e1e95cc61034.png)
17
+ DBのpunchInカラムの日時(datetime型)を画像の1、2のように表記するのに複雑なことはない。
18
+ ```Controller
19
+ public function edit(Request $request, $id)
20
+ {
21
+ $task = Task::findOrFail($id);
22
+ return view('records.edit', compact('task'));
23
+ }
24
+ ```
40
25
 
41
- 各時間の表示の際、<input type="datetime" value="$hoge->fuga">
42
- このような記述で記録された時間を初期値としてinputフォームに設定し、
43
- yyyy-mm-dd h:i:s(例:2019-08-10 10:45:10)が表示されており、
44
- 必要があれば日時を変更し再度データベースに保存することが可能です。
45
-
46
- ここで不満が1つありまして、
47
- View-Controller-Model-DB間のデータのやりとりには何ら問題はないのですが、
48
- inputフォームに表示された日時を変更しようとすると非常に面倒くさいのです。
49
- (例:2019-08-10 10:45:10を、9:45:10に変更するのに手打ちする必要あり)
50
-
51
- ユーザーに全然優しくないので、
52
- yyyy-mm-dd h:i:sのh:iの部分だけでもセレクトボックスにして、
53
- 編集した日時を再度データベースに保存したいと考えています。
54
-
55
-
56
- ### 発生している問題
57
- **編集した時間(yyyy-mm-dd h:i:s)を再度データベースに保存する手段を見つけることができない**
58
-
59
- 実現のための手段としてjQueryの利用を試みました。
60
- 1、inputのvalueの初期値に設定した出勤時間のtypeをhiddenに変更(view: edit.blade.controller)
61
-
62
26
  ```View
63
- <div class="form-group row">
64
- <label class="col-md-3">出勤時間</label>
27
+ 1を出力するには、<p>{{ $task->punchIn }}</p>
65
- <input type="datetime" id="punchIn" name="punchIn"
28
+ 2を出力するには、<input type="datetime" value={{ $task->punchIn }}>
66
- value=" old('punchIn', $task->punchIn) ">
67
- </div>
68
29
  ```
69
- ↓変更
70
- ```View
71
- <div class="form-group row">
30
+ 2の表記だと表示した「2019-10-25 00:53:34」の日時を編集することが可能。
72
- <label class="col-md-3">出勤時間</label>
73
-    <input type="hidden" id="punchIn" name="punchIn"
74
-     value="{{ old('punchIn', $task->punchIn) }}">
75
- <p id="punchInYmd" class="pl-3 pr-2"></p>
76
- <p id="punchInH"></p>
77
- <p id="punchInMi"></p>
78
- <select id="my-pIn-hours">
31
+ 別途追記すれば編集後の日時を再度DBへ保存することができる!!
79
- </select>:
32
+ (※しかし、日時編集はタイピングになるので超面倒・・)
80
- <select id="my-pIn-minutes">
81
- </select>
82
- </div>
83
- ```
84
33
 
34
+ ### 理想
35
+ ![イメージ説明](a449d39badd6a8b73717e1e95cc61034.png)
85
36
 
37
+ **理想は画像の「出勤時間」のようにしたい。**
86
- 2、jQueryでvalueの初期値(出勤時間)を取得。new Date化した上で値を年月時分秒それぞれ分解→時分の部分だけセレトボックス化→セクトボックスで選択した時分を取得(jQuery.js)
38
+ ・「出勤時間2019-10-25部分ックするとカンダー表記
39
+ ・「日時」はプルダウン化
40
+ ・「秒」は邪魔なので表記不要
87
41
 
88
- 3、年月日時分秒に分解された出勤時間を連結。(jQuery.js)
89
- ```jQuery
90
- $(function(){
91
-
92
- var pIn = $('#punchIn').val();
93
- var pInTime = new Date( pIn );
94
- var pInY = pInTime.getFullYear();
95
- var pInM = (pInTime.getMonth() + 1);
96
- var pInD = pInTime.getDate();
97
- var pInH = pInTime.getHours();
98
- var pInMi = pInTime.getMinutes();
99
- var pInS = pInTime.getSeconds();
100
-
101
- $('#punchInH').text( pInH ).hide();
102
- $('#punchInMi').text( pInMi ).hide();
103
-
104
- var pInHour = $('#punchInH').text();
42
+ いかにjQueryなどを使用しスマートに実装できるか知恵をいただけませんでしょうか??
105
- var hours = [
106
- '00',
107
- '01',
108
- '02',
109
- '03',
110
- '04',
111
- '05',
112
- '06',
113
- '07',
114
- '08',
115
- '09',
116
- '10',
117
- '11',
118
- '12',
119
- '13',
120
- '14',
121
- '15',
122
- '16',
123
- '17',
124
- '18',
125
- '19',
126
- '20',
127
- '21',
128
- '22',
129
- '23',
130
- ],
131
- $selectHours = $('#my-pIn-hours'),
132
- $optionHours,
133
- optionsHours,
134
- isSelectedHour;
135
-
136
- optionsHours = $.map(hours, function(name, value){
137
- isSelectedHour = (name === pInHour);
138
- $optionHours = $('<option>', {value: value, text: name, selected: isSelectedHour});
139
- return $optionHours;
140
- });
141
- $selectHours.append(optionsHours);
142
-
143
-
144
- var pInMinute = $('#punchInMi').text();
145
- var minutes = {
146
- 0:'00',
147
- 1:'01',
148
- 2:'02',
149
- 3:'03',
150
- 4:'04',
151
- 5:'05',
152
- 6:'06',
153
- 7:'07',
154
- 8:'08',
155
- 9:'09',
156
- 10:'10',
157
- 11:'11',
158
- 12:'12',
159
- 13:'13',
160
- 14:'14',
161
- 15:'15',
162
- 16:'16',
163
- 17:'17',
164
- 18:'18',
165
- 19:'19',
166
- 20:'20',
167
- 20:'20',
168
- 21:'21',
169
- 22:'22',
170
- 23:'23',
171
- 24:'24',
172
- 25:'25',
173
- 26:'26',
174
- 27:'27',
175
- 28:'28',
176
- 29:'29',
177
- 30:'30',
178
- 31:'31',
179
- 32:'32',
180
- 33:'33',
181
- 34:'34',
182
- 35:'35',
183
- 36:'36',
184
- 37:'37',
185
- 38:'38',
186
- 39:'39',
187
- 40:'40',
188
- 41:'41',
189
- 42:'42',
190
- 43:'43',
191
- 44:'44',
192
- 45:'45',
193
- 46:'46',
194
- 47:'47',
195
- 48:'48',
196
- 49:'49',
197
- 50:'50',
198
- 51:'51',
199
- 52:'52',
200
- 53:'53',
201
- 54:'54',
202
- 55:'55',
203
- 56:'56',
204
- 57:'57',
205
- 58:'58',
206
- 59:'59',
207
- },
208
- $selectMinutes = $('#my-pIn-minutes'),
209
- $optionMinutes,
210
- optionsMinutes,
211
- isSelectedMinute;
212
-
213
- // コールバック関数の引数の順序が $.each と異なることに注
214
- optionsMinutes = $.map(minutes, function (name, value) {
215
- isSelectedMinute = (name === pInMinute);
216
- $optionMinutes = $('<option>', { value: value, text: name, selected: isSelectedMinute });
217
- return $optionMinutes;
218
- });
219
-
220
- $selectMinutes.append(optionsMinutes);
221
-
222
- var pInHSel = $('select[id="my-pIn-hours"] > option:selected').text();
223
- var pInMiSel = $('select[id=my-pIn-minutes] > option:selected').text();
224
-
225
- var test222 = $('#punchIn').text(pInY + '-' + pInM + '-' + pInD + ' ' + pInHSel + ':' + pInMiSel + ':' + pInS);
226
- });
227
- ```
228
- ここまできてようやくミスに気がつきました。
229
- 最後の変数 var test222で、Viewのid=punchInのinputフォームのValueに編集した日時を入れることはできます。
230
- ```
231
- <input type="datetime" value="$hoge->fuga">
232
-
233
- ```
234
- valueの値は変更せずフォームの中の値だけ変更すれば、変更内容は問題なくデータベースに反映されます。しかし、これまで試した流れだと
235
- ```
236
- <input type="datetime" value="$hoge->fuga">
237
-
238
- <input type="datetime" value="2019-08-10 10:45:10">
239
- ```
240
- と書き換わってしまうためDBへ変更した年月日時分秒の送信が困難です。
241
- フォームをinputから変更しなければデータの記録としては何の問題もありませんが、ユーザーには使いにくいままとなってしまうでしょう。Valueの値を変更しない方法、Valueの値を複数用いる方法も検討しましたが解決の糸口をつかめませんでした。
242
-
243
- 設計ミスで既に手段がないのか、
244
- それとももっと単純な何かを見落としているのか、
245
- 現状の私の力量では判断すらできません。
246
- 知恵をお借りしたく今回書き込ませていただきました。
247
- 何卒よろしくお願いいたします。