How to create a due date reminder?

Question

I am a beginner. I'm am trying to create a function that simply switches texts. When the due date set has been reached, the text displayed would be "Expired"; if this date hasn't be reached, the text remains as "Active" . If there is a better way to do this, I'd appreciate it.

The problem I have is that the date is saved as a string in my database and I want to know if there is a way to convert this to a normal date format.

Here's what I've tried and the logic I followed. Any help would be greatly appreciated.

var exp_date = document.getElementById("datex").value = test;
var today_date = new Date().toLocaleDateString();

var state1 = `  <div class="valida-table-field estatuto validado">
                        <div>Active</div>
                   </div>
                  `

var state2 = ` <div class="valida-table-field estatuto rejeitado">
                        <div> Expired </div>
                   </div>`

function state() {
  if (today_date != exp_date) {
    document.getElementById('disp_state').innerHTML = state1
  } else if (today_date = exp_date) {
    document.getElementById('disp_state').innerHTML = state2
  }
}

<div class="valida-table-field data" id="datex">
  <div>[[${ order.date }]]</div>
</div>

<div id="disp_state">
  <!-- Display Text here -->
</div>

Does this answer your question? [How to create a date object from string in javascript](https://stackoverflow.com/questions/8224459/how-to-create-a-date-object-from-string-in-javascript) — Srilal Sachintha, Feb 10 '21 at 10:41
There are many, many, many posts that ask this question, "Can I convert a string to Date object", and in pretty much every one of these posts, somebody says it's been asked countless times before and it's a duplicate — Jeremy Thille, Feb 10 '21 at 10:47
To @SrilalSachintha... I tested i and still gave the same response: "NaN-NaN-NaN. Which means its still not a number. Thanks for your time and effort. — Dados Pesoas, Feb 10 '21 at 11:15
To @JeremyThille... Thanks, can you help me build a function to solve the problem I specified in the first paragraph, I'd appreciate that. — Dados Pesoas, Feb 10 '21 at 11:22

Gustavo Shigueo · Answer 1 · 2021-02-10T11:24:26.553

Due to the question containing a few words in Portuguese in the code, I'll be writing text and commentaries in Portuguese to try to explain it better, since that's also my native language

JavaScript:

  const todayDate = new Date()
  const expDate = document.querySelector('#datex').innerText
  const display = document.querySelector('#disp_state')
  // Não se preocupe com ocódigo sem ;  - ele é opcional em JS
  
  const elementoHTML = document.createElement('div')
  elementoHTML.className = 'valida-table-field estatuto'

  // Lembre-se que datas são interpretadas em mm/dd/aaaa, você precisa converter expDate pra esse formato

  function convertDate(date) {
    const dateArr = date.split('/')
    return `${dateArr[1]}/${dateArr[0]}/${dateArr[2]}` // Use crases aqui ao invés de aspas
  }

  const expDateNew = new Date(convertDate(expDate))

  // Testando se expDate é no futuro... pra saber se é exatamente hoje, use === ao invés de <
  if (todayDate < expDateNew) {
    elementoHTML.classlist.add('validado')
    elementoHTML.innerText = 'Active'
  } else {
    elementoHTML.classlist.add('rejeitado')
    elementoHTML.innerText = 'Expired'
  }

  display.appendChild(elementoHTML)

HTML:

<div class="valida-table-field data" id="datex">[[${ order.date }]]</div>

<div id="disp_state">
  <!-- Display Text here -->
</div>

Observações:

O seu código também tem alguns erros, exemplo: else if (today_date = exp_date) a = b não executa uma comparação, isso faz com que a se torne b...

let a = 1
let b = 2
if (a = b) {}
console.log(a) // escreve 2 no console

Para comparar, use dois ou três iguais (na maioria das vezes em JS, use três)

let a = 1
let b = 2
if (a === b) {}
console.log(a) // escreve 1 no console

How to create a due date reminder?

1 Answers1