How to allow a Time Interval with Bootstrap4 Date Time Picker

问题

I need to enable the hours based in this rule: Starting 1 hour from now and allow a range of 8 hours.

E.G, say now it's 13:00. So my picker should allow only hours between 14:00 - 22:00. If the current time its 21:00, it should allow 22:00 - 06:00.

Here's the code of my Date Picker:

const datePicker = () => {
  $('.datetimepicker').datetimepicker({
    format: 'LT',
    locale: 'PT-BR',
    icons: {
      up: "fa fa-chevron-up",
      down: "fa fa-chevron-down",
    },
    stepping: 15,
  });
};

I created some helper functions to get the edges.

const hourStart = () => {
  const start = new Date();
  start.setHours(start.getHours() + 1);
  return start;
}

const hourFinish = () => {
  const finish = new Date()
  finish.setHours(hourStart().getHours() + 8);
  return finish;
}

I couldn't find anything in documentation which allows set the enabled time interval, only the exact oposite Disable Time Intervals.

Maybe using the Enabled Hours and some sort of Circular List?

There's any other way to achieve the expected behavior using this plugin?

回答1:

Consider using getTime instead of getHours:

const hadd = (d,h) => d.getTime()+(h*3600000);
const date0 = new Date('June 8, 2020 21:24:00');
console.log(date0);
console.log(new Date(hadd(date0,1)));
console.log(new Date(hadd(date0,9)));

should print (with your own Time zone):

// Mon Jun 08 2020 21:24:00 GMT+0200 (Central European Summer Time)
// Mon Jun 08 2020 22:24:00 GMT+0200 (Central European Summer Time)
// Tue Jun 09 2020 06:24:00 GMT+0200 (Central European Summer Time)

回答2:

You would need to set on timepicker min and max

const minHours = new Date().getHours() + 1;
const maxHours = new Date().getHours() + 8;

来源：https://stackoverflow.com/questions/62238342/how-to-allow-a-time-interval-with-bootstrap4-date-time-picker

标签

javascript

bootstrap-datetimepicker