diff --git a/saturn-datepicker/src/datepicker/calendar-body.ts b/saturn-datepicker/src/datepicker/calendar-body.ts index 54196fc..5828b3e 100644 --- a/saturn-datepicker/src/datepicker/calendar-body.ts +++ b/saturn-datepicker/src/datepicker/calendar-body.ts @@ -19,7 +19,6 @@ import { SimpleChanges, } from '@angular/core'; import {take} from 'rxjs/operators'; - /** * Extra CSS classes that can be associated with a calendar cell. */ @@ -179,7 +178,7 @@ export class SatCalendarBody implements OnChanges { /** Do not mark start and end of interval. */ if (date === this.begin || date === this.end) { return false; - } + } if (this.begin && !this.end) { return date > this.begin; } @@ -197,6 +196,12 @@ export class SatCalendarBody implements OnChanges { if (this.isBeforeSelected && !this.begin) { return date > this._cellOver; } + if(this._cellOver > this.end){ + return false + } + if(this._cellOver < this.begin){ + return false + } if (this._cellOver > this.begin) { return date > this.begin && date < this._cellOver; } @@ -222,7 +227,7 @@ export class SatCalendarBody implements OnChanges { /** Whenever to mark cell as end of the range. */ _isEnd(date: number): boolean { if (this.rangeMode && this.beginSelected && this._cellOver) { - if (this.isBeforeSelected && !this.begin) { + if (this.isBeforeSelected && !this.begin || date > this.end) { return false; } else { return (this.end === date && !(this._cellOver > this.begin)) || @@ -248,6 +253,12 @@ export class SatCalendarBody implements OnChanges { /** Whenever to highlight the target cell when selecting the second date in range mode */ _previewCellOver(date: number): boolean { + if(this._cellOver > this.end){ + return false + } + if(this._cellOver < this.begin){ + return false + } return this._cellOver === date && this.rangeMode && this.beginSelected; } } diff --git a/src/app/app.component.html b/src/app/app.component.html index 14ff364..603f3aa 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,168 +1,190 @@
-

SatDatepicker features

-
-

Features from original datepicker -

- - - - - - -
-
-
-

Range selection

-
- rangeMode option enables or disables range mode. Default is false -
- - - - - - -
-
-
-

Close after selection

-
- closeAfterSelection option enables or disables datepicker closing after date - selections. By - default the option is true -
- - - - - - -
-
-
-

Calendar view order

-
- orderPeriodLabel option sorts the label period views. -
    -
  • Default [multi-year]: multi-year then back to month -
    • -
  • Month [month]: month > year > multi-year
    • -
-
- - - - - - -
-
-
-

Select first date on close

-
- selectFirstDateOnClose option enables or disables the selection of the first date when closing - the datepicker before selecting another date. - By default the option is false -
- - - - - - -
-
-
-

Custom Footer (Default Ranges)

-
- calendarFooterComponent option allows you to define a footer in the calendar simalar to custom headers. -
- - - - - - -
-
-
-

Inline Usage - Range

+

SatDatepicker features

+
+

Features from original datepicker +

+ + + + + + +
+
+
+

Range selection

- The sat-calendar component with its dateRangesChange output binding can be used as an inline range date picker. Validation NOT WORKING. + rangeMode option enables or disables range mode. Default is false
- - {{ inlineRange.begin | date }} - {{ inlineRange.end | date }} - - - - {{ inlineBeginDate | date }} - - -
- - + + + + + + +
+
+
+

Close after selection

+
+ closeAfterSelection option enables or disables datepicker closing after date + selections. By + default the option is true +
+ + + + + + +
+
+
+

Calendar view order

+
+ orderPeriodLabel option sorts the label period views. +
    +
  • Default [multi-year]: multi-year then back to month +
    • +
  • Month [month]: month > year > multi-year
    • +
-
-
-
-

Inline Usage - Single Date

+ + + + + + +
+
+
+

Select first date on close

+
+ selectFirstDateOnClose option enables or disables the selection of the first date when closing + the datepicker before selecting another date. + By default the option is false +
+ + + + + + +
+
+
+

Custom Footer (Default Ranges)

- The sat-calendar component with its selectedChange output binding can be used as an inline date picker. Validation NOT WORKING. + calendarFooterComponent option allows you to define a footer in the calendar simalar to custom headers.
- - {{ selectedDate | date }} - - -
- - + + + + + + +
+
+
+

Inline Usage - Range

+
+ The sat-calendar component with its dateRangesChange output binding can be used as an inline range date picker. Validation NOT WORKING. +
+ + {{ inlineRange.begin | date }} + {{ inlineRange.end | date }} + + + + {{ inlineBeginDate | date }} + + +
+ + +
+
+
+
+

Inline Usage - Single Date

+
+ The sat-calendar component with its selectedChange output binding can be used as an inline date picker. Validation NOT WORKING. +
+ + {{ selectedDate | date }} + + +
+ + +
+
+
+
+

Disable range mouseover effect

+
+ rangeHoverEffect option enables or disables the mouseover listener on days when the rangeMode parameter is used and is enabled. + By default the option is true
-
-
-
-

Disable range mouseover effect

-
- rangeHoverEffect option enables or disables the mouseover listener on days when the rangeMode parameter is used and is enabled. - By default the option is true -
- - - - - -
+ + + + + +
+
+

Calendar with Max and Min

+
+ The sat-calendar component with its max and min set +
+ + + + + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ebf3817..63b9270 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -17,6 +17,10 @@ export class AppComponent { inlineBeginDate; selectedDate; + min = new Date(2019, 0, 1); + max = new Date(2020, 0, 1); + + constructor(fb: FormBuilder) { this.form = fb.group({ date: [{begin: new Date(2018, 7, 5), end: new Date(2018, 7, 25)}]