LP1840782 Just use short / numeric dates

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/util/date.ts b/Open-ILS/src/eg2/src/app/share/util/date.ts
index 19f90f8..bf146c7 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/util/date.ts
+++ b/Open-ILS/src/eg2/src/app/share/util/date.ts
@@ -1,19 +1,12 @@
 /* Collection of date utility functions */
 
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
 interface DateFormatOptions {
-    locale?: string; // defaults to browser locale
-    timeZone?: string; // defaults to browser time zone
-
-    // Note dateStyle and timeStyle support a value of 'default' in addition
-    // to the documented options.
-    dateStyle?: string;
-    timeStyle?: string;
+    locale?: string;    // defaults to browser locale
+    timeZone?: string;  // defaults to browser time zone
+    withDate?: boolean; // defaults to TRUE
+    withTime?: boolean; // defaults to FALSE
 }
 
-const DEFAULT_DATE_STYLE = 'short'; // en-US => 8/21/19
-const DEFAULT_TIME_STYLE = 'short'; // en-US => 12:01 PM
-
 export class DateUtil {
 
     // Returns a YYYY-MM-DD string in the local time zone matching
@@ -55,59 +48,27 @@ export class DateUtil {
     }
 
 
-    // Returns a locale-friendly display string for a date.
-    // To include the date in the output, set a value for options.dateStyle
-    // To include the time in the output, set a value for options.timeStyle
-    // If dateStyle or timeStyle have the value 'default', the application
-    // default format will be used.
-    // If both dateStyle and timeStyle are null, the fallback mode is
-    // dateStyle === 'default'
-    // For browsers where dateStyle and timeStyle are not supported,
-    // 'short' date / time styles are always used.  (see inline comments).
-    static dateToLocaleString(
-        date: Date, options: DateFormatOptions): string {
-
-        if (options.dateStyle === 'default') {
-            options.dateStyle = DEFAULT_DATE_STYLE;
-        }
-
-        if (options.timeStyle === 'default') {
-            options.timeStyle = DEFAULT_DATE_STYLE;
-        }
-
-        if (!options.dateStyle && !options.timeStyle) {
-            options.dateStyle = DEFAULT_DATE_STYLE;
-        }
-
-        const locale = options.locale || null; // defaults to browser locale
-        delete options.locale;
-
-        let formatter = new Intl.DateTimeFormat(locale, options);
+    // Returns a locale-friendly "numeric" (short) date and/or time display string.
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
+    static dateToLocaleString(date: Date, options: DateFormatOptions = {}): string {
 
-        // Firefox support for dateStyle / timeStyle pending.
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=1557718
-        // For now, use numeric date / style formats, which are
-        // equivalent to 'short' dates and times (at least for the 9
-        // locales provided w/ Evergreen by default -- presumably this
-        // is universal).  TODO: remove this code once the feature is
-        // generally available in FF.
-        const resolved: any = formatter.resolvedOptions();
+        const locale = options.locale || undefined; // default to browser locale
 
-        if (!resolved.dateStyle && !resolved.timeStyle) { // supported?
+        const formatOps: any = {};
 
-            const optionsFf: any = {timeZone: options.timeZone};
-
-            if (options.dateStyle) {
-                optionsFf.year = optionsFf.month = optionsFf.day = 'numeric';
-            }
+        if (options.timeZone) {
+            // Defaults to browser time zone
+            formatOps.timeZone = options.timeZone;
+        }
 
-            if (options.timeStyle) {
-                optionsFf.hour = optionsFf.minute = 'numeric';
-            }
+        if (options.withDate !== false || !options.withTime) {
+            formatOps.year = formatOps.month = formatOps.day = 'numeric';
+        }
 
-            formatter = new Intl.DateTimeFormat(locale, optionsFf);
+        if (options.withTime) {
+            formatOps.hour = formatOps.minute = 'numeric';
         }
 
-        return formatter.format(date);
+        return new Intl.DateTimeFormat(locale, formatOps).format(date);
     }
 }

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index 1944656..bf5e15e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -144,12 +144,8 @@
 </div>
 
 <div class="w-100 border-top border-bottom border-primary p-2 mb-2 mt-2">
-  <h5>Date Display Generator -- Browser Time is {{dateNow}}</h5>
-  <div class="font-italic">
-    Note we only support 'short' date and time styles for Firefox, pending
-    resolution of <a href='https://bugzilla.mozilla.org/show_bug.cgi?id=1557718'>
-      https://bugzilla.mozilla.org/show_bug.cgi?id=1557718</a>.
-  </div>
+  <h5>Date Display Generator -- Local Browser Time is 
+    <span class="border font-weight-bold p-1">{{dateNow}}</span></h5>
   <div class="row p-1 m-1 border">
     <div class="col-lg-2">
       <eg-combobox [entries]="localeCodes" placeholder="Date Locale" 
@@ -171,22 +167,18 @@
       </eg-combobox>
     </div>
     <div class="col-lg-2">
-      <eg-combobox placeholder="Date Style" (onChange)="dateStyle = $event.id; setDateString()">
-        <eg-combobox-entry entryId="" entryLabel="No Date"></eg-combobox-entry>
-        <eg-combobox-entry entryId="full" entryLabel="full"></eg-combobox-entry>
-        <eg-combobox-entry entryId="long" entryLabel="long"></eg-combobox-entry>
-        <eg-combobox-entry entryId="medium" entryLabel="medium"></eg-combobox-entry>
-        <eg-combobox-entry entryId="short" entryLabel="short"></eg-combobox-entry>
-      </eg-combobox>
+      <div class="form-check">
+        <input class="form-check-input" type="checkbox" 
+          [(ngModel)]="withDate" (change)="setDateString()"/>
+        <label class="form-check-label">Include Date</label>
+      </div>
     </div>
     <div class="col-lg-2">
-      <eg-combobox placeholder="Time Style" (onChange)="timeStyle = $event.id; setDateString()">
-        <eg-combobox-entry entryId="" entryLabel="No Time"></eg-combobox-entry>
-        <eg-combobox-entry entryId="full" entryLabel="full"></eg-combobox-entry>
-        <eg-combobox-entry entryId="long" entryLabel="long"></eg-combobox-entry>
-        <eg-combobox-entry entryId="medium" entryLabel="medium"></eg-combobox-entry>
-        <eg-combobox-entry entryId="short" entryLabel="short"></eg-combobox-entry>
-      </eg-combobox>
+      <div class="form-check">
+        <input class="form-check-input" type="checkbox" 
+          [(ngModel)]="withTime" (change)="setDateString()"/>
+        <label class="form-check-label">Include Time</label>
+      </div>
     </div>
     <div class="col-lg-4 font-weight-bold text-primary">{{dateString}}</div>
   </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 3e9d7a7..69645be 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -48,10 +48,10 @@ export class SandboxComponent implements OnInit {
     localeCodes: ComboboxEntry[] = [];
     dateLocale: string;
     dateTimeZone: string;
-    dateStyle: string;
-    timeStyle: string;
+    withDate = true;
+    withTime = false;
     dateString: string;
-    dateNow = new Date();
+    dateNow: string;
 
     // @ViewChild('helloStr') private helloStr: StringComponent;
 
@@ -265,6 +265,8 @@ export class SandboxComponent implements OnInit {
             }
             this.localeCodes.push({id: locale.code(), label: locale.code()});
         });
+
+        this.dateNow = DateUtil.dateToLocaleString(new Date(), {withTime: true});
     }
 
     sbChannelHandler = msg => {
@@ -397,12 +399,13 @@ export class SandboxComponent implements OnInit {
     }
 
     setDateString() {
-        const options: any = {};
 
-        if (this.dateLocale) { options.locale = this.dateLocale; }
-        if (this.dateTimeZone) { options.timeZone = this.dateTimeZone; }
-        if (this.dateStyle) { options.dateStyle = this.dateStyle; }
-        if (this.timeStyle) { options.timeStyle = this.timeStyle; }
+        const options = {
+            locale: this.dateLocale || null,
+            timeZone: this.dateTimeZone || null,
+            withDate: this.withDate,
+            withTime: this.withTime
+        };
 
         this.dateString = DateUtil.dateToLocaleString(new Date(), options);
     }