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

Question

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

我用了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>

Answer 1

首先,我不知道你使用的是哪个版本的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);
      }
    );
  });

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