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

Change the calendar position on mobile layout,

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

I used the daterangepicker-bs3.css and daterangepicker.js'

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

but the mobile layout is out of my expectation.

但移动布局超出了我的预期。

desktop layout, the start date calendar should on the left

mobile layout, the start date calendar should on the upper but it turns out to be on the bottom

current code

: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>

1 个解决方案

#1

First of all, I don't know which version of the daterangepicker are you using. But I tried implementing your code in this jsfiddle with the dependencies mentioned in the daterangepicker's official website. It's working the way you want even in the mobile layout.

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

If you are using older version of daterangepicker, then try passing an attribute "opens: left" while invoking the daterangepicker like this.

如果您使用的是旧版本的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);
      }
    );
  });

I hope this solves your issue.

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