javascript - 时间选择器单击一次不显示时间

Question

我有两个输入框，一个用于选择日期，另一个用于选择时间。我试图根据某些条件验证这两个框，这样如果未选择日期，则不应选择时间。

我正在使用 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>

Answer 1

问题是只有在单击时间选择器后才对其进行初始化，因此第一次单击时日期时间选择器尚未构建。将 starttime 初始化从 starttime 移至 document.ready。

当用户无法选择小时时，我建议禁用starttime datetimepicker。您可以使用disable()和 enable()日期时间选择器的方法。

使用date()方法获取datetimepicker选择的日期，你可以听 dp.change当用户选择日期时要知道的事件。

这是一个完整的示例:

$('#startdate').datetimepicker({
  format: 'DD/MM/YYYY',
  minDate: new Date()
}).on('dp.change', function(e){
  if( e.date ){
    // Enable timepicker only if date is selected
    $('#starttime').data("DateTimePicker").enable();
  } else {
    $('#starttime').data("DateTimePicker").disable();
  }
});

$('#starttime').datetimepicker({
  format: 'HH:mm',
  minDate: new Date(),
  useCurrent: false
});
// Disable time picker
$('#starttime').data("DateTimePicker").disable();
           
$('.start_time_addon').on('click keyup',function(){
  var x = $('#startdate').data("DateTimePicker").date();
  if ( !x ) {
    alert('please select startdate first');
    return false;
  }
});
        

<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.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="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.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' id="startdate">
        <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>

我已添加useCurrent: false时间选择器的选项以防止获取当前时间。