Kevin Powell - Community•14mo ago

How do I disable an input until a date is selected.

I am new to JS and I am working on a project. A booking project. I want to disable an input until a date is selected. Here is the JS:

const button = document.querySelector('.btn');
const date = document.querySelector('.date');

const currentDate = new Date();
date.addEventListener('input', function () {
  const pickedDate = new Date(this.value);
  if (pickedDate < currentDate || pickedDate == null) {
    button.classList.toggle('disabled');
  } else {
    button.classList.toggle('disabled');
  }
});

const button = document.querySelector('.btn');
const date = document.querySelector('.date');

const currentDate = new Date();
date.addEventListener('input', function () {
  const pickedDate = new Date(this.value);
  if (pickedDate < currentDate || pickedDate == null) {
    button.classList.toggle('disabled');
  } else {
    button.classList.toggle('disabled');
  }
});

Here is the html:

<input type="date" name="date" id="date" class="date">
<input type="submit" class="btn" value="Book Pitch" name="book_pitch">

<input type="date" name="date" id="date" class="date">
<input type="submit" class="btn" value="Book Pitch" name="book_pitch">

The disabled class:

.disabled {
  display: none;
}

.disabled {
  display: none;
}

8 Replies

Jochem•14mo ago

I'd use add or remove instead of toggle, but that seems fine. Is it not working? Might be handy to make a codepen that demonstrates the issue if you're having a problem

Chris Bolson•14mo ago

Assuming that there is no initial date when the page loads, you need to "disable" the button directly. Ideally a button would be disabled by adding the "disabled" attribute to it, but, as you are setting it's display to "hidden" you can add your "disabled" class to the button. As @jochemm suggests, it might be safer to use add/remove rather than toggle as this might get confusing. Personally I wouldn't hide it as I prefer to set it's disabled state but there may be a reason as to why you need to hide it.

Jochem•14mo ago

ah, good catch on the initial page load

hotsauce4dayz•14mo ago

Okay. Let me create the code pen.

hotsauce4dayz•14mo ago

https://codepen.io/KhumboMunsaka/pen/GRYQJWP

KhumboMunsaka

CodePen

GRYQJWP

...

hotsauce4dayz•14mo ago

There is the code pen Or is what Chris said the best thing I should do. If I were to use this method, is this correct?

Chris Bolson•14mo ago

You need to hide your button on page load. Just add your class "disabled" to the submit button. Bear in mind that your JavaScript code won't take affect until the user selects a date so you need to "hide" it before anything happens. The reasons I would use the disabled attribute are threefold: 1. By hiding and displaying it it may cause the elements to jump about on the page (depending on your css). 2. It is clear to the user that they must select a date before submitting - otherwise all they can see is a date field but won't know what to do with it. 3. I am not 100% sure that by setting display: none on the button this will actually prevent the form from being submitted.

Jochem•14mo ago

100% what Chris is saying

Gaming

Programming

How do I disable an input until a date is selected.