我将ngx-daterangepicker-material用于日期范围选择器,它可以正常工作,但是需要在文本框中添加图标,在单击烛台图标应打开后,我正在努力寻找解决方案。>
有没有默认属性可以向用户显示图标以打开日历?
答案 0 :(得分:1)
您必须使用(click)=“ open()”处理程序在class上添加class =“ ngx-daterangepicker-action”
并将其添加到组件中
import { DaterangepickerDirective } from 'ngx-daterangepicker-material';
@ViewChild(DaterangepickerDirective) picker: DaterangepickerDirective;
open() {
this.picker.open();
}
答案 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;
}
答案 2 :(得分:0)
尝试一下...
ts文件
...
@ViewChild(DaterangepickerDirective, { static: false }) pickerDirective: DaterangepickerDirective;
...
...
openDatepicker() {
this.pickerDirective.open();
}
html文件!
<button class="btn btn-primary ngx-daterangepicker-action" (click)="openDatepicker()">
Open
</button>