add datepicker

artempohalyuk · artempohalyuk · commit c513acf4e565 · 2020-03-24T17:12:18.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "@angular/platform-browser": "8.2.9",
     "@angular/platform-browser-dynamic": "8.2.9",
     "@angular/router": "8.2.9",
+    "@giomamaladze/ng2-semantic-ui": "0.10.8",
     "bootstrap": "4.3.1",
     "core-js": "3.2.1",
     "hammerjs": "2.0.8",
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -52,10 +52,10 @@ <h1 class="title">
                   <input
                     matInput
                     placeholder="Phone number"
-                    mask="(000) 000-0000"
-                    prefix="+5 "
-                    [(ngModel)]="test"
+                    mask="00.00.0000"
                     [showOnFocus]="true"
+                    suiDatepicker
+                    pickerMode="date"
                   />
                   <mat-hint><b>Mask: </b>+5 (000) 000 0000</mat-hint>
                 </mat-form-field>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -73,7 +73,7 @@ export class AppComponent {
   public commaSeparatorForm!: FormControl;
   public commaPrecisionSeparatorForm!: FormControl;
   public commaZeroPrecisionSeparatorForm!: FormControl;
-  public test = '5435 5 345';
+  public test = '';
 
   public constructor() {
     this.form = new FormControl('');
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -17,9 +17,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import 'hammerjs';
 
-
 import { AppComponent } from './app.component';
-import { NgxMaskModule } from 'ngx-mask';
+import { NgxMaskModule } from 'projects/ngx-mask-lib/src';
+import { SuiModule } from '@giomamaladze/ng2-semantic-ui';
 
 @NgModule({
   declarations: [AppComponent, TestMaskComponent],
@@ -41,6 +41,7 @@ import { NgxMaskModule } from 'ngx-mask';
     MatListModule,
     MatCardModule,
     FormsModule,
+    SuiModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,7 @@
   <meta name="author" content=""/>
   <title>ng2Mask-Plugin - A Angular2 plugin to make field masks.</title>
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
 </head>
 <body>
 <app-root>
