Safari Support

workspace/package.json

@@ -14,6 +14,7 @@
   },
   "private": true,
   "dependencies": {
+    "@12core/date-input-polyfill": "^3.1.1",
     "@angular/animations": "~13.0.2",
     "@angular/common": "~13.0.2",
     "@angular/compiler": "~13.0.2",
@@ -22,7 +23,6 @@
     "@angular/platform-browser": "~13.0.2",
     "@angular/platform-browser-dynamic": "~13.0.2",
     "@angular/router": "~13.0.2",
-    "configurable-date-input-polyfill": "^2.7.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"

workspace/projects/date-value-accessor/package.json

@@ -29,9 +29,11 @@
   "homepage": "https://github.com/johanneshoppe/angular-date-value-accessor",
   "peerDependencies": {
     "@angular/common": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
-    "@angular/core": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0"
+    "@angular/core": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0",
+    "@12core/date-input-polyfill": "^3.1.1"
   },
   "dependencies": {
+    "@12core/date-input-polyfill": "^3.1.1",
     "tslib": "^2.0.0"
   }
 }

workspace/projects/date-value-accessor/src/lib/date-value-accessor-polyfill.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { DateValueAccessorPolyfill } from './date-value-accessor-polyfill';
+
+@NgModule({
+  declarations: [DateValueAccessorPolyfill],
+  exports: [DateValueAccessorPolyfill]
+})
+export class DateValueAccessorPolyfillModule { }

workspace/projects/date-value-accessor/src/lib/date-value-accessor-polyfill.ts

@@ -0,0 +1,30 @@
+import { Directive } from "@angular/core";
+import '@12core/date-input-polyfill/dist/date-input-polyfill.esm';
+import { Input } from '@12core/date-input-polyfill/dist/date-input-polyfill.esm'
+
+
+/**
+ * The original polyfill patches controls on DOMContentLoaded and body.mousedown
+ * but not when Angular adds elements to DOM
+ * see https://github.com/little-core-labs/date-input-polyfill/blob/master/src/date-input-polyfill.js
+ *
+ * This directives makes sure all our date input controls are patched before first usage
+ */
+@Directive({
+  selector: '[useValueAsDate],[useValueAsLocalDate],[useValueAsIso],[useValueAsLocalIso]'
+})
+export class DateValueAccessorPolyfill {
+  constructor() {
+    if (!Input.supportsDateInput()) {
+      Input.addPickerToDateInputs()
+    }
+  }
+}
+
+// https://stackoverflow.com/a/31732310
+export function isSafari() {
+  return navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
+    navigator.userAgent &&
+    navigator.userAgent.indexOf('CriOS') == -1 &&
+    navigator.userAgent.indexOf('FxiOS') == -1;
+}

workspace/projects/date-value-accessor/src/public-api.ts

@@ -11,3 +11,6 @@ export * from './lib/iso-date-value-accessor';
 export * from './lib/iso-date-value-accessor.module';
 export * from './lib/local-iso-date-value-accessor';
 export * from './lib/local-iso-date-value-accessor.module';
+
+export * from './lib/date-value-accessor-polyfill';
+export * from './lib/date-value-accessor-polyfill.module';

workspace/projects/demo/.browserslistrc

@@ -14,5 +14,3 @@ last 2 Edge major versions
 last 2 Safari major versions
 last 2 iOS major versions
 Firefox ESR
-IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
-IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

workspace/projects/demo/src/app/app.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { IsoDateValueAccessorModule } from 'projects/date-value-accessor/src/lib/iso-date-value-accessor.module';
 import {
   DateValueAccessorModule,
+  DateValueAccessorPolyfillModule,
+  IsoDateValueAccessorModule,
   LocalDateValueAccessorModule,
   LocalIsoDateValueAccessorModule,
 } from 'projects/date-value-accessor/src/public-api';
@@ -42,7 +43,8 @@ import { ExplanationLocalIsoDateValueAccessorComponent } from './shared/explanat
     DateValueAccessorModule,
     LocalDateValueAccessorModule,
     IsoDateValueAccessorModule,
-    LocalIsoDateValueAccessorModule
+    LocalIsoDateValueAccessorModule,
+    DateValueAccessorPolyfillModule
   ],
   bootstrap: [AppComponent]
 })

workspace/projects/demo/src/app/demo-with-dates/reactive-form/reactive-form.component.html

@@ -68,7 +68,7 @@ <h2>LocalDateValueAccessor</h2>
 
 <app-explanation-default-value-accessor></app-explanation-default-value-accessor>
 
-<div class="bad">
+<div class="bad" *ngIf="!isSafari">
   <h2>DefaultValueAccessor<br><small>(does not work)</small></h2>
 
   <form [formGroup]="myFormDefault">
@@ -95,3 +95,7 @@ <h2>DefaultValueAccessor<br><small>(does not work)</small></h2>
 typeof(releaseDate): {{ typeof(demoDefault.releaseDate) }}
 </pre>
 </div>
+
+<div class="bad" *ngIf="isSafari">
+  Sorry, we disabled the demo of Angular's original DefaultValueAccessor <strong>on Safari</strong> because it causes an error at runtime.
+</div>

workspace/projects/demo/src/app/demo-with-dates/reactive-form/reactive-form.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { isSafari } from 'projects/date-value-accessor/src/public-api';
 
 import { Release } from '../../shared/release';
 
