JavaScriptでテキストボックス内に日付の文字列を出力したい

只今、設置した[type="date"]のインプットボックスで選択した日付に、type_1～4のボタンに応じて設定されている日数を付加した日付の文字列を、５つのテキストボックス（入力不可）それぞれに表示させるフォームを作成しているところなのですが、少なくとも１つ、解決できない問題に直面しております。

[type="date"]のインプットボックスで選択した日付は文字列ではなく、そのままType_1～4のボタンを押してテキストボックスに表示しようとしても、選択した日付は「標準出力」状態で、あとの４つには、初期値(1970/1/1)からの経過数を表す長い数字が表示されるだけ、となってしまっています。

ここまでに記述してきたコードは、以下のとおりです。

html・JQuery
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Button Pattern</title>
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
10    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
11    <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
12</head>
13<body>
14
15<div class="container">
16  <form action="" method="post">
17      <p><input type="date" name="dayInto" id="dayInto" required></p>
18      <div>
19        <input type="button" class="btn btn-warning form-group" value="type_1" onclick="input(1)">
20        <input type="button" class="btn btn-warning form-group" value="type_2" onclick="input(2)">
21        <input type="button" class="btn btn-warning form-group" value="type_3" onclick="input(3)">
22        <input type="button" class="btn btn-warning form-group" value="type_4" onclick="input(4)">
23      </div>
24      <br>
25      <label>Day-1st </label><input type="text" class="form-control" name="take_1" id="take_1" readonly>
26      <br>
27      <label>Day-2nd </label><input type="text" class="form-control" name="take_2" id="take_2" readonly>
28      <br>
29      <label>Day-3rd </label><input type="text" class="form-control" name="take_3" id="take_3" readonly>
30      <br>
31      <label>Day-4th </label><input type="text" class="form-control" name="take_4" id="take_4" readonly>
32      <br>
33      <label>Day-5th </label><input type="text" class="form-control" name="take_5" id="take_5" readonly>
34      <br>
35    <input type="submit">
36</form>
37</div>
38<script>
39    function input(type){
40      var dayInto = $("#dayInto").val();
41      var dtDayInto = new Date(dayInto);
42      var take_1 = dtDayInto;
43      var take_2 = dtDayInto.setDate(dtDayInto.getDate() + 1);
44      var take_3 = dtDayInto.setDate(dtDayInto.getDate() + 4);
45        if(type == 1){
46            console.log(take_1);
47            console.log(take_2);
48            console.log(take_3);
49            var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 8);
50            var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 15);
51            $("#take_1").val(take_1);
52            $("#take_2").val(take_2);
53            $("#take_3").val(take_3);
54            $("#take_4").val(take_4);
55            $("#take_5").val(take_5);
56        } else if(type == 2) {
57            console.log(take_1);
58            console.log(take_2);
59            console.log(take_3);
60            var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 8);
61            var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 16);
62            $("#take_1").val(take_1);
63            $("#take_2").val(take_2);
64            $("#take_3").val(take_3);
65            $("#take_4").val(take_4);
66            $("#take_5").val(take_5);
67        } else if(type == 3) {
68            console.log(take_1);
69            console.log(take_2);
70            console.log(take_3);
71            var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 9);
72            var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 16);
73            $("#take_1").val(take_1);
74            $("#take_2").val(take_2);
75            $("#take_3").val(take_3);
76            $("#take_4").val(take_4);
77            $("#take_5").val(take_5);
78        } else {
79            console.log(take_1);
80            console.log(take_2);
81            console.log(take_3);
82            var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 9);
83            var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 17);
84            $("#take_1").val(take_1);
85            $("#take_2").val(take_2);
86            $("#take_3").val(take_3);
87            $("#take_4").val(take_4);
88            $("#take_5").val(take_5);
89        }
90    }
91</script>
92</body>
93</html>
94<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

５つのテキストボックスに表示するそれぞれの日付を、標準入力値や数値でなく、yyyy-mm-ddのような日付の文字列に変換する為には、どんな関数等の処理が必要でしょうか。

＋（できれば以下も実装したい）＋
[type="date"]のインプットボックスで日付を指定し、且つtype_1～4のいずれかのボタンを謳歌した状態でないと、submit（送信）ボタンが押せないようにしたいです。

ご存知の方がいらっしゃいましたら、お手数ですがご教示の程お願い致します。

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

回答2件

以下/*テスト*/の部分をご覧頂きますと、数字を日付に戻す方法がわかると思います。

