Added option to disable time ranges

LibusoftCicom · May 17, 2018 · 9b11c56 · 9b11c56
1 parent 4037a76
commit 9b11c56
Show file tree

Hide file tree

Showing 11 changed files with 254 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![Logo of the project](./src/assets/logo.png)
+![Logo of the project](src/assets/logo.png)
 
 # LC DatePicker
 > Pure Angular date and time picker component.
@@ -20,7 +20,7 @@
 - LC DatePicker is an Angular component that generates a datepicker calendar on your input element
 - Compatible with Angular 2+ up to Angular v5.0.0
 - Only dependency is MomentJS and Font Awesome
-- Customizable date format and language 
+- Customizable date format and language
 - Can be configured as time, date-time, date, month or year picker
 
 
@@ -51,7 +51,7 @@ System.config({
 })
 ```
 
-Use the following snippet inside your app module: 
+Use the following snippet inside your app module:
 ```shell
 import {LcDatePickerModule} from '@libusoftcicom/lc-datepicker';
 
@@ -71,7 +71,7 @@ import {LcDatePickerModule} from '@libusoftcicom/lc-datepicker';
 export class AppModule {}
 ```
 
-Use the following snippet inside your component: 
+Use the following snippet inside your component:
 ```shell
 import {DatePickerConfig, ECalendarType} from '@libusoftcicom/lc-datepicker';
 
