docs(datepicker): add filter example (#2870)

akveo · Sep 16, 2021 · 26e54a2 · 26e54a2
1 parent 491c696
commit 26e54a2
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 8 deletions.
diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts
@@ -556,6 +556,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'RangepickerShowcaseComponent',
         name: 'Rangepicker Showcase',
       },
+      {
+        path: 'datepicker-filter.component',
+        link: '/datepicker/datepicker-filter.component',
+        component: 'DatepickerFilterComponent',
+        name: 'Datepicker Filter',
+      },
     ],
   },
   {

diff --git a/src/framework/theme/components/datepicker/datepicker.directive.ts b/src/framework/theme/components/datepicker/datepicker.directive.ts
@@ -5,14 +5,14 @@
  */
 
 import {
+  ChangeDetectorRef,
   Directive,
   ElementRef,
   forwardRef,
   Inject,
   InjectionToken,
   Input,
   OnDestroy,
-  ChangeDetectorRef,
   Type,
 } from '@angular/core';
 import {
@@ -24,11 +24,11 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import { fromEvent, Observable, merge, Subject } from 'rxjs';
-import { map, takeUntil, filter, take, tap } from 'rxjs/operators';
+import {fromEvent, merge, Observable, Subject} from 'rxjs';
+import {filter, map, take, takeUntil, tap} from 'rxjs/operators';
 
-import { NB_DOCUMENT } from '../../theme.options';
-import { NbDateService } from '../calendar-kit/services/date.service';
+import {NB_DOCUMENT} from '../../theme.options';
+import {NbDateService} from '../calendar-kit/services/date.service';
 
 
 /**
@@ -173,10 +173,14 @@ export const NB_DATE_SERVICE_OPTIONS = new InjectionToken('Date service options'
  * @stacked-example(Forms, datepicker/datepicker-forms.component)
  *
  * `NbDatepickerDirective` may be validated using `min` and `max` dates passed to the datepicker.
- * And `filter` predicate that receives date object and has to return a boolean value.
  *
  * @stacked-example(Validation, datepicker/datepicker-validation.component)
  *
+ * Also `NbDatepickerDirective` may be filtered using `filter` predicate
+ * that receives date object and has to return a boolean value.
+ *
+ * @stacked-example(Filter, datepicker/datepicker-filter.component)
+ *
  * If you need to pick a time along with the date, you can use nb-date-timepicker
  *
  * ```html
@@ -485,8 +489,7 @@ export class NbDatepickerDirective<D> implements OnDestroy, ControlValueAccessor
   }
 
   protected writeInput(value: D) {
-    const stringRepresentation = this.datepickerAdapter.format(value, this.picker.format);
-    this.hostRef.nativeElement.value = stringRepresentation;
+    this.hostRef.nativeElement.value = this.datepickerAdapter.format(value, this.picker.format);
   }
 
   /**

diff --git a/src/playground/with-layout/datepicker/datepicker-filter.component.ts b/src/playground/with-layout/datepicker/datepicker-filter.component.ts
@@ -0,0 +1,23 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-datepicker-filter',
+  template: `
+    <nb-card size="large">
+      <nb-card-body>
+        <input nbInput placeholder="Pick Date" [nbDatepicker]="dateTimePicker">
+        <nb-datepicker #dateTimePicker [filter]="filterFn"></nb-datepicker>
+      </nb-card-body>
+    </nb-card>
+  `,
+  styleUrls: ['./datepicker-example.scss'],
+})
+export class DatepickerFilterComponent {
+  filterFn = (date) => date.getDay() === 0;
+}
diff --git a/src/playground/with-layout/datepicker/datepicker-routing.module.ts b/src/playground/with-layout/datepicker/datepicker-routing.module.ts
@@ -12,6 +12,7 @@ import { DatepickerValidationComponent } from './datepicker-validation.component
 import { RangepickerShowcaseComponent } from './rangepicker-showcase.component';
 import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component';
 import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component';
+import { DatepickerFilterComponent } from './datepicker-filter.component';
 
 const routes: Route[] = [
   {
@@ -38,6 +39,10 @@ const routes: Route[] = [
     path: 'rangepicker-showcase.component',
     component: RangepickerShowcaseComponent,
   },
+  {
+    path: 'datepicker-filter.component',
+    component: DatepickerFilterComponent,
+  },
 ];
 
 @NgModule({

diff --git a/src/playground/with-layout/datepicker/datepicker.module.ts b/src/playground/with-layout/datepicker/datepicker.module.ts
@@ -14,6 +14,7 @@ import { DatepickerValidationComponent } from './datepicker-validation.component
 import { RangepickerShowcaseComponent } from './rangepicker-showcase.component';
 import { DateTimepickerShowcaseComponent } from './date-timepicker-showcase.component';
 import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-column.component';
+import { DatepickerFilterComponent } from './datepicker-filter.component';
 
 @NgModule({
   declarations: [
@@ -23,6 +24,7 @@ import { DateTimepickerSingleColumnComponent } from './date-timepicker-single-co
     DateTimepickerSingleColumnComponent,
     DatepickerValidationComponent,
     RangepickerShowcaseComponent,
+    DatepickerFilterComponent,
   ],
   imports: [
     FormsModule,