質問編集履歴

質問文を要約しました

2019/10/26 15:10

投稿

sumAA

スコア14

test CHANGED Viewed

	@@ -1 +1 @@
1	- 【Laravel 5.8】~~jQu~~eryでinput~~フォーム~~の年月日時分秒の~~「時分」だけ~~セレクトボックス化~~したい~~
1	+ 【Laravel 5.8】view上で<input type="datetime">の年月日時分秒の表記をセレクトボックス表記に変化させる

test CHANGED Viewed

@@ -1,493 +1,83 @@
-### 前提
+### 実現したいこと
-PHP(Laravel 5.8)で勤怠記録を保存できるシステムを作っています。
+**PHP(Laravel 5.8)のViewファイル上にてDB内の日時（punchIn:画像参照）を取得し表示する。その際、日時部分だけプルダウンにする。**
-ユーザーがView画面から記録できるのは、
+※DB→MySQL
+※日時のデータ型→Datetime
-「出勤時間、退勤時間、休憩入り時間、休憩戻り時間、メモ」の5点。
+![](2ff3b6eefd978ab6c061dd2f0ff28e0e.png)
+※データベース内のとあるレコード
-記録は、
+### 背景
-1、ユーザー登録、ログイン→Topページへ移行
-2、Topページから打刻記録ページへ移行
-3、View上の「ボタン」をクリックによって、その瞬間の出退勤時間がそれぞれ
-　データベース(MySQL)にDatetime型(yyyy-mm-dd h:i:s)で記録される
-4、記録した出退勤時間、休憩時間、メモの編集をしたければ、
-　Editページで一度記録された時間を変更することができる
-以上が大まかな流れとなります。
+□打刻システムを作成している
-※問題となっているコードは後ほど記載いたします。
+□打刻時間(punchIn)をあとで編集したい
+□編集をよりやりやすくしたい
+### 状況
+![イメージ説明](a449d39badd6a8b73717e1e95cc61034.png)
-**環境：**
+DBのpunchInカラムの日時（datetime型）を画像の1、2のように表記するのに複雑なことはない。
-**フレームワーク：Laravel 5.8**
+```Controller
-**View：Bootstrap4**
+public function edit(Request $request, $id)
-**データベース:MySQL**
+{
-**エディタ：Atom**
+     $task = Task::findOrFail($id);
-**ブラウザ:Chrom**
+     return view('records.edit', compact('task'));
+}
-### 実現したいこと
-**inputフォームの見た目だけ変更させて日時を表示し、データとしてはyyyy-mm-dd h:i:sの形でデータベースに保存したい！**
-詳細を申し上げますと、
-Editページでは一度記録した該当月日の
-・出勤時間
+```
-・退勤時間
-・休憩入り時間
-・休憩戻り時間
-をMySQLから呼び出し、Controllerを介してViewにて表示をしています。
-各時間の表示の際、<input type="datetime" value="$hoge->fuga">
-このような記述で記録された時間を初期値としてinputフォームに設定し、
-yyyy-mm-dd h:i:s（例：2019-08-10 10:45:10）が表示されており、
-必要があれば日時を変更し再度データベースに保存することが可能です。
-ここで不満が1つありまして、
-View-Controller-Model-DB間のデータのやりとりには何ら問題はないのですが、
-inputフォームに表示された日時を変更しようとすると非常に面倒くさいのです。
-（例：2019-08-10 10:45:10を、9:45:10に変更するのに手打ちする必要あり）
-ユーザーに全然優しくないので、
-yyyy-mm-dd h:i:sのh:iの部分だけでもセレクトボックスにして、
-編集した日時を再度データベースに保存したいと考えています。
-### 発生している問題
-**編集した時間（yyyy-mm-dd h:i:s）を再度データベースに保存する手段を見つけることができない**
-実現のための手段としてjQueryの利用を試みました。
-1、inputのvalueの初期値に設定した出勤時間のtypeをhiddenに変更(view: edit.blade.controller)
 ```View
-<div class="form-group row">
+1を出力するには、<p>{{ $task->punchIn }}</p>
-     <label class="col-md-3">出勤時間</label>
-     <input type="datetime" id="punchIn" name="punchIn"
+2を出力するには、<input type="datetime" value={{ $task->punchIn }}>
-      value=" old('punchIn', $task->punchIn) ">
-</div>
 ```
