Angular Dategangepicker多个按钮

Question

我使用了daterangepicker original js library的角形端口 使用的端口：See here

我已经多次显示了预定义的按钮：

我的代码基于以下沙盒示例：In here 范围显示正确。

这是我的HTML模板代码段：

<div class="datepicker form-group">
<div class="input-group"
    name="daterangeInput" 
    daterangepicker 
    [options]="options"                                         
    (applyDaterangepicker)="applyDate($event)"
>
    <span class="form-control uneditable-input ">
            {{ daterange.label  }}
    </span>
    <span class="input-group-btn">
        <a type="button" class="btn btn-default">
            <i class="glyphicon glyphicon-calendar"></i>
        </a>
    </span>
</div>              

打字稿选项如下：

public daterange: any = {
   start: moment().subtract(6, 'days'),
   end: moment(),
   label: 'Last 7 days'
};

@ViewChild(DaterangePickerComponent)
private picker: DaterangePickerComponent;

public options: any = {
   locale: { format: 'YYYY-MM-DD' },
   alwaysShowCalendars: false,
   ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'Last 90 Days': [moment().subtract(89, 'days'), moment()]
    }    
}

https://codesandbox.io/s/py4lr685mm

Answer 1

看来我们无法重现此错误。您正在使用哪种浏览器进行测试？我注意到，尽管Firefox的组件布局没有损坏，但它与Chrome和Edge的布局有所不同。

这是您使用的完整HTML吗？我注意到您缺少结束DIV。您是否尝试过在干净的环境中使用该组件，以确保它不会成为您的错误？

这时可能值得考虑不使用此库和/或打开an issue on GitHub。

Answer 2

发现了问题。编译到最终代码库时，出现多个标签。这就是问题所在。