【问题标题】:DateTimpicker not showing properly in jquery ui layoutDateTimepicker 在 jquery ui 布局中未正确显示
【发布时间】:2016-04-06 05:05:38
【问题描述】:

如何使 datetimepicker 在 jquery ui 布局中正常工作。当我单击位于南窗格中的文本字段时,日期时间选择器未显示。

见fiddle

<div class="ui-layout-north">North</div>
<div class="ui-layout-south">
  <div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>

    </div>
</div>


$(function(){
 $('body').layout({ applyDemoStyles: true });
      $('#datetimepicker1').datetimepicker();
});

提前谢谢你。

【问题讨论】:

    标签: css eonasdan-datetimepicker jquery-ui-layout


    【解决方案1】:

    您的代码中缺少moment.js。 我已经改变了它,现在它工作正常。 Here 是更新的小提琴。

    $(function(){
     $('body').layout({ applyDemoStyles: true });
          $('#datetimepicker1').datetimepicker();
    });
    

    您必须更新代码才能正确显示 datetimepicker。 更多格式可以参考https://eonasdan.github.io/bootstrap-datetimepicker/Options/。

    【讨论】:

    • 但是日期选择器没有正确显示,它在南窗格的后面
    • 您必须添加必要的 css 规则才能根据需要显示它。我刚刚修复了与不显示 datetimepicker 相关的错误。您在修复 CSS 方面也需要帮助吗?
    • 是的,需要帮助修复 css,我想正确显示 datetimpicker。应该添加什么 css 规则
    • 您可以强制您的日期范围选择器始终在左下角打开,而不是自动排列。使用以下代码。 $('#datetimepicker1').datetimepicker({widgetPositioning : { vertical : 'bottom', Horizo​​ntal : 'left' },这对你有帮助吗?
    • 不好看,因为由于 datetimepicker,它会在喊叫窗格中创建垂直滚动条...我试过垂直顶部,但仍然在喊叫窗格后面。
    猜你喜欢
    • 1970-01-01
    • 2018-01-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多