Question

我希望用户选择有效的开始和结束时间。例如，结束时间应大于开始时间。我正在使用 bootstrap- timepicker gem

到目前为止，我有这样的想法：

HTML

<p>   Start time:
    <div class="input-append bootstrap-timepicker">
              <%= f.text_field :work1, :id=> 'timepicker' ,:class => 'input-small' %>
      <span class="add-on"><i class="icon-time"></i></span>

    </div>

  End time
    <div class="input-append bootstrap-timepicker">

     <%= f.text_field :work2, :id=> 'timepicker1' ,:class => 'input-small' %>
      <span class="add-on"><i class="icon-time"></i></span>

    </div> </p>

的Javascript

<script type="text/javascript">
        $("#timepicker, #timepicker1").timepicker(  {
                showMeridian: false

            }); 

             $("#timepicker1").change(function () {
                 var startDate = document.getElementById("timepicker").value;
                var endDate = document.getElementById("timepicker1").value;

                if ((Date.parse(endDate) <= Date.parse(startDate))) {
                 alert("End time should be greater than Start time");
                document.getElementById("timepicker1").value = "";
   } });

当我更改结束时间时，控制台上没有错误。我相信这可能是因为Date.parse。应该是时间吗？我尝试Time.parse但在控制台中出错了。 Time is not defined。

谢谢！

Answer 1

如果您正在使用Joris de Wit插件引导时间戳，那么这是您的解决方案Bootstrap-timepicker

$('#opening').timepicker().on('hide.timepicker', function(e) {
     openingHour = e.time.hours;
     openingMinutes = e.time.minutes;
     document.getElementById('closing').value = "";    
});

$('#closing').timepicker().on('hide.timepicker', function(e) {
     closingHour =  e.time.hours;
     closingMinutes = e.time.minutes;

     if(closingHour < openingHour){
         document.getElementById('closing').value = "";
         alert("End Time should be greater than Opening Time");
     }

     if(openingHour == closingHour && openingMinutes > closingMinutes){
         document.getElementById('closing').value = "";
         alert("End Time should be greater than Opening Time");
     }
});

验证Bootstrap - Timepicker开始和结束时间

1 个答案: