htmlのinputタグを　YYYY-MM-DD HH:mm:ssで出力したい

前提・実現したいこと

htmlでimputタグの入力フォームを作成したのですが、「YYYY-MM-DD HH:mm:ss」の形にしたいです
今は「2021-06-28T01:00」と出てしまいます。

htmlかCSSでフォーマットを変更したいのですが、方法はないでしょうか？
JSで作成するしかないでしょうか？

上の「form-box」で入力した内容をjsを使って「main-table」に表示させようと思ってます。

発生している問題・エラーメッセージ

html
1<div class="form-box">
2    <table class="form">
3        <tr>
4            <th>予定</th>
5            <td><input id="todo" type="text" placeholder="予定を入力" value="予定"></td>
6            <th>日時</th>
7            <td><input id="date" type="datetime-local"></td>
8        </tr>
9        <tr>
10            <th>お金</th>
11            <td><input id="price" type="text" placeholder="金額を入力" value="10000"></td>
12            <th>期日</th>
13            <td><input id="duedate" type="datetime-local" datetime="YYYY-MM-DD HH:mm:ss"></td>
14        </tr>
15        <tr>
16            <th>持ち物</th>
17            <td><input id="item" type="text" value="持ち物"></td>
18            <th>メモ</th>
19            <td><input id="memo" type="text" value="めもです"></td>
20        </tr>
21    </table>
22    <div id="addButton"><button type="submit">登録する</button></div>
23    <div id="clearButton"><button type="submit" onclick="deleteCheck()" >選択削除</button></div>
24    <div id="allclearButton"><button type="submit" onclick="deleteAll()">すべて削除</button></div>
25</div>
26
27<table class="main-table" id="table">
28    <tr id="table-header">
29        <th class="header-check"></th>
30        <th class="header-id">ID</th>
31        <th class="header-todo">予定</th>
32        <th class="header-date">日時</th>
33        <th class="header-price">お金</th>
34        <th class="header-duedate">期日</th>
35        <th class="header-item">持ち物</th>
36        <th class="header-memo">メモ</th>
37        <th class="header-check"></th>
38    </tr>
39</table>