9

更改移动布局上的日历位置，

我使用了daterangepicker-bs3.css和daterangepicker.js'

但移动布局出乎我的意料。

桌面布局，开始日期日历应该在左边

移动布局，开始日期日历应该在上面，但结果却在底部

当前代码

:javascript
  $(document).ready(function() {
    $('#date-range-picker').daterangepicker(
      {
        locale: {
          applyLabel: "#{escape_javascript t('date_range_picker.apply')}",
          cancelLabel: "#{escape_javascript t('date_range_picker.cancel')}",
          fromLabel: "#{escape_javascript t('date_range_picker.depart_date')}",
          toLabel: "#{escape_javascript t('date_range_picker.return_date')}",
        },
        format: 'YYYY/MM/DD',
        dateLimit: { days: 30 }
      },
      function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
      }
    );
  });

html

<div class="col-sm-8">
    <div class="input-prepend input-group">
        <span class="add-on input-group-addon">
            <i class="fa fa-calendar"></i>
        </span>
        <input class="form-control" id="date-range-picker" name="departure_at" type="text" value="2015/11/16 - 2015/11/21">
    </div>
</div>
4

1 回答 1

7

首先，我不知道您使用的是哪个版本的 daterangepicker。但是我尝试使用 daterangepicker 的官方网站中提到的依赖项在这个jsfiddle中实现您的代码。即使在移动布局中，它也能以您想要的方式工作。

如果您使用的是旧版本的 daterangepicker，那么在像这样调用 daterangepicker 时尝试传递一个属性“opens: left”。

    $(document).ready(function() {
    $('#date-range-picker').daterangepicker(
      {
        locale: {
          applyLabel: "#{escape_javascript t('date_range_picker.apply')}",
          cancelLabel: "#{escape_javascript t('date_range_picker.cancel')}",
          fromLabel: "#{escape_javascript t('date_range_picker.depart_date')}",
          toLabel: "#{escape_javascript t('date_range_picker.return_date')}",
        },
          opens: 'left',
        format: 'YYYY/MM/DD',
        dateLimit: { days: 30 }
      },
      function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
      }
    );
  });

我希望这能解决你的问题。

于 2015-08-19T07:07:31.160 回答