0

Есть такой код:

<head>
<script language="javascript">
var items=1;
function AddItem() {
  div=document.getElementById("items");
  button=document.getElementById("add");
  items++;
  newitem="<input type=\"date\" name=\"item" + items;
  newitem+="\" size=\"45\">";
  newitem+="<input type=\"text\" name=\"otvet" + items;
  newitem+="\" size=\"5\"><br>";
  newnode=document.createElement("span");
  newnode.innerHTML=newitem;
  div.insertBefore(newnode,button);
}
</script>
    
        <body>
        <form name="form0">
        <div ID="osnov">
        <input type="date" name="osnov" size="45">
        </div>
        </form>
        <form name="form1">
        <div ID="items">
        <input type="date" name="item1" size="45"><input type="text" name="otvet" size="5"><br>
        <input type="button" value="Добавить поле" onClick="AddItem();" ID="add">
        </div>
        </body>
        </form>
</head>

В поле даты "osnov" вбиваю "эталонную" дату, от которой должно происходить вычитание дат, добавляемых при нажатии на кнопку "добавить поле" результаты должны появляться в текстовом поле "otvet".

Направьте на путь истинный меня пожалуйста, голову сломал уже.

2
  • Откуда берутся даты? В какой момент должно происходить вычитание? Каким должен быть otvet, если добавленных дат несколько?
    – br3t
    28 авг 2020 в 10:08
  • первая дата берется из <input type="date" name="osnov" size="45"> вторая берется <input type="date" name="item1" size="45">. разница этих дат выводится в otvet. При добавлении еще одной даты кнопкой, разница берется из первой статичной и нового добавленного поля item2 выводится разница в otvet2 который появляется после нажатия кнопки. Таким образом каждая новая добавленная дата должна вычитатся из первой даты и выводится в добавленное поле otvet
    – user404706
    31 авг 2020 в 4:41

1 ответ 1

0

Если можно использовать библиотеки -- как-то так:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> разница дат </title>
<style>

div.itemGroup {
    display: inline-block;
    width: 70%;
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px;
    margin: 5px;
    vertical-align: top;
}

button, input {
    margin: 10px;
}

</style>
</head>
<body>
<form class="container" method="POST"></form>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
"use strict"

const { useEffect, useState }  = React
const e = React.createElement

/* это можно заполнить на сервере с `encode_json($arr)` */
const initBaseDate = () => "2020-09-01"
const initItems = () => ["2020-09-02","2020-09-03"]
/**/

const App = () => {
    const [ baseDate, setBaseDate ] = useState(initBaseDate)
    const [ items, setItems ] = useState(initItems)
    const addItem = () => setItems(cItems=>[...cItems,""])
    const setDate = (sPos,value) => setItems(was => was.map((item,pos) => sPos===pos ? value : item ))
    return [
        e("input", { key: "baseDate", name: "baseDate", type: "date", value: baseDate, onChange: ev => setBaseDate(ev.target.value) }),
        e("button", { key: "create", type: "button", onClick: ev => addItem() }, "Добавить поле"),
        e("button", { key: "submit" }, "Отправить"),
        e("div", { key: "itemsGroups" },
            e("div", { className: "itemGroup" },
                items.map((item,pos) => {
                    const diff = baseDate && item ? [((new Date(baseDate))-(new Date(item))) / 86400000] : []
                    return e("div", { key: pos }, 
                        e("input", { key: "date", name: "item"+pos, type: "date", value: item, onChange: ev => setDate(pos,ev.target.value) }),
                        " ",
                        diff.map(d => e("input", { key: "diff", name: "answer"+pos, value: diff[0], onChange: ev => {} })),
                    )
                })
            ),
        )
    ]
}

ReactDOM.render(e(App), document.querySelector('.container'))

</script>
</body>
</html>

2
  • да именно так и надо, спасибо!
    – user404706
    1 сен 2020 в 9:03
  • Всегда рад. Принимайте ответ галочкой. 1 сен 2020 в 18:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.