javascript – bootstrap日期时间选择器,单击图像时显示对话框

前端之家收集整理的这篇文章主要介绍了javascript – bootstrap日期时间选择器,单击图像时显示对话框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用bootstrap日期时间选择器进行输入.

我定义了以下html div

  1. <div class="form-group">
  2. <label for="movingDate">Moving Date</label>
  3. <div class="input-group date ui-datepicker">
  4. <input type="text" id="prefMovingDate" name="movingDateTime" class="form-control" data-required="true">
  5. <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  6. </div>
  7. </div>

这个javascript启用bootstrap日期时间选择器

  1. $('#prefMovingDate').datetimepicker({
  2. format : 'd-M-yyyy H:ii P',autoclose : true,});

输出如下

现在,当我点击文本框时,我看到了这一点

这很好,但我想要的是,即使点击了小日历图标,也会出现日期选择弹出窗口.我尝试了各种方法,但我无法理解它.任何有关这方面的帮助将不胜感激.

解决方法

在日历图标上尝试点击事件,并触发对输入#prefMovingDate的关注:
  1. $('.input-group').find('.fa-calendar').on('click',function(){
  2. $(this).parent().siblings('#prefMovingDate').trigger('focus');
  3. });

或者如果这个id #prefMovingDate对于页面是唯一的,那么你可以简单地这样做:

  1. $('.input-group').find('.fa-calendar').on('click',function(){
  2. $('#prefMovingDate').trigger('focus');
  3. });

猜你在找的JavaScript相关文章