@@ -104,7 +104,7 @@ export class AppComponent {
 }
 ```
 
-Use the following snippet inside your template: 
+Use the following snippet inside your template:
 ```shell
 <lc-datepicker [(opened)]="CalendarOpened" [config]="config" [(date)]="setDate"></lc-datepicker>
 ```
@@ -123,11 +123,12 @@ Use the following snippet inside your template:
 * FontColor: String
 * Format: Moment.MomentInput
 * setDisabledDates( Array<Moment.MomentInput> )
+* addDisabledTimeRange( start<Moment.MomentInput>, stop<Moment.MomentInput> )</li>
 
 
 ## Developing
 
-### Built With: 
+### Built With:
 - Angular
 - MomentJS
 - Font Awesome

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><base href="/lc-datepicker/"><meta charset="utf-8"><title>LCDatePicker</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><link href="styles.55a9d13c4f84bbe3b11c.bundle.css" rel="stylesheet"/></head><body><lc-app-root></lc-app-root><script type="text/javascript" src="inline.eaccc389ea337378535c.bundle.js"></script><script type="text/javascript" src="polyfills.ed2002d72b8132643878.bundle.js"></script><script type="text/javascript" src="main.abeedee0c2b9551411d7.bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><base href="/lc-datepicker/"><meta charset="utf-8"><title>LCDatePicker</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><link href="styles.55a9d13c4f84bbe3b11c.bundle.css" rel="stylesheet"/></head><body><lc-app-root></lc-app-root><script type="text/javascript" src="inline.5f6034d4dfda2b2c6403.bundle.js"></script><script type="text/javascript" src="polyfills.ed2002d72b8132643878.bundle.js"></script><script type="text/javascript" src="main.de0f7d8e27dbb2210e0f.bundle.js"></script></body></html>
diff --git a/docs/inline.eaccc389ea337378535c.bundle.js → docs/inline.5f6034d4dfda2b2c6403.bundle.js b/docs/inline.eaccc389ea337378535c.bundle.js → docs/inline.5f6034d4dfda2b2c6403.bundle.js
diff --git a/docs/main.abeedee0c2b9551411d7.bundle.js b/docs/main.abeedee0c2b9551411d7.bundle.js
diff --git a/docs/main.de0f7d8e27dbb2210e0f.bundle.js b/docs/main.de0f7d8e27dbb2210e0f.bundle.js
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -128,34 +128,6 @@ <h1 class="display-3">LC DatePicker</h1>
           </div>
           <hr>
 
-          <div class="form-group" id="allowed-disabled-dates">
-            <blockquote class="card-blockquote col-12">
-              <b>Define allowed/disabled dates:</b>
-            </blockquote>
-          </div>
-          <div class="form-group">
-              <p>To configure range of available dates in calendar you can use
-                config.MinDate and config.MaxDate, all dates out of that range are disabled
-              </p>
-              <p>
-                <code class="small-text">const config = new DatePickerConfig();
-config.MinDate = &#123; years: {{ fromDateObject.years }}, months: {{ fromDateObject.months }}, date: {{ fromDateObject.date }} &#125;;
-config.MaxDate = &#123; years: {{ toDateObject.years }}, months: {{ toDateObject.months }}, date: {{ toDateObject.date }} &#125;;</code>
-              </p>
-          </div>
-          <hr>
-          <div class="form-group">
-            <p>or to configure dates which are disabled you can use config.setDisabledDates( Array&lt;MomentInput&gt; )</p>
-            <p>
-              <code class="small-text">const config = new DatePickerConfig();
-config.setDisabledDates({{ randomDisabledDates | json }});</code>
-            </p>
-          </div>
-          <hr>
-          <div class="form-group">
-            <p>if <i class="fa fa-home"></i> is pressed and that day is in previously defined disabled list, calendar will pick next available date</p>
-          </div>
-
         </div>
       </div>
     </div>
@@ -174,6 +146,64 @@ <h1 class="display-3">LC DatePicker</h1>
     </div>
   </div>
 
+
+    <div class="card">
+      <h3 class="card-header">Define allowed/disabled dates:</h3>
+      <div class="card-block">
+        <div class="form-group">
+          <p>To configure range of available dates in calendar you can use config.MinDate and config.MaxDate, all dates out of that
+            range are disabled
+          </p>
+          <p>
+            <code class="small-text">
+const config = new DatePickerConfig();
+config.MinDate = &#123; years: {{ fromDateObject.years }}, months: {{ fromDateObject.months }}, date: {{ fromDateObject.date }} &#125;;
+config.MaxDate = &#123; years: {{ toDateObject.years }}, months: {{ toDateObject.months }}, date: {{ toDateObject.date }} &#125;;</code>
+          </p>
+        </div>
+        <hr>
+        <div class="form-group">
+          <p>or to configure dates which are disabled you can use config.setDisabledDates( Array&lt;MomentInput&gt; )</p>
+          <p>
+            <code class="small-text">
+const config = new DatePickerConfig();
+config.setDisabledDates({{ randomDisabledDates | json }});</code>
+          </p>
+        </div>
+        <hr>
+        <div class="form-group">
+          <p>if
+            <i class="fa fa-home"></i> is pressed and that day is in previously defined disabled list, calendar will pick next available date</p>
+        </div>
+      </div>
+    </div>
+    <br>
+
+    <div class="card">
+      <h3 class="card-header">Define allowed/disabled time ranges:</h3>
+      <div class="card-block">
+        <div class="form-group">
+          <p>To configure disabled time ranges you can use config.addDisabledTimeRange, all times between that
+            ranges are disabled
+          </p>
+          <p>
+            <code class="small-text">
+const config = new DatePickerConfig();
+config.addDisabledTimeRange('00:00','07:59');
+config.addDisabledTimeRange('14:00', '16:59');
+config.addDisabledTimeRange('21:00', '23:59');</code>
+          </p>
+        </div>
+        <hr>
+        <hr>
+        <div class="form-group">
+          <p>if
+            <i class="fa fa-home"></i> is pressed and current time is in disabled time range, calendar will pick next available time</p>
+        </div>
+      </div>
+    </div>
+    <br>
+
   <div class="card">
     <h3 class="card-header">Description</h3>
     <div class="card-block">
@@ -261,19 +291,19 @@ <h3 class="card-header">Installation</h3>
     ...
   &#125;
 
-  public get setDate() &#123;
+  public get Date() &#123;
     return this.dateValue;
   &#125;
 
-  public set setDate(value: string) &#123;
+  public set Date(value: string) &#123;
     this.dateValue = value;
   &#125;
 
 &#125;
 </code></li>
           <li>
             <p>Use the following snippet inside your template:</p>
-            <code>&lt;lc-datepicker [(opened)]="calendarOpened" [config]="config" [(date)]="setDate"&gt;&lt;/lc-datepicker&gt;</code>
+            <code>&lt;lc-datepicker [(opened)]="calendarOpened" [config]="config" [(date)]="Date"&gt;&lt;/lc-datepicker&gt;</code>
           </li>
         </ol>
     </div>
@@ -298,6 +328,7 @@ <h3 class="card-header">DatePicker config parameters</h3>
           <li> FontColor: String</li>
           <li> Format: Moment.MomentInput</li>
           <li> setDisabledDates( Array&lt;Moment.MomentInput&gt; )</li>
+          <li> addDisabledTimeRange( start&lt;Moment.MomentInput&gt;, stop&lt;Moment.MomentInput&gt; )</li>
         </ul>
     </div>
   </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild, ElementRef } from '@angular/core';
-import { DatePickerConfig, ECalendarType, LCDatePickerComponent } from '@libusoftcicom/lc-datepicker';
+import { DatePickerConfig, ECalendarType, LCDatePickerComponent, IDisabledTimeRanges } from '@libusoftcicom/lc-datepicker';
 import * as moment from 'moment';
 
 
@@ -20,6 +20,7 @@ export class AppComponent {
 
   public todayDateObject = moment(moment.now()).startOf('day');
   public randomDisabledDates = [];
+  public disabledTimeRanges = [];
 
   public fromDateObject = moment(moment.now()).startOf('day').subtract(40, 'day').toObject();
   public toDateObject = moment(moment.now()).startOf('day').add(40, 'day').toObject();
@@ -43,7 +44,9 @@ export class AppComponent {
     this.generateRandDates();
 
     // define range of unavailable dates
-    this.config.setDisabledDates( this.randomDisabledDates );
+    this.config.setDisabledDates(this.randomDisabledDates);
+    // define range of unavailable time
+    this.setDisabledTimeRanges();
 
     this.config.Labels = {
       confirmLabel: 'Ok',
@@ -53,13 +56,23 @@ export class AppComponent {
     this.config.FontColor = '#5e666f';
   }
 
-  private generateRandDates(){
+  private generateRandDates() {
     this.randomDisabledDates = Array(3).fill(null).map(() => {
       let rand = Math.random() * (15 - (-15)) + (-15);
-      return moment(moment.now()).startOf('day').add( rand, 'day' ).format('YYYY-MM-DD');
+      return moment(moment.now()).startOf('day').add(rand, 'day').format('YYYY-MM-DD');
     })
 
-    this.randomDisabledDates.push( moment(moment.now()).format('YYYY-MM-DD') )
+    this.randomDisabledDates.push(moment(moment.now()).format('YYYY-MM-DD'))
+  }
+
+  private setDisabledTimeRanges() {
+
+    this.config.addDisabledTimeRange('00:00','07:59');
+
+    this.config.addDisabledTimeRange('14:00', '16:59');
+
+    this.config.addDisabledTimeRange('21:00', '23:59');
+
   }
 
   public openCalendar() {
@@ -79,56 +92,56 @@ export class AppComponent {
   }
 
 
-  public updateLocalization(value){
+  public updateLocalization(value) {
     this.config.Localization = value;
   }
 
-  public get CalendarType(){
+  public get CalendarType() {
     return this.config.CalendarType
   }
 
-  public set CalendarType(value){
-    this.config.CalendarType = 1*value;
+  public set CalendarType(value) {
+    this.config.CalendarType = 1 * value;
   }
-  public get Localization(){
+  public get Localization() {
     return this.config.Localization;
   }
 
-  public set Localization(value){
+  public set Localization(value) {
     this.config.Localization = value;
   }
-  public get Format(){
+  public get Format() {
     return this.config.Format;
   }
 
-  public set Format(value){
+  public set Format(value) {
     this.config.Format = value;
     this.dateInput.nativeElement.value = '';
   }
 
 
-  public get ConfirmLabel(){
+  public get ConfirmLabel() {
     return this.config.ConfirmLabel;
   }
 
-  public set ConfirmLabel(value){
+  public set ConfirmLabel(value) {
     this.config.ConfirmLabel = value;
   }
 
 
-  public get PrimaryColor(){
+  public get PrimaryColor() {
     return this.config.PrimaryColor;
   }
 
-  public set PrimaryColor(value){
+  public set PrimaryColor(value) {
     this.config.PrimaryColor = value;
   }
 
-  public get FontColor(){
+  public get FontColor() {
     return this.config.ColorTheme.fontColor;
   }
 
-  public set FontColor(value){
+  public set FontColor(value) {
     this.config.ColorTheme.fontColor = value;
   }