How to pass a date input into mongoDB with NodeJS - node.js

Question

I'm teaching myself how to code with NodeJS and I'm currently working on a basic task manager project in which users can enter tasks that then get saved into my mongo database. So far, most of it is working and I've been able to store task models with the variables "name", "_id" and "completed", but I can't seem to get it to work when I want to add a date to that as well.
My goal is basically to be able to have users input their own tasks with a name and date that then get stored into my database, after which they get listed into a personal agenda for the user, so getting the date to work is mandatory for my application.
Here's what I have so far:
(relevant portion of) index.html:
<form class="task-form">
<h4>task manager</h4>
<div class="form-control">
<input
type="text"
name="name"
class="task-input"
placeholder="e.g. study"
/>
</div>
<div class="form-control">
<input type="date" name="date" class="task-input" />
</div>
<button type="submit" class="btn submit-btn">submit</button>
​
<div class="form-alert"></div>
</form>
(relevant portion of) script:
const tasksDOM = document.querySelector(".tasks");
const loadingDOM = document.querySelector(".loading-text");
const formDOM = document.querySelector(".task-form");
const taskInputDOM = document.querySelector(".task-input");
const formAlertDOM = document.querySelector(".form-alert");
// Load tasks from /api/tasks
const showTasks = async () => {
loadingDOM.style.visibility = "visible";
try {
const {
data: { tasks },
} = await axios.get("/api/v1/tasks");
if (tasks.length < 1) {
tasksDOM.innerHTML = '<h5 class="empty-list">No tasks in your list</h5>';
loadingDOM.style.visibility = "hidden";
return;
}
const allTasks = tasks
.map((task) => {
const { completed, _id: taskID, name, date } = task;
return `<div class="single-task ${completed && "task-completed"}">
<h5><span><i class="far fa-check-circle"></i></span>${name}</h5>
<div class="task-links">
// form
formDOM.addEventListener("submit", async (e) => {
e.preventDefault();
const name = taskInputDOM.value;
const date = taskInputDOM.value;
try {
await axios.post("/api/v1/tasks", { name, date });
showTasks();
taskInputDOM.value = "";
formAlertDOM.style.display = "block";
formAlertDOM.textContent = `success, task added`;
formAlertDOM.classList.add("text-success");
} catch (error) {
formAlertDOM.style.display = "block";
formAlertDOM.innerHTML = `error, please try again`;
}
setTimeout(() => {
formAlertDOM.style.display = "none";
formAlertDOM.classList.remove("text-success");
}, 3000);
});
Relevant mongoose schema:
const TaskSchema = new mongoose.Schema({
name: {
type: String,
required: [true, "A task must have a name."],
trim: true,
maxlength: [200, "A task cannot be more than 200 characters."],
},
completed: {
type: Boolean,
default: false,
},
date: {
type: Date,
required: [false, "A task must have a date."],
},
});
One thing I might have been able to spot is that the date input gets handled as a string instead of a date. This is what the chrome console network tab showed after I tried to add a task with the name 'work':
I'm really in the dark here in terms of a solution and I would love to finish this project. If anyone could give me a nudge in the right direction, it would be wildly appreciated!
With kind regards,
Bram

Answer 1

You are using the querySelector for ".task-input" which returns only the first occurence and then you used the same for "name" and "date" variables.
That's why it is taking same values in both.
Instead add an "id" to both of the inputs and select them by id.
index.html
<form class="task-form">
<h4>task manager</h4>
<div class="form-control">
<input
type="text"
name="name"
id="name"
class="task-input"
placeholder="e.g. study"
/>
</div>
<div class="form-control">
<input type="date" name="date" id="date" class="task-input" />
</div>
<button type="submit" class="btn submit-btn">submit</button>
​
<div class="form-alert"></div>
</form>
While handling form in JS
const tasksDOM = document.querySelector(".tasks");
const loadingDOM = document.querySelector(".loading-text");
const formDOM = document.querySelector(".task-form");
const taskInputDOM = document.querySelector(".task-input");
const formAlertDOM = document.querySelector(".form-alert");
// Load tasks from /api/tasks
const showTasks = async () => {
loadingDOM.style.visibility = "visible";
try {
const {
data: { tasks },
} = await axios.get("/api/v1/tasks");
if (tasks.length < 1) {
tasksDOM.innerHTML = '<h5 class="empty-list">No tasks in your list</h5>';
loadingDOM.style.visibility = "hidden";
return;
}
const allTasks = tasks
.map((task) => {
const { completed, _id: taskID, name, date } = task;
return `<div class="single-task ${completed && "task-completed"}">
<h5><span><i class="far fa-check-circle"></i></span>${name}</h5>
<div class="task-links">
// form
formDOM.addEventListener("submit", async (e) => {
e.preventDefault();
const name = document.getElementById("name").value;
const date = document.getElementById("date").value;
try {
await axios.post("/api/v1/tasks", { name, date });
showTasks();
taskInputDOM.value = "";
formAlertDOM.style.display = "block";
formAlertDOM.textContent = `success, task added`;
formAlertDOM.classList.add("text-success");
} catch (error) {
formAlertDOM.style.display = "block";
formAlertDOM.innerHTML = `error, please try again`;
}
setTimeout(() => {
formAlertDOM.style.display = "none";
formAlertDOM.classList.remove("text-success");
}, 3000);
});