use ng2-flatpickr date time bug

Author: canbax

README.md

@@ -1,57 +1,75 @@
 # hasap
 
-A web based general purpose math calculator. https://canbax.github.io/hasap/
-## features
-### Use it as an app 
-Since **Hasap** is a progressive web app, you can download it and use it as an app.
+A web-based general-purpose math calculator.https://canbax.github.io/hasap/
 
+## features
 
 ### wide variaety of functions
-This application uses [math.js](https://github.com/josdejong/mathjs) for calculations.[math.js](https://github.com/josdejong/mathjs) has many [functions](https://mathjs.org/docs/reference/functions.html). You can see list of functions on the below image.
+This application uses [math.js](https://github.com/josdejong/mathjs) for calculations.[math.js](https://github.com/josdejong/mathjs) has many [functions](https://mathjs.org/docs/reference/functions.html). You can see list of functions from user-interface.
 <p align="center">
   <img src="docs/showFunctions.gif" title="List of functions might be used in calculations"/>
 </p>
 
 ### automatic calculations
-As you type mathmatical expressions, the results are calculated automatically after you stopped typing. You don't need to press any button to calculate.
+
+As you type mathematical expressions, the results are calculated automatically after you stopped typing. You don't need to press any button to calculate.
 
 ### 4 different modes
-There are 4 different modes. All the modes have its own screen keyboard. 
 
-In **programmer** mode you can make calculations in 4 different bases and can see the results in 4 different bases. (hexadecimal, decimal, octal, binary) You can copy the results of calculations in 4 different bases.
+There are 4 different modes. All the modes have their own screen keyboard.
+
+In **programmer** mode you can make calculations in 4 different bases and can see the results in 4 different bases.(hexadecimal, decimal, octal, binary) You can copy the results of calculations in 4 different bases.
 <p align="center">
   <img src="docs/programmer.gif" title="List of time units"/>
 </p>
 
-In **date & time** mode you can make date time calculations. For example, let's say you want to know how much time it is 13800 seconds minus 10000 milliseconds. You can use autocomplete for selecting time units like in the image below. 
+In **date & time** mode you can make date-time calculations. For example, let's say you want to know how much time it is 13800 seconds minus 10000 milliseconds. You can use autocomplete for selecting time units like in the image below.
 <p align="center">
   <img src="docs/timeCalc.gif" title="List of time units"/>
 </p>
 
-Here you can also make date time calculations. Let's say today is 4 of April 2020. What is the date after 90 days. It is 3 of July 2020.
+Here you can also make date-time calculations. Let's say today is 4 of April 2020. What is the date after 90 days. It is 3 of July 2020.
 <p align="center">
   <img src="docs/dateCalc.gif" title="List of time units"/>
 </p>
 
-
 ### You can change your theme
+
 <p align="center">
   <img src="docs/themes.gif" title="List of time units"/>
 </p>
 
 ### Copy-paste and others
-You can copy-paste input. You can copy the results of calculations. You can ignore commas in calculations. 
-You can set the number of digits in result. You can set the precision in results.
+
+You can copy-paste input. You can copy the results of the calculations. You can ignore commas in calculations.
+You can set the number of digits in the result. You can set the precision in results.
 <p align="center">
   <img src="docs/copyPasteIgnoreComma.gif" title="List of time units"/>
 </p>
 
+## Use it as an app 
+
+Since **Hasap** is a progressive web app, you can download it and use it as an app. If you download it as an app, you can use it without the Internet.
+<p align="center">
+  <img src="docs/win10-pwa.png" title="List of functions might be used in calculations"/>
+</p>
+I didn't consider mobile experience. So it is not good in mobile but it can be used anyway.
+<p align="center">
+  <img src="docs/android-pwa1.jfif" title="UI in mobile"/>
+</p>
+<p align="center">
+  <img src="docs/android-pwa0.jfif" title="Add as an app"/>
+</p>
+
 ## Yet another calculator. Why?
-I find the tools that I use frustrating and not functional enough. 
-For example Windows 10 has a great calculator. It has more functionality than this one. I definetely inspired by it.
-- But you can not copy paste whole strings to it.
-- Let's say I did a long calculation like `2^4-145+4*23`. Why I can't change 145 to 146?
-- I really like button pressed effect on screen keyboard. But there is a small glitch which I found bit annoying. When I press a button conitiounly It is not shown pressed contiously, there is a small glitch.
+
+I find the tools that I use frustrating and not functional enough.
+For example Windows 10 has a great calculator. It has more functionality than this one. I definitely inspired by it.
+
+* But you can not copy paste whole strings to it.
+* Let's say I did a long calculation like `2^4-145+4*23` . Why I can't change 145 to 146?
+* I really like button pressed effect on screen keyboard. But there is a small glitch which I found bit annoying. When I press a button continiously It is not shown pressed contiously, there is a small glitch.
+
 <p align="center">
   <img src="docs/win10-glitch.gif" title="I press the button continously but it is not shown pressed continously"/>
 </p>
@@ -61,10 +79,10 @@ I used google as calculator a lot. You can copy-paste text and change the string
   <img src="docs/googleAsCalculator.gif" title="Chaning unit type to degree does not work"/>
 </p>
 
-I also used duckduckgo a lot. It wasn't good with trigonometic functions either.
+I also used duckduckgo a lot. It wasn't good with trigonometric functions either.
 <p align="center">
   <img src="docs/ddgCalculator.gif" title="Chaning unit type to degree does not work"/>
 </p>
 
-I hope this tool would be handy and useful for people. 
+I hope this tool would be handy and useful for people.
 

docs/android-pwa0.jfif

@@ -29,6 +29,7 @@
     "flatpickr": "^4.6.3",
     "hammerjs": "^2.0.8",
     "mathjs": "^6.6.2",
+    "ng2-flatpickr": "^9.0.0",
     "ngx-clipboard": "^13.0.0",
     "rxjs": "^6.5.5",
     "tslib": "^1.11.1",

docs/android-pwa1.jfif

@@ -167,9 +167,11 @@ <h5>{{'About'|translate}}</h5>
             </mat-radio-group>
           </div>
           <div *ngIf="settings.mode != 'programmer'">
-            <button *ngIf="settings.mode == 'date & time'" mat-button mat-icon-button id="date-inp">
+            <button *ngIf="settings.mode == 'date & time'" mat-button mat-icon-button (click)="toggleFlatPickr()">
               <mat-icon>date_range</mat-icon>
             </button>
+            <ng2-flatpickr #fpElem [config]="dateTimePickerOpt" *ngIf="settings.mode == 'date & time'">
+            </ng2-flatpickr>
             <span matRipple [matRippleTrigger]="resultRipple2" #resultRipple2 class="result-txt">{{results[1]}}</span>
             <button *ngIf="results[1].length > 0" mat-icon-button matSuffix (click)="copy(results[1])">
               <mat-icon>file_copy</mat-icon>

docs/win10-pwa.png

@@ -14,11 +14,11 @@ import { MathFnGroup, _filter, fnGroups, fnGroupExpo } from './math-fn';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { UserSettingService, UserSetting } from './user-setting.service';
 import { TranslateService } from '@ngx-translate/core';
-import flatpickr from 'flatpickr';
 import { ENTER } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { trigger, style, animate, transition } from '@angular/animations';
 import { MatRipple } from '@angular/material/core';
+import { FlatpickrOptions } from 'ng2-flatpickr';
 
 @Component({
   selector: 'app-root',
@@ -101,6 +101,9 @@ export class AppComponent implements OnInit {
   @ViewChild(MatRipple) ripple: MatRipple;
   usrHint = '';
   isAnimateTitle = true;
+  @ViewChild('fpElem', { static: false })
+  private _fpElem;
+  dateTimePickerOpt: FlatpickrOptions;
 
   constructor(private _clipboardService: ClipboardService, private _snackBar: MatSnackBar, private _formBuilder: FormBuilder,
     private _usrSetting: UserSettingService, public translate: TranslateService) {
@@ -152,10 +155,21 @@ export class AppComponent implements OnInit {
       );
     setInterval(this.keepHistory.bind(this), this.PUSH_HISTORY_MS);
 
-    this.handleFlatPickr();
-
     this.setHtmlTitle();
     setTimeout(() => { this.isAnimateTitle = false }, 3000);
+
+    this.dateTimePickerOpt = {
+      defaultDate: new Date(), enableTime: true, enableSeconds: true, time_24hr: true,
+      onClose: (e: Date[]) => {
+        if (this.isDateSelected) {
+          this.processInp4chips();
+          this.dateChips.push({ isHumanDate: true, str: e[0].toLocaleString(), val: e[0].getTime() });
+          this.isDateSelected = false;
+          this.compute();
+        }
+      }, static: true, altFormat:'F j, Y', altInput: true,
+      onChange: () => { this.isDateSelected = true; }
+    };
   }
 
   syncInp() {
@@ -205,7 +219,6 @@ export class AppComponent implements OnInit {
       this.bases = [];
     }
     this._usrSetting.setSetting('mode', this.settings.mode);
-    this.handleFlatPickr();
     this.refreshSideNav();
   }
 
@@ -369,32 +382,8 @@ export class AppComponent implements OnInit {
     this.compute();
   }
 
-  private handleFlatPickr() {
-    let dateElem = document.querySelector('#date-inp');
-
-    if (this.settings.mode != 'date & time') {
-      if (dateElem && dateElem['_flatpickr']) {
-        dateElem.parentNode.removeChild(dateElem);
-      }
-    } else {
-      setTimeout(() => {
-        if (dateElem && dateElem['_flatpickr']) {
-          return;
-        }
-        flatpickr('#date-inp', {
-          defaultDate: new Date(), enableTime: true, enableSeconds: true, time_24hr: true,
-          onClose: () => {
-            if (this.isDateSelected) {
-              let d1 = document.querySelector('#date-inp')['_flatpickr'].selectedDates[0] as Date;
-              this.processInp4chips();
-              this.dateChips.push({ isHumanDate: true, str: d1.toLocaleString(), val: d1.getTime() });
-              this.isDateSelected = false;
-              this.compute();
-            }
-          }, onChange: () => { this.isDateSelected = true; }
-        });
-      }, 1000);
-    }
+  toggleFlatPickr() {
+    this._fpElem.flatpickr.toggle();
   }
 
   private setHtmlTitle() {

package-lock.json

@@ -21,6 +21,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatRippleModule } from '@angular/material/core';
+import { Ng2FlatpickrModule } from 'ng2-flatpickr';
 
 import { AppComponent } from './app.component';
 import { ScreenKeyboardComponent } from './screen-keyboard/screen-keyboard.component';
@@ -52,6 +53,7 @@ import { environment } from '../environments/environment';
     MatListModule,
     MatExpansionModule,
     HttpClientModule,
+    Ng2FlatpickrModule,
     MatChipsModule,
     MatRippleModule,
     TranslateModule.forRoot({