日期输入在JavaScript中不会打开日历。

huangapple go评论68阅读模式
英文:

date input does not open calendar in JavaScript

问题

我制作了这个看板应用程序。一切都运行正常,但当我点击编辑按钮时,日期输入框没有像通常编辑时那样打开日历。我只是从中移除了隐藏类,没有做其他任何操作。当我手动编辑日期时,它会正确更新。

import Kanban from "./kanban.js";

const todo = document.querySelector(".cards.todo");
const pending = document.querySelector(".cards.pending");
const completed = document.querySelector(".cards.completed");
const cards = document.getElementsByClassName("card");
console.log(cards);
const taskbox = [todo, pending, completed];

function addTaskCard(task, index) {
    taskbox[index].innerHTML += `
        <form class="card" draggable="true" data-id="${task.taskId}">
        <input type="text" name="task" autocomplete="off" value="${task.content}"/>
        <span class="date">${task.date}</span>
        <input type="date" class="deadline-input hide" name="date"/>
        <div>
            <span class="task-id">
                #${task.taskId}
            </span>
            <span>
                <button class="edit" data-id="${task.taskId}">Edit</button>
                <button class="update hide" data-id="${task.taskId}" data-column="${index}">Update</button>
                <button class="delete" data-id="${task.taskId}">Delete</button>
            </span>
        </div>
    </form>
        `
}

Kanban.getAllTasks().forEach((tasks, index) => {
    tasks.forEach(task => {
        addTaskCard(task, index)
    })
})

const addForm = document.querySelectorAll(".add")

addForm.forEach(form => {
    form.addEventListener("submit", event => {
        event.preventDefault()
        console.log(form.date)
        if(form.task.value.trim()) {
            const task = Kanban.insertTask(form.submit.dataset.id, form.task.value.trim(), form.date.value)
            addTaskCard(task, form.submit.dataset.id)
            form.reset()
        }
    })
})

taskbox.forEach(column => {
    column.addEventListener("click", event => {
        event.preventDefault()
        const card = event.target.closest(".card")

        if (!card) return

        const dateDisplay = card.querySelector('span');
        const formInput = card.querySelector('input[name="task"]');
        const dateInput = event.target.closest(".card").querySelector('input[name="date"]')

        if(event.target.classList.contains("edit")) {
            formInput.removeAttribute("disabled")
            dateInput.classList.remove("hide");
            dateInput.value = dateDisplay.textContent.trim();
            dateDisplay.classList.add("hide")
            event.target.classList.add("hide")
            event.target.nextElementSibling.classList.remove("hide")
        }

        if(event.target.classList.contains("update")) {
            formInput.setAttribute("disabled", "disabled")
            event.target.classList.add("hide")
            event.target.previousElementSibling.classList.remove("hide")
            dateInput.classList.add("hide")
            dateDisplay.classList.remove("hide")

            dateDisplay.textContent = dateInput.value

            const taskId = event.target.dataset.id
            const columnId = event.target.dataset.column
            const content =formInput.value
            const date = dateInput.value
            Kanban.updateTask(taskId, {columnId, date, content})
        }

        if(event.target.classList.contains("delete")) {
            formInput.parentElement.remove()
            Kanban.deleteTask(event.target.dataset.id)
        }
    })

    column.addEventListener("dragstart", event => {
        if(event.target.classList.contains("card")) {
            event.target.classList.add("dragging")
        }
    })

    column.addEventListener("dragover", event => {
        const card = document.querySelector(".dragging")
        console.log(card)
        column.appendChild(card)
    })

    column.addEventListener("dragend", event => {
        if(event.target.classList.contains("card")) {
            event.target.classList.remove("dragging")
            console.log(event.target.task.value)
            Kanban.updateTask(event.target.dataset.id, {columnId: event.target.parentElement.dataset.id, content: event.target.task.value})
        }
    })
})

function updateTaskCardStyle() {
    const now = new Date();
    for(const card of cards) {
        console.log("YES")
        const deadlineInput = card.querySelector('.date')
        console.log(deadlineInput)
        const deadline = new Date(deadlineInput.textContent)
        if (deadline < now) {
            card.classList.add('deadline-passed')
          }
    }
}
window.addEventListener('load', updateTaskCardStyle)
英文:

I made this Kanban application. Everything works fine but when I click the Edit button the date input does not open calendar like it usually does when I try to edit it. I am just removing hide class from it and nothing else. When I edit the date manually, it updates correctly.