JavaScript
1    function input(type){
2      var dayInto = $("#dayInto").val();
3      var dtDayInto = new Date(dayInto);
4      var take_1 = dtDayInto;
5      var take_2 = dtDayInto.setDate(dtDayInto.getDate() + 1);
6
7      /*テスト*/
8      console.log('take_2を見ると数字になっています',take_2);
9      var take_2_date = new Date(take_2);
10      console.log('take_2_dateとして日付にします',take_2_date);
11      var take_2_ymd = formatDate(take_2_date, 'yyyy/MM/dd');
12      console.log('take_2_ymdとして任意の形式にします',take_2_ymd);
13      /*テストここまで*/
14

あとは
$("#take_2").val(take_2);を
$("#take_2").val(take_2_ymd);にすれば
yyyy-mm-ddとなります。
他のtake_3なども同様です。

ちなみにyyyy-mm-ddの形式にするのは次の関数です。
こちらのページに色々あります
https://zukucode.com/2017/04/javascript-date-format.html

JavaScript
1    function formatDate (date, format) {
2      format = format.replace(/yyyy/g, date.getFullYear());
3      format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
4      format = format.replace(/dd/g, ('0' + date.getDate()).slice(-2));
5      format = format.replace(/HH/g, ('0' + date.getHours()).slice(-2));
6      format = format.replace(/mm/g, ('0' + date.getMinutes()).slice(-2));
7      format = format.replace(/ss/g, ('0' + date.getSeconds()).slice(-2));
8      format = format.replace(/SSS/g, ('00' + date.getMilliseconds()).slice(-3));
9      return format;
10    };

投稿2020/10/30 12:12

ikatako

総合スコア270

Nishin

2020/10/31 09:00

ご回答ありがとうございます。数値が出力されてしまう場合、最初に「var take_2_date = new Date(take_2);」のように、()内に取得した日付の数値を埋め込んで日付にしなければならなかったのですね。そちらを知る事ができて、事が一層進展しました。しかし何故か、「var take_2_ymd = formatDate(take_2_date, 'yyyy/MM/dd');」のように実行しようとしてもコンソールにエラーが出てしまい、これ以上は処理を進められなくなってしまうという問題に直面しました。（しかしこの問題は後にググって解決しました）

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

自己解決

後に検索調査したところ、このように記述すると指定したとおりに出力されてくれることが分かりました。
ポイントは「テンプレートリテラルを使って年月日ごとに分ける（＆余分な空白や改行を抜く処理をする）」事だそうです。

HTML・JQuery
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Button Pattern</title>
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
10    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
11    <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet">
12</head>
13<body onload="start()">
14
15<div class="container">
16  <form action="" method="post">
17      <p><input type="date" name="dayInto" id="dayInto" min="2020-10-01" required></p>
18      <div>
19        <input type="button" class="btn btn-warning form-group" value="type_1" onclick="input(1)">
20        <input type="button" class="btn btn-warning form-group" value="type_2" onclick="input(2)">
21        <input type="button" class="btn btn-warning form-group" value="type_3" onclick="input(3)">
22        <input type="button" class="btn btn-warning form-group" value="type_4" onclick="input(4)">
23      </div>
24      <br>
25      <label>Day-1st </label><input type="text" class="form-control" name="take_1" id="take_1" readonly>
26      <br>
27      <label>Day-2nd </label><input type="text" class="form-control" name="take_2" id="take_2" readonly>
28      <br>
29      <label>Day-3rd </label><input type="text" class="form-control" name="take_3" id="take_3" readonly>
30      <br>
31      <label>Day-4th </label><input type="text" class="form-control" name="take_4" id="take_4" readonly>
32      <br>
33      <label>Day-5th </label><input type="text" class="form-control" name="take_5" id="take_5" readonly>
34      <br>
35    <input type="submit">
36</form>
37</div>
38<script>
39    function start(){
40      var dtDayInto = new Date(); //現在の日付を取得
41
42      var take_1 = dtDayInto;
43      var fm_take_1 = `${take_1.getFullYear()}/${take_1.getMonth()+1}/${take_1.getDate()}`.replace(/\n|\r/g, ''); //日付を文字列の形に変換
44
45      var take_2 = dtDayInto.setDate(dtDayInto.getDate() + 1); //取得した現在の日付（dtDayInto）に1日足したもの
46      var take_2 = new Date(take_2); //これを数字の羅列から日付に変換
47      var fm_take_2 = `${take_2.getFullYear()}/${take_2.getMonth()+1}/${take_2.getDate()}`.replace(/\n|\r/g, ''); //日付を文字列の形に変換
48
49      var take_3 = dtDayInto.setDate(dtDayInto.getDate() + 4);
50      var take_3 = new Date(take_3);
51      var fm_take_3 = `${take_3.getFullYear()}/${take_3.getMonth()+1}/${take_3.getDate()}`.replace(/\n|\r/g, '');
52
53      var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 8);
54      var take_4 = new Date(take_4);
55      var fm_take_4 = `${take_4.getFullYear()}/${take_4.getMonth()+1}/${take_4.getDate()}`.replace(/\n|\r/g, '');
56
57      var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 15);
58      var take_5 = new Date(take_5);
59      var fm_take_5 = `${take_5.getFullYear()}/${take_5.getMonth()+1}/${take_5.getDate()}`.replace(/\n|\r/g, '');
60
61      $("#take_1").val(fm_take_1);
62      $("#take_2").val(fm_take_2);
63      $("#take_3").val(fm_take_3);
64      $("#take_4").val(fm_take_4);
65      $("#take_5").val(fm_take_5);
66    }
67
68    function input(type){
69      var dayInto = $("#dayInto").val();
70      var dtDayInto = new Date(dayInto); //#dayIntoに入力された日付を取得
71
72      var take_1 = dtDayInto;
73      var fm_take_1 = `${take_1.getFullYear()}/${take_1.getMonth()+1}/${take_1.getDate()}`.replace(/\n|\r/g, ''); //日付を文字列の形に変換
74
75      var take_2 = dtDayInto.setDate(dtDayInto.getDate() + 1); //取得した現在の日付（dtDayInto）に1日足したもの
76      var take_2 = new Date(take_2); //これを数字の羅列から日付に変換
77      var fm_take_2 = `${take_2.getFullYear()}/${take_2.getMonth()+1}/${take_2.getDate()}`.replace(/\n|\r/g, ''); //日付を文字列の形に変換
78
79      var take_3 = dtDayInto.setDate(dtDayInto.getDate() + 4);
80      var take_3 = new Date(take_3);
81      var fm_take_3 = `${take_3.getFullYear()}/${take_3.getMonth()+1}/${take_3.getDate()}`.replace(/\n|\r/g, '');
82
83        if(type == 1){
84            var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 8);
85            var take_4 = new Date(take_4);
86            var fm_take_4 = `${take_4.getFullYear()}/${take_4.getMonth()+1}/${take_4.getDate()}`.replace(/\n|\r/g, '');
87
88            var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 15);
89            var take_5 = new Date(take_5);
90            var fm_take_5 = `${take_5.getFullYear()}/${take_5.getMonth()+1}/${take_5.getDate()}`.replace(/\n|\r/g, '');
91
92            $("#take_1").val(fm_take_1);
93            $("#take_2").val(fm_take_2);
94            $("#take_3").val(fm_take_3);
95            $("#take_4").val(fm_take_4);
96            $("#take_5").val(fm_take_5);
97        } else if(type == 2) {
98            var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 8);
99            var take_4 = new Date(take_4);
100            var fm_take_4 = `${take_4.getFullYear()}/${take_4.getMonth()+1}/${take_4.getDate()}`.replace(/\n|\r/g, '');
101
102            var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 16);
103            var take_5 = new Date(take_5);
104            var fm_take_5 = `${take_5.getFullYear()}/${take_5.getMonth()+1}/${take_5.getDate()}`.replace(/\n|\r/g, '');
105
106            $("#take_1").val(fm_take_1);
107            $("#take_2").val(fm_take_2);
108            $("#take_3").val(fm_take_3);
109            $("#take_4").val(fm_take_4);
110            $("#take_5").val(fm_take_5);
111        } else if(type == 3) {
112            var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 9);
113            var take_4 = new Date(take_4);
114            var fm_take_4 = `${take_4.getFullYear()}/${take_4.getMonth()+1}/${take_4.getDate()}`.replace(/\n|\r/g, '');
115
116            var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 16);
117            var take_5 = new Date(take_5);
118            var fm_take_5 = `${take_5.getFullYear()}/${take_5.getMonth()+1}/${take_5.getDate()}`.replace(/\n|\r/g, '');
119
120            $("#take_1").val(fm_take_1);
121            $("#take_2").val(fm_take_2);
122            $("#take_3").val(fm_take_3);
123            $("#take_4").val(fm_take_4);
124            $("#take_5").val(fm_take_5);
125        } else {
126          var take_4 = dtDayInto.setDate(dtDayInto.getDate() + 9);
127            var take_4 = new Date(take_4);
128            var fm_take_4 = `${take_4.getFullYear()}/${take_4.getMonth()+1}/${take_4.getDate()}`.replace(/\n|\r/g, '');
129
130            var take_5 = dtDayInto.setDate(dtDayInto.getDate() + 17);
131            var take_5 = new Date(take_5);
132            var fm_take_5 = `${take_5.getFullYear()}/${take_5.getMonth()+1}/${take_5.getDate()}`.replace(/\n|\r/g, '');
133
134            $("#take_1").val(fm_take_1);
135            $("#take_2").val(fm_take_2);
136            $("#take_3").val(fm_take_3);
137            $("#take_4").val(fm_take_4);
138            $("#take_5").val(fm_take_5);
139        }
140    }
141</script>
142</body>
143</html>
144<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>