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

Question

実現したいこと

PHP(Laravel 5.8)のViewファイル上にてDB内の日時（punchIn:画像参照）を取得し表示する。その際、日時部分だけプルダウンにする。
※DB→MySQL
※日時のデータ型→Datetime

※データベース内のとあるレコード

背景

□打刻システムを作成している
□打刻時間(punchIn)をあとで編集したい
□編集をよりやりやすくしたい

状況

DBのpunchInカラムの日時（datetime型）を画像の1、2のように表記するのに複雑なことはない。

public function edit(Request $request, $id)
{
     $task = Task::findOrFail($id);
     return view('records.edit', compact('task'));
}

1を出力するには、<p>{{ $task->punchIn }}</p>
2を出力するには、<input type="datetime" value={{ $task->punchIn }}>

2の表記だと表示した「2019-10-25 00:53:34」の日時を編集することが可能。
別途追記すれば編集後の日時を再度DBへ保存することができる！！
（※しかし、日時編集はタイピングになるので超面倒・・）

理想

理想は画像の「出勤時間」のようにしたい。
・「出勤時間」の2019-10-25部分はクリックするとカレンダー表記
・「日時」はプルダウン化
・「秒」は邪魔なので表記不要

いかにjQueryなどを使用しスマートに実装できるか知恵をいただけませんでしょうか？？

Answer 1

いかにjQueryなどを使用しスマートに実装できるか知恵をいただけませんでしょうか？？

datepicker以外、jQueryは不要です。

<div class="form-group row">
    <label class="col-md-3">出勤時間</label>
    <input type="date" name="date">
    <select name='hour'>
    @foreach(range(0, 23) as $hour)
        <option value='{{ $hour }}'
        @if(old('hour') == $hour) selected @endif
        >{{ $hour }}</option>
    @endforeach
    </select>時
    <select name='minute'>
    @foreach(range(0, 59) as $minute)
        <option value='{{ $minute }}'
        @if(old('minute') == $minute) selected @endif
        >{{ $minute }}</option>
    @endforeach
    </select>分
</div>

<script>
$(function(){
    $('input[name=date]').datepicker({
        dateFormat: 'yy-mm-dd',
    });
});
</script>

Comments

[sumAA]

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-25 00:53:34」をexplode関数などで分解して変数に代入。

そんなことしなくても、carbonで処理すればもっとキレイにかけますよ。

[sumAA]

> そんなことしなくても、carbonで処理すればもっとキレイにかけますよ。

こんばんは。
コメントありがとうございます。
Carbon::parse($task->punchIn)->format('H')などで分解は確かにできますよね。

次の問題が連結→DB再保存となるのですが、確かCarbon::parseするとデータ型がstringになってしまうので連結はともかくDB再保存に不安が残りますね（他の記述で何度かエラーが出て避けてもいました）。

ともあれ、ご提案いただいたコードで動かせればコード量、ファイル数を減少させられるので時間のあるときに一度git cloneしてコード試してみます。

[退会済みユーザー]

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

[sumAA]

> Model の $dates プロパティに、指定すれば、$task->punchIn->format('H')　で取得できます。

今調べてみましたら「日付ミューテタ」（Laravelドキュメント）でヒット・・
恥ずかしながら全然知りませんでした（涙）。

昨日から多くのご指導いただき本当にありがとうございます。非常に勉強になりました！！

Answer 2

###わかったこと
1、punchInの「2019-10-15 00:53:34」は取得後に分解できる
2、編集後のpunchInの日時は、元の形式（yyyy-mm-dd hh:mm:ss)で保存しなければエラーになる。　※DBでpunchInはDatetime型で定義したので

###（自分なりの）解決方法

<div class="form-group row">
   <label class="col-md-3">出勤時間</label>
   <input type="hidden" id="punchIn" name="punchIn" 
    value="{{ old('punchIn', $task->punchIn) }}">
   <input type="text" id="punchInYmd">
   <select id="selectPunchInHour"></select>時
   <select id="selectPunchInMinute"></select>分
</div>

$(function(){

  //時分のプルダウン
   var hh = [
              '00',
              '01',
              '02',
              '03',
              '04',
              '05',
              '06',
              '07',
              '08',
              '09',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
            ];

    var mm = [
              '00',
              '01',
              '02',
              '03',
              '04',
              '05',
              '06',
              '07',
              '08',
              '09',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30',
              '31',
              '32',
              '33',
              '34',
              '35',
              '36',
              '37',
              '38',
              '39',
              '40',
              '41',
              '42',
              '43',
              '44',
              '45',
              '46',
              '47',
              '48',
              '49',
              '50',
              '51',
              '52',
              '53',
              '54',
              '55',
              '56',
              '57',
              '58',
              '59',
            ];

    // --------------------------
    //「2019-10-15 00:53:34」をhhhh-mm-dd、hh、mm、ssに分解
    var punchIn = $('#punchIn').val();
    var punchInSplit = punchIn.split(' ');
    var punchInYmd = punchInSplit[0];
    var punchInHis = punchInSplit[1];
    var punchInHisSplit = punchInHis.split(':');
    var phnchInH = punchInHisSplit[0];
    var phnchInM = punchInHisSplit[1];
    var phnchInS = punchInHisSplit[2];

    // --------------------------
　　//<select>タグのデフォルト値（hh）を設定
    var hh,
    $selectPunchInHour = $('#selectPunchInHour'),
    $optionPunchInHours,
    optionsPunchInHours,
    isSelectedPunchInHour;
    optionsPunchInHours = $.map(hh, function(name, value){
            isSelectedPunchInHour = (name === phnchInH);
            $optionPunchInHours = $('<option>', {value: value, text: name, selected: isSelectedPunchInHour});
            return $optionPunchInHours;
        });
    
     $selectPunchInHour.append(optionsPunchInHours);

    // --------------------------
　　//<select>タグのデフォルト値（mm）を設定
    var mm,
    $selectPunchInMinute = $('#selectPunchInMinute'),
    $optionPunchInMinutes,
    optionsPunchInMinutes,
    isSelectedPunchInMinute;
    optionsPunchInMinutes = $.map(mm, function(name, value){
            isSelectedPunchInMinute = (name === phnchInM);
            $optionPunchInMinutes = $('<option>', {value: value, text: name, selected: isSelectedPunchInMinute});
            return $optionPunchInMinutes;
        });

    $selectPunchInMinute.append(optionsPunchInMinutes);

    // --------------------------
　　//<input type="text" id="punchInYmd">にカレンダーを設定
    $('#punchInYmd').val(punchInYmd);
    $('#punchInYmd').datepicker({
        dateFormat: 'yy-mm-dd',
    });


    // --------------------------
　　//id=editBtnのボタンクリックしたら編集した年月日時分秒を全て繋げて
　　//[2019-10-15 00:53:34]と同じ形式にする
    $('#editBtn').click(function(){
        var punchInYmdEdited = $('#punchInYmd').val();
        var punchInHEdited = $('select[id=selectPunchInHour] > option:selected').text();
        var punchInMEdited = $('select[id=selectPunchInMinute] > option:selected').text();
        $('#punchIn').val(punchInYmdEdited + ' ' + punchInHEdited + ':' + punchInMEdited + ':' + phnchInS);
    });



});

jQueryに関しては絶対もっとキレイな書き方があるのだろうが、
今のレベルでは到達できない。一応動きとしては

●年月日部分はカレンダーが出現

●試しにpunchInを「2019-10-15 00:53:34」
↓
「2019-10-14 23:59:34」に変更しDBへ保存すると・・

無事punchInカラムの日時（datetime型）を変更することに成功しました。
・・が、もっとキレイなコード書けるように頑張らねばならない。
以上