import Kanban from &quot;./kanban.js&quot;;
const todo = document.querySelector(&quot;.cards.todo&quot;)
const pending = document.querySelector(&quot;.cards.pending&quot;)
const completed= document.querySelector(&quot;.cards.completed&quot;)
const cards = document.getElementsByClassName(&quot;card&quot;)
console.log(cards)
const taskbox = [todo, pending, completed]
function addTaskCard(task, index) {
taskbox[index].innerHTML += `
&lt;form class=&quot;card&quot; draggable=&quot;true&quot; data-id=&quot;${task.taskId}&quot;&gt;
&lt;input type=&quot;text&quot; name=&quot;task&quot; autocomplete=&quot;off&quot; value=&quot;${task.content}&quot;/&gt;
&lt;span class=&quot;date&quot;&gt;${task.date}&lt;/span&gt;
&lt;input type=&quot;date&quot; class=&quot;deadline-input hide&quot; name=&quot;date&quot;/&gt;
&lt;div&gt;
&lt;span class=&quot;task-id&quot;&gt;
#${task.taskId}
&lt;/span&gt;
&lt;span&gt;
&lt;button class=&quot;edit&quot; data-id=&quot;${task.taskId}&quot;&gt;Edit&lt;/button&gt;
&lt;button class=&quot;update hide&quot; data-id=&quot;${task.taskId}&quot; data-column=&quot;${index}&quot;&gt;Update&lt;/button&gt;
&lt;button class=&quot;delete&quot; data-id=&quot;${task.taskId}&quot;&gt;Delete&lt;/button&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/form&gt;
`
}
Kanban.getAllTasks().forEach((tasks, index) =&gt; {
tasks.forEach(task =&gt; {
addTaskCard(task, index)
})
})
const addForm = document.querySelectorAll(&quot;.add&quot;) 
addForm.forEach(form =&gt; {
form.addEventListener(&quot;submit&quot;, event =&gt; {
event.preventDefault()
console.log(form.date)
if(form.task.value.trim()) {
const task = Kanban.insertTask(form.submit.dataset.id, form.task.value.trim(), form.date.value)
addTaskCard(task, form.submit.dataset.id)
form.reset()
}
})
})
taskbox.forEach(column =&gt; {
column.addEventListener(&quot;click&quot;, event =&gt; {
event.preventDefault()
const card = event.target.closest(&quot;.card&quot;)
if (!card) return
//const dateInput = card.querySelector(&#39;input[name=&quot;date&quot;]&#39;);
const dateDisplay = card.querySelector(&#39;span&#39;);
const formInput = card.querySelector(&#39;input[name=&quot;task&quot;]&#39;)
const dateInput = event.target.closest(&quot;.card&quot;).querySelector(&#39;input[name=&quot;date&quot;]&#39;)
if(event.target.classList.contains(&quot;edit&quot;)) {
formInput.removeAttribute(&quot;disabled&quot;)
dateInput.classList.remove(&quot;hide&quot;);
dateInput.value = dateDisplay.textContent.trim();
dateDisplay.classList.add(&quot;hide&quot;)
event.target.classList.add(&quot;hide&quot;)
event.target.nextElementSibling.classList.remove(&quot;hide&quot;)
}
if(event.target.classList.contains(&quot;update&quot;)) {
formInput.setAttribute(&quot;disabled&quot;, &quot;disabled&quot;)
event.target.classList.add(&quot;hide&quot;)
event.target.previousElementSibling.classList.remove(&quot;hide&quot;)
dateInput.classList.add(&quot;hide&quot;)
dateDisplay.classList.remove(&quot;hide&quot;)
dateDisplay.textContent = dateInput.value
const taskId = event.target.dataset.id
const columnId = event.target.dataset.column
const content =formInput.value
const date = dateInput.value
Kanban.updateTask(taskId, {columnId, date, content})
}
if(event.target.classList.contains(&quot;delete&quot;)) {
formInput.parentElement.remove()
Kanban.deleteTask(event.target.dataset.id)
}
})
column.addEventListener(&quot;dragstart&quot;, event =&gt; {
if(event.target.classList.contains(&quot;card&quot;)) {
event.target.classList.add(&quot;dragging&quot;)
}
})
column.addEventListener(&quot;dragover&quot;, event =&gt; {
const card = document.querySelector(&quot;.dragging&quot;)
console.log(card)
column.appendChild(card)
})
column.addEventListener(&quot;dragend&quot;, event =&gt; {
if(event.target.classList.contains(&quot;card&quot;)) {
event.target.classList.remove(&quot;dragging&quot;)
console.log(event.target.task.value)
Kanban.updateTask(event.target.dataset.id, {columnId: event.target.parentElement.dataset.id, content: event.target.task.value})
}
})
})
function updateTaskCardStyle() {
const now = new Date();
for(const card of cards) {
console.log(&quot;YES&quot;)
const deadlineInput = card.querySelector(&#39;.date&#39;)
console.log(deadlineInput)
const deadline = new Date(deadlineInput.textContent)
if (deadline &lt; now) {
card.classList.add(&#39;deadline-passed&#39;)
}
}
}
window.addEventListener(&#39;load&#39;, updateTaskCardStyle)

I was expecting a calendar to show up when I click on date input after clicking on the Edit button but it doesnt show up.

答案1

得分: 1

日历在元素变为可见时不会自动打开。您需要使用 inputElement.showPicker() 来以编程方式使其可见。

参考链接:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker

英文:

The calendar does not automatically open when the element becomes visible. You have to use inputElement.showPicker() to make it visible programmatically.

Reference:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker

huangapple
  • 本文由 发表于 2023年7月24日 00:22:34
  • 转载请务必保留本文链接:https://go.coder-hub.com/76749257.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定