Question

我正在使用JQM datebox，但我不能让它在一行中显示多个日期输入。这是我最接近的：

<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain">
            <label for="fromDate">
                From
            </label>
            <input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
                data-options='{"useNewStyle":true, "mode":"flipbox"}' />

            <label for="toDate">
                To
            </label>
            <input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
                data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
        </fieldset>

它可以正确设置宽度，但不断将它放入一个新行：

enter image description here

此外，翻转框中显示的日期与实际选择的日期不匹配（检查标题上的日期）：

enter image description here

此外，对话框显示在左侧太多，并且会被裁剪。

请帮忙吗？

Answer 1

我有一个只在jQM数据角色之外使用DIV和CSS的解决方案。这是 DEMO

基本上，我没有使用fieldcontain和controlgroups，而是在DIV集中包含每个标签/日期输入对，以显示内联而不是块。然后标签和输入也都在DIV中设置为以最小宽度内联。这样：

如果您的屏幕足够宽，则所有内容都会显示在一行中。
当屏幕变窄时，第二个标签/输入对将滚动到下一个线
随着你的屏幕越来越窄，标签也会叠加在屏幕上输入。

在小提琴中，尝试将分割器拖动到结果平面的左侧，以查看表单自动将其自身配置为可用宽度。

所以HTML看起来像这样：

<div class="dispInlineCont">
    <div class="dispInlineLabel" >
       <label for="fromDate">From</label>
    </div>
    <div class="dispInline">
        <input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
            data-options='{"useNewStyle":true, "mode":"flipbox"}' />
    </div>
</div >
<div class="dispInlineCont">
    <div class="dispInlineLabel" >  
        <label for="toDate">To</label>
    </div>
    <div class="dispInline">
        <input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
            data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
    </div>
</div>
 <!-- Clear floats for each new line -->
<div class="clearFloats"></div>

CSS看起来像这样：

    .dispInline, .dispInlineLabel, .dispInlineCont{
    display: inline-block;
    border-bottom-width:0;
}
.dispInlineLabel{
    min-width: 55px;
}
.dispInline{
     min-width: 200px;
}
.clearFloats{
    clear:both;
}

当然，您可以使用最小宽度来获得所需的行为。 ClearFloats允许您在下一行添加下一个控件。

使用JQM Datebox的单行中的多个DateBox

1 个答案: