问Timepicker不显示一次单击的时间
EN

Stack Overflow用户

提问于 2017-05-23 13:45:36

回答 1查看 1.2K关注 0票数 0

我有两个输入框，一个用于选择日期，另一个用于时间。我正在尝试基于一些条件来验证这两个框，如果没有选择日期，则不应该选择时间。

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

javascript

jquery

eonasdan-datetimepicker

稳定高可用网关

NAT 网关提供 IP 地址转换服务，为腾讯云内资源提供安全性更高的 Internet 访问服务。

回答 1

Stack Overflow用户

发布于 2017-06-07 10:55:16

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

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

使用date()方法获取日期选择器选择的日期，您可以侦听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>