Skip to content

timepicker.js

js
const HOURS_OPTION = Array.from({length: 24}, (_value, index) => index);
const MINUTES_OPTION = Array.from({length: 6}, (_value, index) => index * 10);

const setMinutes = ({baseDate, minutes = 0}) => {
  const date = new Date(baseDate);
  date.setMilliseconds(0);
  date.setSeconds(0);
  date.setMinutes(minutes);
  return date;
};

const setTime = ({baseDate, hours = 0, minutes = 0}) => {
  const date = setMinutes({baseDate, minutes});
  date.setHours(hours);
  return date;
};

const filterDate = ({options, minTime, maxTime}) => {
  return options.filter(optionDate => {
    if (minTime && optionDate < minTime) {
      return false;
    }
    if (maxTime && optionDate > maxTime) {
      return false;
    }
    return true;
  })
}

const toTimeOptions = ({baseDate = new Date(), minTime, maxTime} = {}) => {
  return {
    hours: null,
    minutes: null,
    get hoursOptions() {
      const options = HOURS_OPTION
        .map((hours) => setTime({baseDate, hours}));
      const minutes = 0;
      const hourMinTime = setMinutes({minutes, baseDate: minTime});
      const hourMaxTime = setMinutes({minutes, baseDate: maxTime});
      return filterDate({options, minTime: hourMinTime, maxTime: hourMaxTime})
    },
    get minutesOptions() {
      const options = MINUTES_OPTION
        .map((minutes) => {
          return setTime({
            baseDate,
            minutes,
            hours: this.hours,
          })
        });
      return filterDate({options, minTime, maxTime})
    }
  }
};

example.js

js
const timePicker = toTimeOptions({
  baseDate: new Date('2020-04-16T00:00:00'),
  minTime: new Date('2020-04-16T08:20:00'),
  maxTime: new Date('2020-04-16T14:50:00'),
});

console.log(timePicker.hoursOptions.map(date => date.getHours()));
// [8, 9, 10, 11, 12, 13, 14]
timePicker.hours = 8;
console.log(timePicker.minutesOptions.map(date => date.getMinutes()));
// [20, 30, 40, 50]