CODEWITHSUNDEEP
javascriptjquery
user15129338
user15129338

Reputation:

End Time should not be lower than Start Time and the End time should not go higher then 23:59

I have two time pickers one is for start Time and another for End Time, The End Time must always be greater than start time. I am using datetimepicker. If start date is greater than end date it should not allow or we need to get pop. I fixed this, but i can't manage to fix that the endtime should not go higher than 23:59 Please help me out with this.

Here's what i have done so far.

function TimePickerCtrl($) {
  var startTime = $('#starttime').datetimepicker({
    format: 'HH:mm'
  });
  
  var endTime = $('#endtime').datetimepicker({
    format: 'HH:mm',
    minDate: startTime.data("DateTimePicker").date()
  });
  
  function setMinDate() {
    return endTime
      .data("DateTimePicker").minDate(
        startTime.data("DateTimePicker").date()
      )
    ;
  }
  
  var bound = false;
  function bindMinEndTimeToStartTime() {
  
    return bound || startTime.on('dp.change', setMinDate);
  }
  
  endTime.on('dp.change', () => {
    bindMinEndTimeToStartTime();
    bound = true;
    setMinDate();
  });
}

$(document).ready(TimePickerCtrl);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container" style="padding-top: 50px">

<div class="row">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="start_time" class="col-form-label">Start Time</label>
      <div class='input-group date' id='starttime'>
        <input type='text' class="form-control" id="Start_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="end_time" class="col-form-label">End Time</label>
      <div class='input-group date' id='endtime'>
        <input type='text' class="form-control" id="Start_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
</div>
</div>

Upvotes: 0

Views: 1126

Answers (1)

Zac
Zac

Reputation: 1542

Maybe you can just manually set the maxDate like this:

const maxDate = new Date();
maxDate.setHours(23);
maxDate.setMinutes(59);

function TimePickerCtrl($) {
  var startTime = $('#starttime').datetimepicker({
    format: 'HH:mm'
  });
  
  var endTime = $('#endtime').datetimepicker({
    format: 'HH:mm',
    minDate: startTime.data("DateTimePicker").date(),
    maxDate
  });
  
  
  function setMinDate() {
    return endTime
      .data("DateTimePicker").minDate(
        startTime.data("DateTimePicker").date()
      )
    ;
  }
  
  var bound = false;
  function bindMinEndTimeToStartTime() {
  
    return bound || startTime.on('dp.change', setMinDate);
  }
  
  endTime.on('dp.change', () => {
    bindMinEndTimeToStartTime();
    bound = true;
    setMinDate();
  });
}

$(document).ready(TimePickerCtrl);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container" style="padding-top: 50px">

<div class="row">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="start_time" class="col-form-label">Start Time</label>
      <div class='input-group date' id='starttime'>
        <input type='text' class="form-control" id="Start_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="end_time" class="col-form-label">End Time</label>
      <div class='input-group date' id='endtime'>
        <input type='text' class="form-control" id="Start_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
</div>
</div>

Upvotes: 1

Related Questions