Appear days of the week and times only be selected on the datetimepicker

Question

I’m using the datimepicker plugin https://xdsoft.net/jqplugins/datetimepicker/ and is working legal and configured with the topic answer Specific time for the day of the week in the datetimepicker

How do I show the times only when selecting one of the days that has specified times

For example if you don’t have any hours on Saturday

dayOfWeek[6] = { desc: "Sab", allowTimes: [] };

Then the Saturday times would not be displayed, because it is without any set time, in the answer of the topic I mentioned above it displays the times.

Answer 1

Leave array empty does not work. Use option timepicker with the value false which will hide the time column for the specific day of the week (or more than one day) you want.

Taking advantage of the example of the link that you quoted in the question, in this array of objects where each index corresponds to a day of the week, just you omit the key allowTimes of the day of the week where you don’t want the column to appear to select a time:

var dayOfWeek = {};
dayOfWeek[0] = { desc: "Dom" };
dayOfWeek[1] = { desc: "Seg", allowTimes: ['07:00', '09:00', '11:00', '13:00', '15:00'] };
dayOfWeek[2] = { desc: "Ter", allowTimes: ['08:00', '10:00', '12:00', '14:00', '16:00'] };
dayOfWeek[3] = { desc: "Qua", allowTimes: ['09:00', '11:00', '13:00', '15:00', '17:00'] };
dayOfWeek[4] = { desc: "Qui", allowTimes: ['10:00', '12:00', '14:00', '16:00', '18:00'] };
dayOfWeek[5] = { desc: "Sex", allowTimes: ['11:00', '13:00', '15:00', '17:00', '19:00'] };
dayOfWeek[6] = { desc: "Sáb" };

Notice that in the days Domingo and Saturday (indices 0 and 6) do not have the key allowTimes.

The key desc has no practical use there, serves only as a guide for you to know what day of the week is that object. You can even dismiss it, leaving, for example, in the case of Sunday and Saturday, an empty object type dayOfWeek[0] = {};

The code in the datetimepicker will check if the key allowTimes exists on the day of the corresponding week and hide or not the time column.

Obs.: I added a if (optional) in function onChangeDateTime to display only the date (without the time) on input if the selected day is one of the days where there is no time option.

Behold:

var dayOfWeek = {};
dayOfWeek[0] = { desc: "Dom" };
dayOfWeek[1] = { desc: "Seg", allowTimes: ['07:00', '09:00', '11:00', '13:00', '15:00'] };
dayOfWeek[2] = { desc: "Ter", allowTimes: ['08:00', '10:00', '12:00', '14:00', '16:00'] };
dayOfWeek[3] = { desc: "Qua", allowTimes: ['09:00', '11:00', '13:00', '15:00', '17:00'] };
dayOfWeek[4] = { desc: "Qui", allowTimes: ['10:00', '12:00', '14:00', '16:00', '18:00'] };
dayOfWeek[5] = { desc: "Sex", allowTimes: ['11:00', '13:00', '15:00', '17:00', '19:00'] };
dayOfWeek[6] = { desc: "Sáb" };

var data = new Date();

$.datetimepicker.setLocale('pt');
$('#datetimepicker').datetimepicker({
   timepicker: dayOfWeek[data.getDay()].allowTimes ? true : false,
   allowTimes:dayOfWeek[data.getDay()].allowTimes
   ,
   onChangeDateTime:function(date,input){
      if(date){
         data = date;
         var d = data.getDay();
         this.setOptions({
            timepicker: dayOfWeek[d].allowTimes ? true : false,
            allowTimes: dayOfWeek[d].allowTimes
         });
         
         if(!dayOfWeek[d].allowTimes){
            input.val(input.val().match(/^.{10}/)[0]); // retorna os 10 primeiros caracteres
         }
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<input id="datetimepicker" type="text">