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

问题是你只有在点击它之后才初始化时间选择器，所以在第一次点击时，还没有构建datetimepicker。将starttime初始化从starttime移至document.ready。

我建议在用户无法选择小时时禁用starttime datetimepicker。您可以使用datetimepicker的disable()和enable()方法。

使用date()方法获取datetimepicker所选日期，您可以在用户选择日期时收听已知的dp.change事件。

这是一个完整的例子：

＆＃13;

$('#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;
  }
});

＆＃13;

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

＆＃13;

我已将useCurrent: false选项添加到timepicker以防止获取当前时间。

Timepicker没有显示单击的时间

1 个答案: