Specific time for day of the week in datetimepicker

Question

Specific time for day of the week in datetimepicker

Navigation

#1 by (1 votes)

1

I have a specific form of datetimepicker, working cool, however, I need every day of the week to have a different time, for example, on Sunday there are 2 available times, the second 3 times, the other another time on Tuesday, how can I do that?

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>

javascript datetime datepicker forms

asked by anonymous 30.10.2015 / 12:51

1 answer

Get-ChildItem -Recurse does not return recursively How to manipulate data coming from the bank using PDO

score 1 · Accepted Answer

I believe you are using xdsoft DatePicker. I say this because of the name of the events.

Here is an example of changing the times 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><scriptsrc="https://rawgit.com/xdan/datetimepicker/master/build/jquery.datetimepicker.full.js"></script>

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