получить разницу дат (в днях) через динамические поля

Question

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

<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".

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

Answer 1

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

<!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>

БЛОГ НА HUSL

получить разницу дат (в днях) через динамические поля

Ответы (1 шт):