質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

input type="datetime-local"の値を他のinput type="datetime-local"にコピーしたい。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 685

HearthXml

score 51

 やりたいこと

ブラウザ: chrome
下のコードにある候補日:<input type="datetime-local" name="input" id="input-date">に値を入力し「入力」ボタンをおすと、<div id="possible_dates_list"></div>の間に入力した値を保持した、<input type="datetime-local">を生成したいです。
詳しく書くと,OnButtonClick関数のdateElement変数に値がすでに入力された状態で出力したいのです。

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>

<form method="POST" action="/">
    @csrf
    <div>
        イベント名:<input type="text" name="event_name" size="40">
    </div>
    <div>
        詳細: <input type="text" name="detail" size="40">
    </div>
    <div>
        候補日:<input type="datetime-local" name="input" id="input-date">
        <input type="button" name="input" onclick="OnButtonClick();" value="入力">
    </div>
    <div id="possible_dates_list">
    </div>
    <input type="submit" id="create-event-button">
</form>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>
    function OnButtonClick() {
        var dateList = document.getElementById('possible_dates_list');
        var dateElement =
        `<div class="input-group mb-3">
            <input type="datetime-local" class="form-control"  aria-describedby="basic-addon2" name="possible_dates[]">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button">☓</button>
            </div>
        </div>`;
        dateList.insertAdjacentHTML('afterbegin', dateElement);
        var tmp2 = dateList.lastElementChild;
        var ggg = tmp2.getElementsByClassName("form-control");
        tmp2.getElementsByClassName("form-control")[0].value;
        ggg[0].value = document.getElementById("input-date");
    }
    //
    function OnButtonDelete() {
        element.removeChild(child)
    }

    function setAttributes(el, attrs) {
        for(var key in attrs) {
            el.setAttribute(key, attrs[key]);
        }
    }
</script>
</body>
</html>

問題点

ですが、値を代入することができません。下の警告が出ます。
new Date("2019-03-03T10:10")や文字列で"2019-03-03T10:10"を代入しても下のメッセージが表示されて値を入れることができません。

(index):88 The specified value "[object HTMLInputElement]" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".

希望すること

やりたいことを満たしていただければ良いのですが、もし全体の仕組みをもっと簡単なものがあるのでしたら提案いただけたら嬉しいです。
よろしくお願い致します

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

// ggg[0].value = document.getElementById("input-date");
//                                                       ↓
   ggg[0].value = document.getElementById("input-date").value;

動くサンプル:https://jsfiddle.net/foj9x6hL/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/02 15:25

    回答ありがとうございます。
    渡していただいたコードでは要件を満たせなかったため、コード参考に自分なりに実装してみました。
    自己解決方法に乗せておきます。

    キャンセル

check解決した方法

0

頂いた回答を元にOnButtonClick関数を書き換えました。

    function OnButtonClick() {
        var dateList = document.getElementById('possible_dates_list');
        var dateElement =
            `<div class="input-group mb-3">
                <input type="datetime-local" class="form-control"  aria-describedby="basic-addon2" name="possible_dates[]">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" onclick="OnButtonDelete()">☓</button>
                </div>
            </div>`;
        dateList.insertAdjacentHTML('afterbegin', dateElement);
        document.getElementById('possible_dates_list').children[0].children[0].value = document.getElementById("input-date").value;
    }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る