首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Timepicker不显示一次单击的时间

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

Stack Overflow用户
提问于 2017-05-23 21:45:36
回答 1查看 1.2K关注 0票数 0

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

我正在使用eonasdan datetimepicker,我得到了想要的输出,但不是单击一下时间选择器。有人能帮我解决这个问题吗?

以下是我到目前为止所做的工作:

代码语言:javascript
代码运行次数:0
运行
复制
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()
});
代码语言:javascript
代码运行次数:0
运行
复制
<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>

EN

回答 1

Stack Overflow用户

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

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

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

使用date()方法获取日期选择器选择的日期,您可以侦听dp.change事件以获知用户选择日期的时间。

下面是一个完整的示例:

代码语言:javascript
代码运行次数:0
运行
复制
$('#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;
  }
});
代码语言:javascript
代码运行次数:0
运行
复制
<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>

我已经在timepicker中添加了useCurrent: false选项,以防止获取当前时间。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44136627

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档