-↓変更
+2の表記だと表示した「2019-10-25 00:53:34」の日時を編集することが可能。
-```View
+別途追記すれば編集後の日時を再度DBへ保存することができる！！
-<div class="form-group row">
-     <label class="col-md-3">出勤時間</label>
-　　　<input type="hidden" id="punchIn" name="punchIn"
-　 　　value="{{ old('punchIn', $task->punchIn) }}">
-      <p id="punchInYmd" class="pl-3 pr-2"></p>
-      <p id="punchInH"></p>
-      <p id="punchInMi"></p>
-      <select id="my-pIn-hours">
-      </select>:
+（※しかし、日時編集はタイピングになるので超面倒・・）
-      <select id="my-pIn-minutes">
-      </select>
-</div>
-```
+### 理想
-2、ｊQueryでvalueの初期値(出勤時間)を取得。new Date化した上で値を年月時分秒それぞれ分解→時分の部分だけセレクトボックス化→セレクトボックスで選択した時分を取得(jQuery.js)
+![イメージ説明](a449d39badd6a8b73717e1e95cc61034.png)
-3、年月日時分秒に分解された出勤時間を連結。(jQuery.js)
+**理想は画像の「出勤時間」のようにしたい。**
-```jQuery
+・「出勤時間」の2019-10-25部分はクリックするとカレンダー表記
+・「日時」はプルダウン化
-$(function(){
+・「秒」は邪魔なので表記不要
-    var pIn = $('#punchIn').val();
-    var pInTime = new Date( pIn );
-    var pInY = pInTime.getFullYear();
-    var pInM = (pInTime.getMonth() + 1);
-    var pInD = pInTime.getDate();
-    var pInH = pInTime.getHours();
-    var pInMi = pInTime.getMinutes();
-    var pInS = pInTime.getSeconds();
-    $('#punchInH').text( pInH ).hide();
-    $('#punchInMi').text( pInMi ).hide();
-    var pInHour = $('#punchInH').text();
+いかにjQueryなどを使用しスマートに実装できるか知恵をいただけませんでしょうか？？
-    var hours = [
-              '00',
-              '01',
-              '02',
-              '03',
-              '04',
-              '05',
-              '06',
-              '07',
-              '08',
-              '09',
-              '10',
-              '11',
-              '12',
-              '13',
-              '14',
-              '15',
-              '16',
-              '17',
-              '18',
-              '19',
-              '20',
-              '21',
-              '22',
-              '23',
-    ],
-    $selectHours = $('#my-pIn-hours'),
-    $optionHours,
-    optionsHours,
-    isSelectedHour;
-    optionsHours = $.map(hours, function(name, value){
-        isSelectedHour = (name === pInHour);
-        $optionHours = $('<option>', {value: value, text: name, selected: isSelectedHour});
-        return $optionHours;
-    });
-    $selectHours.append(optionsHours);
-    var pInMinute = $('#punchInMi').text();
-    var minutes = {
-        0:'00',
-        1:'01',
-        2:'02',
-        3:'03',
-        4:'04',
-        5:'05',
-        6:'06',
-        7:'07',
-        8:'08',
-        9:'09',
-        10:'10',
-        11:'11',
-        12:'12',
-        13:'13',
-        14:'14',
-        15:'15',
-        16:'16',
-        17:'17',
-        18:'18',
-        19:'19',
-        20:'20',
-        20:'20',
-        21:'21',
-        22:'22',
-        23:'23',
-        24:'24',
-        25:'25',
-        26:'26',
-        27:'27',
-        28:'28',
-        29:'29',
-        30:'30',
-        31:'31',
-        32:'32',
-        33:'33',
-        34:'34',
-        35:'35',
-        36:'36',
-        37:'37',
-        38:'38',
-        39:'39',
-        40:'40',
-        41:'41',
-        42:'42',
-        43:'43',
-        44:'44',
-        45:'45',
-        46:'46',
-        47:'47',
-        48:'48',
-        49:'49',
-        50:'50',
-        51:'51',
-        52:'52',
-        53:'53',
-        54:'54',
-        55:'55',
-        56:'56',
-        57:'57',
-        58:'58',
-        59:'59',
-    },
-    $selectMinutes = $('#my-pIn-minutes'),
-    $optionMinutes,
-    optionsMinutes,
-    isSelectedMinute;
-    // コールバック関数の引数の順序が $.each と異なることに注
-    optionsMinutes = $.map(minutes, function (name, value) {
-         isSelectedMinute = (name === pInMinute);
-        $optionMinutes = $('<option>', { value: value, text: name, selected: isSelectedMinute });
-        return $optionMinutes;
-    });
-    $selectMinutes.append(optionsMinutes);
-    var pInHSel = $('select[id="my-pIn-hours"] > option:selected').text();
-    var pInMiSel =  $('select[id=my-pIn-minutes] > option:selected').text();
-    var test222 = $('#punchIn').text(pInY + '-' + pInM + '-' + pInD + ' ' + pInHSel + ':' + pInMiSel + ':' + pInS);
-});
-```
-ここまできてようやくミスに気がつきました。
-最後の変数 var test222で、Viewのid=punchInのinputフォームのValueに編集した日時を入れることはできます。
-```
-<input type="datetime" value="$hoge->fuga">
-```
-valueの値は変更せずフォームの中の値だけ変更すれば、変更内容は問題なくデータベースに反映されます。しかし、これまで試した流れだと
-```
-<input type="datetime" value="$hoge->fuga">
-が
-<input type="datetime" value="2019-08-10 10:45:10">
-```
-と書き換わってしまうためDBへ変更した年月日時分秒の送信が困難です。
-フォームをinputから変更しなければデータの記録としては何の問題もありませんが、ユーザーには使いにくいままとなってしまうでしょう。Valueの値を変更しない方法、Valueの値を複数用いる方法も検討しましたが解決の糸口をつかめませんでした。
-設計ミスで既に手段がないのか、
-それとももっと単純な何かを見落としているのか、
-現状の私の力量では判断すらできません。
-知恵をお借りしたく今回書き込ませていただきました。
-何卒よろしくお願いいたします。