Updated optional iOS native date/time input method.

Author: kshetline

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svc-ng",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "license": "MIT AND GPL-3.0-or-later",
   "author": "Kerry Shetline <kerry@shetline.com>",
   "scripts": {

src/app/svc/svc-date-editor.component.ts

@@ -184,6 +184,7 @@ export class SvcDateEditorComponent extends KsSequenceEditorComponent implements
     else
       i[0].value = NO_BREAK_SPACE;
 
+    // noinspection JSSuspiciousNameCombination
     const y4 = M_.div_tt0(y, 1000);
     const y3 = M_.div_tt0(y - y4 * 1000, 100);
     const y2 = M_.div_tt0(y - y4 * 1000 - y3 * 100, 10);

src/app/svc/svc-native-date-time-dialog/svc-native-date-time-dialog.component.html

@@ -7,17 +7,11 @@
   <p-radioButton name="native-date-time-1" [value]="true"  [(ngModel)]="nativeDateTime" label="Use your web browser's own date/time input method"></p-radioButton>
   <div class="explanation">
     This provides greater ease of use with mobile devices, but can't be used to enter dates before the year 1 CE.
-    <ng-container *ngIf="isIOS">
-      <p>
-        For iOS devices, there is no native date/time input that covers the full range of time from years down to minutes.
-        When using the web browser's input method, touch the left side of the clock to set year, month and date. Touch the
-        right side to enter month, date, hour and minute.
-      </p>
-      <p>
-        When setting years a century or more ago there might be a discrepancy of a few minutes between the time shown in
-        the native date/time input and the time shown by the Sky View Café clock.
-      </p>
-    </ng-container>
+    <p *ngIf="isIOS">
+      For iOS devices, there is no native date/time input that covers the full range of time from years down to minutes.
+      When using the web browser's input method, touch the left side of the clock to set year, month and date. Touch the
+      right side to enter hour and minute.
+    </p>
   </div>
   This setting can be changed later using the <strong>More.../Preferences</strong> dialog
 

src/app/svc/svc-native-date-time-dialog/svc-native-date-time-dialog.component.ts

@@ -44,7 +44,7 @@ export class SvcNativeDateTimeDialogComponent {
   nativeDateTime = this.app.nativeDateTime;
   // noinspection JSMethodCanBeStatic
   get isIOS(): boolean { return isIOS(); }
-  get dialogSize(): string { return isIOS() ? '500!,458' : '500!,300'; }
+  get dialogSize(): string { return isIOS() ? '500!,400' : '500!,300'; }
 
   constructor(private app: AppService) { }
 

src/app/svc/svc-time-editor/svc-time-editor.component.ts

@@ -39,6 +39,8 @@ const platformNativeDateTime = (isIOS() || isAndroid() && isChrome());
 const NO_BREAK_SPACE = '\u00A0';
 const THREE_PER_EM_SPACE = '\u2004';
 
+type TimeFormat = 'date' | 'time' | 'datetime-local';
+
 @Component({
   selector: 'svc-time-editor',
   animations: [BACKGROUND_ANIMATIONS],
@@ -64,7 +66,7 @@ export class SvcTimeEditorComponent extends KsSequenceEditorComponent implements
   @ViewChild('localTime', { static: true }) private localTimeRef: ElementRef;
   private localTime: HTMLInputElement;
 
-  localTimeFormat: 'date' | 'datetime-local' = 'datetime-local';
+  localTimeFormat: TimeFormat = 'datetime-local';
   localTimeMin: string;
   localTimeMax: string;
 
@@ -94,17 +96,23 @@ export class SvcTimeEditorComponent extends KsSequenceEditorComponent implements
       let newTime: number;
 
       if (newValue) {
-        const match = /(\d\d\d\d)-(\d\d)-(\d\d)(?:T(\d\d):(\d\d))?/.exec(newValue);
+        const w = this.dateTime.wallTime;
+        let $;
 
-        if (match) {
-          const d = match.slice(1).map(n => Number(n));
+        if (($ = /(\d\d\d\d)-(\d\d)-(\d\d)(?:T(\d\d):(\d\d))?/.exec(newValue))) {
+          const d = $.slice(1).map(n => Number(n));
 
-          if (isNil(match[4])) {
-            d[3] = this.dateTime.wallTime.hrs;
-            d[4] = this.dateTime.wallTime.min;
+          if (isNil($[4])) {
+            d[3] = w.hrs;
+            d[4] = w.min;
           }
 
-          newTime = new KsDateTime({y: d[0], m: d[1], d: d[2], hrs: d[3], min: d[4], sec: 0}, this.timeZone, this._gregorianChangeDate).utcTimeMillis;
+          newTime = new KsDateTime({ y: d[0], m: d[1], d: d[2], hrs: d[3], min: d[4], sec: 0 }, this.timeZone, this._gregorianChangeDate).utcTimeMillis;
+        }
+        else if (($ = /(\d\d):(\d\d)/.exec(newValue))) {
+          const t = $.slice(1).map(n => Number(n));
+
+          newTime = new KsDateTime({ y: w.y, m: w.m, d: w.d, hrs: t[0], min: t[1], sec: 0 }, this.timeZone, this._gregorianChangeDate).utcTimeMillis;
         }
       }
       else
@@ -183,8 +191,13 @@ export class SvcTimeEditorComponent extends KsSequenceEditorComponent implements
   }
 
   protected onTouchStartAlternate(event: TouchEvent): void {
-    const selection = this.getSelectionForTouchEvent(event);
-    const format = (isIOS() && 0 <= selection && selection < 11 ? 'date' : 'datetime-local');
+    let format: TimeFormat = 'datetime-local';
+
+    if (isIOS()) {
+      const selection = this.getSelectionForTouchEvent(event);
+
+      format = (0 <= selection && selection < 11 ? 'date' : 'time');
+    }
 
     if (this.localTimeFormat !== format) {
       // Changing the format of the input (using the "type" attribute) sets off a number of updates
@@ -235,7 +248,10 @@ export class SvcTimeEditorComponent extends KsSequenceEditorComponent implements
   }
 
   private adjustLocalTimeMin(): void {
-    this.localTimeMin = padLeft(max(this._minYear, 1), 4, '0') + '-01-01' + (this.localTimeFormat === 'date' ? '' : 'T00:00');
+    if (this.localTimeFormat === 'time')
+      this.localTimeMin = null;
+    else
+      this.localTimeMin = padLeft(max(this._minYear, 1), 4, '0') + '-01-01' + (this.localTimeFormat === 'date' ? '' : 'T00:00');
   }
 
   get maxYear(): number { return this._maxYear; }
@@ -247,7 +263,10 @@ export class SvcTimeEditorComponent extends KsSequenceEditorComponent implements
   }
 
   private adjustLocalTimeMax(): void {
-    this.localTimeMax = padLeft(this._maxYear, 4, '0') + '-12-31' + (this.localTimeFormat === 'date' ? '' : 'T23:59');
+    if (this.localTimeFormat === 'time')
+      this.localTimeMax = null;
+    else
+      this.localTimeMax = padLeft(this._maxYear, 4, '0') + '-12-31' + (this.localTimeFormat === 'date' ? '' : 'T23:59');
   }
 
   get timeZone(): KsTimeZone { return this.dateTime.timeZone; }
@@ -419,8 +438,11 @@ export class SvcTimeEditorComponent extends KsSequenceEditorComponent implements
     if (this.isNativeDateTimeActive() && year < 1)
       year = 1;
 
-    this._localTimeValue = `${padLeft(year, 4, '0')}-${padLeft(w.m, 2, '0')}-${padLeft(w.d, 2, '0')}` +
-      (this.localTimeFormat === 'date' ? '' : `T${padLeft(w.hrs, 2, '0')}:${padLeft(w.min, 2, '0')}`);
+    if (this.localTimeFormat === 'time')
+      this._localTimeValue = `${padLeft(w.hrs, 2, '0')}:${padLeft(w.min, 2, '0')}`;
+    else
+      this._localTimeValue = `${padLeft(year, 4, '0')}-${padLeft(w.m, 2, '0')}-${padLeft(w.d, 2, '0')}` +
+        (this.localTimeFormat === 'date' ? '' : `T${padLeft(w.hrs, 2, '0')}:${padLeft(w.min, 2, '0')}`);
   }
 
   private getWallTimeFromDigits(): DateAndTime {

src/assets/about.html

@@ -60,6 +60,8 @@
   <h2 class="header-sans"><a name="history">What's New / Version History</a></h2>
   <div  style="padding-left: 1em; text-indent: -1em">
 
+  <p><b>1.8.3, 2019-07-10:</b> Updated optional iOS native date/time input method.</p>
+
   <p><b>1.8.2, 2019-07-10:</b> Minor change to accommodate geographic search ratings higher than 9.</p>
 
   <p><b>1.8.0, 1.8.1, 2019-07-07:</b> Add option (off by default) to use native iOS or Android touch interface for date/time