Hoorah - UK format dates now working in Clarity Datepicker

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="container content-container mb-4">
+<div class="central-col content-container mb-4">
 	<div class="clr-row">
 		<div class="clr-col-12 pt-4 pb-2">
 			<h1>NgDynaform: Clarity Edition</h1>

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, LOCALE_ID } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -23,7 +23,7 @@ import { JsonFormatterDirective } from './directives/json-formatter.directive';
 		AppComponent,
 		JsonFormatterDirective
 	],
-	providers: [],
-	bootstrap: [AppComponent]
+	providers: [ { provide: LOCALE_ID, useValue: 'en-gb' } ],
+	bootstrap:  [AppComponent ]
 })
 export class AppModule { }

src/app/dynaform/components/clarity/datepicker/datepicker.component.ts

@@ -10,4 +10,15 @@ export class DatepickerComponent extends NativeInputComponent {
 
 	exposeMetaInTemplate: string[] = ['extraClass', 'placeholder'];
 
+	ngOnInit() {
+		super.ngOnInit();
+		
+		// CLarity datepicker expects a string when used reactively
+		const dateObj = this.control.value;
+		const d = dateObj.getDate();
+		const m = dateObj.getMonth();
+		const y = dateObj.getFullYear();
+		this.control.setValue(`${d}/${m + 1}/${y}`);
+	}
+
 }

src/app/dynaform/dynaform.component.html

@@ -81,13 +81,15 @@
 
 
 <!-- Display validation status if debugging and not nested -->
-<div *ngIf="debug && path.length === 0">
-	<pre [ngClass]="{
-			'alert-success' 	: formGroup.valid && formGroup.dirty,
-			'alert-danger' 		: !formGroup.valid && formGroup.dirty,
-			'alert-secondary' 	: !formGroup.dirty
-		}"
-		class="alert mt-4"
-		role="alert">{{ formGroup.pristine ? 'Untouched' : getValidationErrors() | json }}</pre>
+<div *ngIf="debug && path.length === 0" [ngClass]="{
+		'alert-success' 	: formGroup.valid && formGroup.dirty,
+		'alert-danger' 		: !formGroup.valid && formGroup.dirty,
+		'alert-info' 		: !formGroup.dirty
+	}"
+	class="alert __debug"
+	role="alert">
+		<div class="alert-items">
+			<pre class="alert-text" style="border: none;">{{ formGroup.pristine ? 'Untouched' : getValidationErrors() | json }}</pre>
+		</div>
 </div>
 	

src/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>NgDynaform</title>
   <base href="/">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/styles.scss

@@ -10,7 +10,6 @@ $col-blue-primary: #0085bc;
 
 $col-charcoal: #444;
 
-
 // --------------------------------------------------------------------------------------------------------------------
 
 // Clarity Dependency SCSS
@@ -22,6 +21,11 @@ $clr-forms-select-hover-background: $col-blue-lightest;
 // Clarity Component SCSS
 @import "../node_modules/@clr/ui/src/utils/components.clarity";
 
+.central-col {
+	max-width: 80%;
+	margin: 0 auto;
+}
+
 h1 {
 	color: $col-blue-primary;
 	border-bottom: 4px $col-blue-primary solid;
@@ -170,3 +174,9 @@ input, textarea, select {
 	}
 }
 
+// ---------------------------------------------------------------------------------------------------------------------
+// Debugging
+
+.__debug {
+	margin: 2em 0;
+}