[ngx-daterangepicker-material右侧添加日历图标

问题描述 投票:0回答:1

我将ngx-daterangepicker-material用于日期范围选择器。它的工作正常,但需要与文本框一起添加图标。单击该图标后,日历应打开。我正在努力寻找解决方案。

是否有任何默认属性可向用户显示图标以打开日历?

angular ngx-bootstrap
1个回答
0
投票

我也遇到了同样的问题,这是对我有用的解决方案:HTML:

<input
        #dateRangePicker
        id="calendar-input"
        class="date-range-picker"
        type="text"
        ngxDaterangepickerMd
        [(ngModel)]="dateRangeSelected"
        [showCustomRangeLabel]="true"
        [showWeekNumbers]="false"
        [ranges]="dateRangeRanges"
        [linkedCalendars]="true"
        [showClearButton]="true"
        [locale]="{format: 'MMM DD, YYYY'}"
        [showDropdowns]="true"
        [showRangeLabelOnInput]="false"
        [minDate]="dateRangeMinDate"
        [maxDate]="dateRangeMaxDate"
        (change)="onDateRangeChanged()"
        placeholder="Select please... "/>
<label for="calendar-input" class="date-range-picker-icon fa fa-calendar"></label>

css:

 .date-range-picker-icon {
  margin-left: -25px;
  z-index: 1;
}
© www.soinside.com 2019 - 2024. All rights reserved.