CODEWITHSUNDEEP
javascriptjquery
parshu123
parshu123

Reputation: 27

End Time should be greater than Start Time

I have two time pickers one is for start Time and another for End Time, The End Time must be always greater than start time. I am using eonasdan datetimepicker. If start date is greater than end date it should not allow or we need to get pop. Please help me out with this

Here's what i have done so far

$('#starttime,#endtime').datetimepicker({
  format: 'HH:mm'
});

var start_time = $('#Start_Time').val();

var end_time = $('#End_Time').val();

if (Date.parse(start_time) > Date.parse(end_time)) {
  alert('start time should be smaller');
}
<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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <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='starttime'>
        <input type='text' class="form-control" id="End_Time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 22553

Answers (5)

Vivek Savani
Vivek Savani

Reputation: 1

Set time validation with AM and PM

   var startTime = $('.StartTime').datetimepicker({ 
     "allowInputToggle": true,
     "showClose": true,
     "showClear": true,
     "showTodayButton": true,
     "format": ' hh:mm A',
     "useCurrent": false 
   })

   var endTime =  $('.EndTime').datetimepicker({ 
    "allowInputToggle": true,
    "showClose": true,
    "showClear": true,
    "showTodayButton": true,
    "format": ' hh:mm A',
    "useCurrent": false })
   .on("dp.change", function (e) {
        minDate: startTime.data("DateTimePicker").date()
        bindMinEndTimeToStartTime(startTime);
        bound = true;
        setMinDate(endTime,startTime);
    });


    function setMinDate(endTime,startTime) {
        return 
        endTime.data("DateTimePicker").minDate(startTime.data("DateTimePicker").date()
      );
   }

  function bindMinEndTimeToStartTime(startTime) {
      var bound = false;
      return bound || startTime.on('dp.change', setMinDate);
  }

Upvotes: 0

user9050600
user9050600

Reputation:

I did some thing with timepicker

Fiddle Link Over here...!

https://fiddle.jshell.net/kxL0f1gc/

<link href="https://adminlte.io/themes/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.css">

<script src="https://adminlte.io/themes/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.js"></script>

Try this HTML Code

                   <div class="col-md-12">
                        <div class="row"> 
                          <div class="col-md-6">
                            <div class="form-group bootstrap-timepicker">
                                <label class="control-label">Start Time</label>
                                <input id="start" name="start" ng-model="start" type="text" required="required" class="form-control start" />
                            </div>
                          </div>
                          <div class="col-md-6">
                            <div class="form-group bootstrap-timepicker">
                                <label class="control-label">End Time</label>
                                <input id="end" name="end" ng-model="end" type="text" required="required" class="form-control end" />
                            </div>
                          </div>
                        </div>
                    </div>

$('.start, .end').timepicker({
  showInputs: false,
  minuteStep: 1,
});
$( "#end, #start" ).change(function() {
var time = $("#start").val();
var hours = Number(time.match(/^(\d+)/)[1]);
var minutes = Number(time.match(/:(\d+)/)[1]);
var AMPM = time.match(/\s(.*)$/)[1];
if(AMPM == "PM" && hours<12) hours = hours+12;
if(AMPM == "AM" && hours==12) hours = hours-12;
var sHours = hours.toString();
var sMinutes = minutes.toString();
if(hours<10) sHours = "0" + sHours;
if(minutes<10) sMinutes = "0" + sMinutes;
var time2 = $("#end").val();
if(time2=="")
  {
   var time2 = "00:00 AM";
  }
  var hours2 = Number(time2.match(/^(\d+)/)[1]);
  var minutes2 = Number(time2.match(/:(\d+)/)[1]);
  var AMPM2 = time2.match(/\s(.*)$/)[1];
  if(AMPM2 == "PM" && hours2<12) hours2 = hours2+12;
  if(AMPM2 == "AM" && hours2==12) hours2 = hours2-12;
  var sHours2 = hours2.toString();
  var sMinutes2 = minutes2.toString();
  if(hours2<10) sHours2 = "0" + sHours2;
  if(minutes2<10) sMinutes2 = "0" + sMinutes2;
  var comparehour = sHours2-sHours;
  var comparemin = sMinutes2-sMinutes;
  if(comparehour<0)
  {
   $("#end").val(time);
  }
 else if((comparehour==0) && (comparemin<0))
  {
   $("#end").val(time);
  }
  });

Upvotes: 0

Nithin John
Nithin John

Reputation: 917

Disable the past dates than start date in end_time text box. Something like this, please replace textbox id as in your html code.

$( "#startDate" ).datepicker({
  onSelect: function(dateText, inst) {
    $('#endDate').datepicker('option', 'minDate', $(this).val());
  },
  minDate: 0
});
$( "#endDate" ).datepicker({
  onSelect: function(dateText, inst) {
    if($( "#startDate" ).val() == ''){
      $( "#endDate" ).val('');
    }
  },
})

Upvotes: 0

Hitmands
Hitmands

Reputation: 14199

You may need to update the endTime.minDate on each startTime.change event. Try to follow my example:

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: 3

Dhrutika Rathod
Dhrutika Rathod

Reputation: 560

 var startDate = Date.parse($('#txtdatetimepicker1').val());
 var endDate = Date.parse($('#txtdatetimepicker2').val());
 if (startDate >= endDate) { alert("Please enter proper date") }

Upvotes: 1

Related Questions