How to pass a date input into mongoDB with NodeJS

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

Dharman · Accepted Answer · 2021-08-09 12:52:52Z

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);
});

This works flawlessly. Thank you very much for taking the effort and answering my question!
@BramKuitert Please mark this answer as accepted, so it may help others in future.

Collectives™ on Stack Overflow

How to pass a date input into mongoDB with NodeJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related