Switch input selection according to the time

Question

I am currently writing a small program that saves workers as "IN" in the morning and saves "OUT", I want the program to switch the radio to "IN" in the morning and disables "OUT". The same thing in the afternoon, switch the radio to "OUT" and disables "IN"

function EnableDisable() {

  var today = new Date();
  var curHr = today.getHours();

  if (curHr > 12) {
    option1.disabled = true;
    option1.disabled = false;
    alert("come here");

  } else {
    option1.disabled = false;
    option2.disabled = true;;
  }
};

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success active">
    <input type="radio" class="form-control input-lg" name="status" value="in" id="option1" autocomplete="off" checked disabled="disabled"> In
    </label>
  <label class="btn btn-danger">
    <input type="radio" name="status" value="out" id="option2" autocomplete="off" disabled="disabled"> Out
    </label>
</div>

If there are only two options in radio buttons. And they are both depending solely on time of day. Why even make this radio buttons? Its not like user can switch it?! And you should really take a better look disabled and checked propriety. — ikiK, Oct 12 '20 at 17:23
please, what I just need is to select the in radio automatically in the morning then in the afternoon the out radio should be selected automatically, please — Fyoni Boni, Oct 12 '20 at 18:12
Does this answer your question? [Check a radio button with javascript](https://stackoverflow.com/questions/21166860/check-a-radio-button-with-javascript) also research `readonly` property, i think you need that not `disabled`. — ikiK, Oct 12 '20 at 18:44

score 1 · Answer 1 · answered Oct 12 '20 at 18:17

I recommend you split the functionality. You shouldn't try to handle multiplay states within the same method. Your project needs the following methods:

Init(h) the function you call once when you startup the project
CheckIn(input) the function that handles saving the checkIn time
CheckOut(input) the function that handles saving the checkOut time

Remaining functionality like disabling the IN button when it's not been checked before 12 should be its own method and could be handled with an interval.

Eventually, you would get something like this:

const init = (h) => {
    const btnGroup = document.querySelector('.btn-group');
  const btnSucess = btnGroup.querySelector('.btn-success input');
  const btnDanger = btnGroup.querySelector('.btn-danger input');
  
  const isMorning = h > 6 && h < 12;
  const isAfternoon = h > 12 && h < 20;
  
  if(isMorning) {
    btnSucess.disabled = false;
    btnDanger.disabled = true;
  } else if(isAfternoon) {
    btnSucess.disabled = true;
    btnDanger.disabled = false;
  } else {
    btnSucess.disabled = true;
    btnDanger.disabled = true;
  }
}

const checkIn = (input) => {
  input.disabled = true;
  const today = new Date();
  console.log(today.toString());
}
const checkOut = (input) => {
  input.disabled = true;
  const today = new Date();
  console.log(today.toString());
}

const setup = () => {
    const hours = new Date().getHours();
    init(hours);

}

// Load
window.addEventListener('load', setup);

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success active">
    <input type="radio" class="form-control input-lg" name="status" value="in" id="option1" autocomplete="off" onInput="checkIn(this)"> In
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="status" value="out" id="option2" autocomplete="off" onInput="checkOut(this)" disabled> Out
  </label>
</div>

This is of course not perfect code. You should check within your checkOut() function if there is a checkIn time saved. I recommend saving this time by using new Date().getTime() for doing this.

This should be enough to give you a headstart. I want to point out that your system currently isn't that flexible. If for example there is something that has to be checked-IN after 12 then you might have a problem. You should work on your business case what should happen if a user doesn't follow the model traject you have build.

Good Luck

Switch input selection according to the time

1 Answers1