单击datepicker时无法选择时间

时间:2017-05-23 12:02:17

标签: javascript jquery

我有两个输入框,一个用于选择日期,另一个用于选择时间,我试图根据某些条件验证这两个框,这样如果没有选择日期,时间不应该被选中,我是使用eonasdan datetimepicker,我得到了所需的输出,但没有单击时间戳可以帮助我解决这个问题

以下是我到目前为止所做的事情:

function starttime(){
            $('#starttime').datetimepicker({
                  format: 'HH:mm',
                  minDate: new Date()
                });
           }
           
           $('.start_time_addon').on('click keyup',function(){
            var x = $('#start').val();
           if (x == '') {

            alert('please select startdate first');
            return false;
           
           }
           else{

            starttime();
            
           }
          
        });
        
        var datePickerSix= $('.datetimepicker6');
          $(datePickerSix).datetimepicker({
          format: 'DD/MM/YYYY',
          
minDate: new Date()
        });
<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="row">
      <div class="col-xs-6">
          <div class="form-group">
                  <label>Start Date</label><br>
             <div class='input-group date datetimepicker6'>
                                    <input type='text' class="form-control" id="start" name="date_end"
                                           placeholder="DD/MM/YYYY"/>
                                    <span class="input-group-addon">
                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                            </span>
                                </div>
      <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 start_time_addon' id='starttime'>
                    <input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
                      </div>
                   </div>
        
                          </div>
                      </div>

1 个答案:

答案 0 :(得分:0)

 $('.datetimepicker6').datetimepicker({
          format: 'DD/MM/YYYY',
          
minDate: new Date()

        });
       $('.datetimepicker6').on("dp.change", function(e) {
            $('#starttime').datetimepicker({
            
                  format: 'HH:mm',
                  minDate: new Date()
                });

});
<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="row">
      <div class="col-xs-6">
          <div class="form-group">
                  <label>Start Date</label><br>
             <div class='input-group date datetimepicker6'>
                                    <input type='text' class="form-control input_date" id="start" name="date_end"
                                           placeholder="DD/MM/YYYY"/>
                                    <span class="input-group-addon">
                                                                <span class="glyphicon glyphicon-calendar"></span>
                                                            </span>
                                </div>
      <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 start_time_addon' id='starttime'>
                    <input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
                      </div>
                   </div>
        
                          </div>
                      </div>