title: End Time should be greater than Start Time
body: <p>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</p>
  
  <p>Here's what i have done so far</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#starttime,#endtime').datetimepicker({
    format: 'HH:mm'
  });
  
  var start_time = $('#Start_Time').val();
  
  var end_time = $('#End_Time').val();
  
  if (Date.parse(start_time) &gt; Date.parse(end_time)) {
    alert('start time should be smaller');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
    &lt;div class="col-xs-6"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="start_time" class="col-form-label"&gt;Start Time&lt;/label&gt;
        &lt;div class='input-group date' id='starttime'&gt;
          &lt;input type='text' class="form-control" id="Start_Time" /&gt;
          &lt;span class="input-group-addon"&gt;
              &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-6"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="end_time" class="col-form-label"&gt;End Time&lt;/label&gt;
        &lt;div class='input-group date' id='starttime'&gt;
          &lt;input type='text' class="form-control" id="End_Time" /&gt;
          &lt;span class="input-group-addon"&gt;
              &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>