Specific time for the day of the week in the datetimepicker

Asked

Viewed 1,014 times

1

I have a specific form of datetimepicker, working cool, however, I need each day of the week to have a different time, for example, on Sunday have 2 times available, on Monday 3 times, on Tuesday another time, how can I do this?

my code is:

$(function() {
  $.datetimepicker.setLocale('pt-BR');
  $( "#calendario" ).datetimepicker({
    theme:'dark',
    beforeShowDay: function (date) {
      var day = date.getDay();
      return [(day != 0)]; //0-Sunday 6-Saturdayreturn [(day != 0];
    },
    format:'d/m/Y H:i',
    allowTimes:['06:00','07:00','08:00','12:30','18:00','19:00','17:20','19:00','20:00'],
    minDate: 0,
    autoclose: true,
    weekStart: 1,
    disabledDates:['2015/10/28','2015/11/02','1986/01/10'],
    // revalidar caso digite data errada
    onSelect: function (calendario, inst) {
      $('#calendario').text(this.value);
      $('#defaultForm').bootstrapValidator('revalidateField', 'calendario');
    }
  })
});
<div class="form-group">
  <label control-label>Data:</label>
  <div class="controls">
    <div class="input-group">
      <input id="calendario" type="text" class="date-picker form-control" name="calendario" placeholder="Data do agendamento" disabled/>
      <label for="calendario" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span></label>
    </div>
  </div>     
</div>

1 answer

2


I believe you are using xdsoft’s Datepicker. I say this because of the name of the events.

Here is an example of changing the timetable according to the day of the week.

var dayOfWeek = {};
dayOfWeek[0] = { desc: "Dom", allowTimes: [] };
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: "Sab", allowTimes: [] };


$.datetimepicker.setLocale('pt');
var data = new Date();
$('#datepicker').datetimepicker({
  allowTimes: dayOfWeek[data.getDay()].allowTimes,
  onChangeDateTime:function(date, input){
    data = date;
    this.setOptions({
      allowTimes: dayOfWeek[data.getDay()].allowTimes
    });
  },
  onGenerate:function( ct ){
    $(this).find('.xdsoft_date.xdsoft_weekend').addClass('xdsoft_disabled');
  },
});
<link href="https://rawgit.com/xdan/datetimepicker/master/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/xdan/datetimepicker/master/build/jquery.datetimepicker.full.js"></script>

<input id="datepicker" type="text" />

  • Bro, this is exactly what I needed, I searched everywhere and couldn’t find, vlw!

  • @Rubensjunior, just next time remember to inform which plugin you are using, luckily I use it in my projects and managed to identify that it was him.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.