@@ -17,6 +18,8 @@ export class ReactiveFormComponent implements OnInit {
   myFormLocalDateValue: FormGroup;
   myFormDefault: FormGroup;
 
+  isSafari = isSafari();
+
   constructor(private fb: FormBuilder) {
     this.demoDateValue = new Release('2.0.0', new Date('2020-01-01')); // UTC
     this.demoLocalDateValue = new Release('3.0.0', new Date(2020, 0, 1)); // with offset

workspace/projects/demo/src/app/demo-with-dates/template-driven-form/template-driven-form.component.html

@@ -72,7 +72,7 @@ <h2>LocalDateValueAccessor</h2>
 
 <app-explanation-default-value-accessor></app-explanation-default-value-accessor>
 
-<div class="bad">
+<div class="bad" *ngIf="!isSafari">
   <h2>DefaultValueAccessor<br><small>(does not work)</small></h2>
 
   <form>
@@ -102,3 +102,6 @@ <h2>DefaultValueAccessor<br><small>(does not work)</small></h2>
 </pre>
 </div>
 
+<div class="bad" *ngIf="isSafari">
+  Sorry, we disabled the demo of Angular's original DefaultValueAccessor <strong>on Safari</strong> because it causes an error at runtime.
+</div>

workspace/projects/demo/src/app/demo-with-dates/template-driven-form/template-driven-form.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { isSafari } from 'projects/date-value-accessor/src/public-api';
+
 import { Release } from '../../shared/release';
 
 @Component({
@@ -15,6 +17,8 @@ export class TemplateDrivenFormComponent {
   demoLocalDateValueDisabled = false;
   demoDefaultDisabled = false;
 
+  isSafari = isSafari();
+
   constructor() {
     this.demoDateValue = new Release('2.0.0', new Date('2020-01-01')); // UTC
     this.demoLocalDateValue = new Release('3.0.0', new Date(2020, 0, 1)); // with offset

workspace/projects/demo/src/app/demo-with-strings/reactive-form-iso/reactive-form-iso.component.html

@@ -66,7 +66,7 @@ <h2>LocalIsoDateValueAccessor</h2>
 
 <hr>
 
-<div class="bad">
+<div class="bad" *ngIf="!isSafari">
   <h2>DefaultValueAccessor<br><small>(does not work)</small></h2>
 
   <form [formGroup]="myFormDefault">
@@ -93,3 +93,7 @@ <h2>DefaultValueAccessor<br><small>(does not work)</small></h2>
 typeof(releaseDate): {{ typeof(demoIsoDefault.releaseDate) }}
 </pre>
 </div>
+
+<div class="bad" *ngIf="isSafari">
+  Sorry, we disabled the demo of Angular's original DefaultValueAccessor <strong>on Safari</strong> because it causes an error at runtime.
+</div>

workspace/projects/demo/src/app/demo-with-strings/reactive-form-iso/reactive-form-iso.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { isSafari } from 'projects/date-value-accessor/src/public-api';
 
 import { ReleaseWithIsoString } from '../../shared/release-with-iso-string';
 
@@ -17,6 +18,8 @@ export class ReactiveFormIsoComponent implements OnInit {
   myFormDefault: FormGroup;
   myFormLocalDateValue: FormGroup;
 
+  isSafari = isSafari();
+
   constructor(private fb: FormBuilder) {
     this.demoIsoDateValue = new ReleaseWithIsoString('2.0.0', new Date('2020-01-01').toISOString()); // UTC
     this.demoLocalIsoDateValue = new ReleaseWithIsoString('3.0.0', new Date(2020, 0, 1).toISOString()); // with offset

workspace/projects/demo/src/app/demo-with-strings/template-driven-form-iso/template-driven-form-iso.component.html

@@ -71,7 +71,7 @@ <h2>LocalIsoDateValueAccessor</h2>
 
 <hr>
 
-<div class="bad">
+<div class="bad" *ngIf="!isSafari">
   <h2>DefaultValueAccessor<br><small>(does not work)</small></h2>
 
   <form>
@@ -101,3 +101,6 @@ <h2>DefaultValueAccessor<br><small>(does not work)</small></h2>
 </pre>
 </div>
 
+<div class="bad" *ngIf="isSafari">
+  Sorry, we disabled the demo of Angular's original DefaultValueAccessor <strong>on Safari</strong> because it causes an error at runtime.
+</div>

workspace/projects/demo/src/app/demo-with-strings/template-driven-form-iso/template-driven-form-iso.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { isSafari } from 'projects/date-value-accessor/src/public-api';
+
 import { ReleaseWithIsoString } from '../../shared/release-with-iso-string';
 
 @Component({
@@ -15,6 +17,8 @@ export class TemplateDrivenFormIsoComponent {
   demoLocalIsoDateValueDisabled = false;
   demoIsoDefaultDisabled = false;
 
+  isSafari = isSafari();
+
   constructor() {
     this.demoIsoDateValue = new ReleaseWithIsoString('2.0.0', new Date('2020-01-01').toISOString()); // UTC
     this.demoLocalIsoDateValue = new ReleaseWithIsoString('3.0.0', new Date(2020, 0, 1).toISOString()); // with offset

workspace/projects/demo/src/polyfills.ts

@@ -51,4 +51,3 @@ import 'zone.js';  // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
-import 'configurable-date-input-polyfill';