Search code examples
javascriptjquerytwitter-bootstrapdatetimepickerbootstrap-datetimepicker

DateTimePicker like reservation system

I need to prepare an input for date and time which can disable time in the specific date. I prepared a Bootstrap 3 DateTimePicker for that:

$('#ScheduledAt').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    disabledDates: [
         moment("2017-12-05 9:00"),
    ],
    daysOfWeekDisabled: [0, 7],
    stepping: 30,
    enabledHours: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
})

The stepping is 30 minutes, so on 2017-12-05 at 9:00 someone reserved something, but on 2017-12-05 at 9:30 I can create a reservation. When I will set up like upper I can't click this specific date and choose another time. Is there any possibility to do that? Or another plugin?

Solution

  • Have you tried with disabledtimeintervals option of eonasdan bootstrap-datetimepicker?

    Here is a CodePen: https://codepen.io/beaver71/pen/gXyrwR showing this functionality.

    $('#ScheduledAt').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    toolbarPlacement: 'top',
		showClear: true, 
		showClose: true, 
		sideBySide: true,
    disabledTimeIntervals: [
      [moment("2017-12-05 8:40"),moment("2017-12-05 9:20")],
    ],
    daysOfWeekDisabled: [0, 7],
    stepping: 30,
    enabledHours: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">
      <div class="panel-body">
        <form id="srcForm">
          <div class="row">
            <div class="form-group col-xs-12">
              <label>Date</label>
              <div id="ScheduledAt" class="input-group">
                <input type="text" class="form-control" name="from">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
</div>

    The interval [moment("2017-12-05 8:40"),moment("2017-12-05 9:20")] is used to disable 2017-12-05 9:00 datetime.