Open chrischak opened 5 years ago
In the meantime, I have created a work around to solve the above problem(s):
<input nbInput placeholder="{{ngModelDate.start | date}} - {{ngModelDate.end | date}}" [nbDatepicker]="ngmodel">
<nb-rangepicker #ngmodel [min]="min" [max]="max"> </nb-rangepicker>
When this bug will be fixed?
managed to workaround it by overriding the comparison method to suit the formControl with the rangePickerDirective in the following manner.
constructor(...) {
this.dateRangesCtrl.patchValue(this.reportsQuery.getValue().dateRange);
let isStart = true;
this.dateService.compareDates = (date1: Date, date2: unknown) => {
let inputVal: Date;
if (isStart) {
inputVal = (date2 as { start: Date; end: Date }).start;
isStart = false;
} else {
inputVal = (date2 as { start: Date; end: Date }).end;
isStart = true;
}
return date1 === inputVal ? 0 : date1 > inputVal ? 1 : -1;
};
this.min = this.dateService.createDate(2019, 1, 1);
this.max = new Date();
}
and in template
<input nbInput placeholder="Pick Date Range" class="date-picker" [nbDatepicker]="formpicker" [formControl]="dateRangesCtrl" />
<nb-rangepicker #formpicker [min]="min" [max]="max"></nb-rangepicker>
@DanielNetzeriAm use formcontrol & (min、max) together will throw error "date.clone is not function"
@zhanghongyublog I set defult value use [value] in input template. give up use formControl or ngModel
<input nbInput [nbDatepicker]="formpicker" [value]="fakeInputValue">
<nb-rangepicker #formpicker [min]="min" [max]="max"></nb-rangepicker>
value is pure string can avoid throw error "date.clone is not function" or "date2.getTime is not a function"
this.fakeInputValue = ${dayjs(new Date()).format('YYYY/MM/DD')} - ${dayjs(new Date()).format('YYYY/MM/DD')}`;
@zhanghongyublog I have the same problem. FormControl With min and max throw the error "date.clone is not function"
@DanielNetzeriAm great workaround, thanks!
I think it could be the only possible workaround for the rangepicker for now, because the compare function of NbNativeDateService
does:
supposing that date1
and date2
are of type Date, which is okay for the datepicker. But the values of the rangepicker are more complex and represented as an object {start: Date, end: Date}
, so {start: Date, end: Date}.getTime()
in the compare function does not make any sense and causes the problem.
But I am sure, you know that already :) Just leaving the comment to save the debugging time for someone, who may run into the same problem.
Thanks a lot for your solution!
Bug is still here. 3 years later.
Issue type
I'm submitting a ... (check one with "x")
Issue description
Current behavior: ERROR Error: Uncaught (in promise): TypeError: date2.getTime is not a function TypeError: date2.getTime is not a function at NbNativeDateService.push../node_modules/@nebular/theme/components/calendar-kit/services/native-date.service.js.NbNativeDateService.compareDates (native-date.service.js:108)
Expected behavior: Nebular 3 - components - form - datepicker -rangepicker to work with [min] and [max] being set.
Steps to reproduce: https://stackblitz.com/edit/nebular-1281-kmwnav?file=src/app/app.component.ts Using the Validation template replace 'nb-datepicker' to 'nb-rangepicker' and using [(ngModel)]
Related code:
Other information:
npm, node, OS, Browser
Angular, Nebular