<label>Выберите направление:
  <select id="direction">
    <option value="1">A &rarr; B</option>
    <option value="2">B &rarr; A</option>
    <option value="3">A &rarr; B &rarr; A</option>
  </select>
</label>

<div class="panel" id="blockAB">
  <label>A &rarr; B
    <select id="timesAB"></select>
  </label>
</div>
<div class="panel" id="blockBA">
  <label> B &rarr; A
    <select id="timesBA"></select>
  </label>
</div>

<div class="panel" id="output"></div>

.hidden { display: none }
.panel {
  width: 25vw;
  padding: 1em;
  margin: 1em;
  border: 1px solid #CCC;
}

"use strict";
console.clear();

const costAB = 700;
const costBA = 1200;
const travelTimeMinutes = 50;

const timesAB = `
  2021-08-21 18:00:00
  2021-08-21 18:30:00
  2021-08-21 18:45:00
  2021-08-21 19:00:00
  2021-08-21 19:15:00
  2021-08-21 21:00:00
`;

const timesBA = `
  2021-08-21 18:30:00
  2021-08-21 18:45:00
  2021-08-21 19:00:00
  2021-08-21 19:15:00
  2021-08-21 19:35:00
  2021-08-21 21:50:00
  2021-08-21 21:55:00
`;

const parseTimes = times => times
  .trim()
  .split('\n')
  .map(str => new Date(str.trim()));

const datesAB = parseTimes(timesAB);
const datesBA = parseTimes(timesBA);

const el = Object.fromEntries(
  [ 'direction', 'timesAB', 'timesBA', 'blockAB', 'blockBA', 'output' ]
    .map(id => [id, document.getElementById(id)])
);

const oo = n => n.toString().padStart(2, '0');

const createOptions = (datesArray, id) => {
  datesArray.forEach(time => {
    const option = document.createElement('option');
    option.value = time.getTime();
    option.innerText = `${oo(time.getHours())}:${oo(time.getMinutes())}`;
    el[id].appendChild(option);
  });
};

createOptions(datesAB, 'timesAB');
createOptions(datesBA, 'timesBA');

const filterBAOptions = () => {
  let latest = 0; // no limits
  if (el.direction.value & 1) { // A->B active
    latest = +el.timesAB.value + travelTimeMinutes * 6e4;
  }
  const isSelectionValid = +el.timesBA.value >= latest;
  let isFixApplied = false;
  
  el.timesBA.querySelectorAll('option').forEach(opt => {
    if (+opt.value < latest) {
      opt.setAttribute('disabled', 'disabled');
    } else {
      opt.removeAttribute('disabled');
      if (!isSelectionValid && !isFixApplied) {
        el.timesBA.value = opt.value;
        isFixApplied = true;
      }
    }
  });
};

const onDirectionChange = () => {
  const bits = +el.direction.value;
  el.blockAB.classList[bits & 1 ? 'remove' : 'add']('hidden');
  el.blockBA.classList[bits & 2 ? 'remove' : 'add']('hidden');
};

const updateTimes = () => {
  const abTime = el.timesAB.value;
}; 

const printTicket = () => {
  // const route = 
  const cost = 1 * (((el.direction.value & 1) ? costAB : 0) + ((el.direction.value & 2) && costBA)); 
  el.output.innerHTML = `
<p>4 билета по маршруту из A в B стоимостью ${cost} руб.</p>
<p>Это путешествие займет у вас 40 минут.</p>
<p>Теплоход отправляется в 12-00, а прибудет в 18-00.</p>
  `;
};

const update = () => (onDirectionChange(), filterBAOptions(), printTicket());

el.direction.addEventListener('change', update);
el.timesAB.addEventListener('change', update);
el.timesBA.addEventListener('change', update);

update();