dev #14607 Море. Правки по сайту: remove datepicker and add date mask

angular/angular.json

@@ -9,9 +9,11 @@
 	    "schematics": {
 		"@schematics/angular:component": {
 		    "style": "scss"
+		},
+		"i18n": {
+		    "sourceLocale": "ru-RU"
 		}
 	    },	    
-      
 	    "root": "",
 	    "sourceRoot": "src",
 	    "prefix": "app",

angular/package-lock.json

@@ -16,6 +16,7 @@
         "@angular/fire": "^7.5.0",
         "@angular/forms": "^15.2.9",
         "@angular/material": "^15.2.9",
+        "@angular/material-moment-adapter": "^15.2.9",
         "@angular/platform-browser": "^15.2.9",
         "@angular/platform-browser-dynamic": "^15.2.9",
         "@angular/router": "^15.2.9",
@@ -27,6 +28,7 @@
         "@types/uuid": "^8.3.4",
         "@types/web": "^0.0.99",
         "angular-moment-timezone": "^1.7.1",
+        "angular2-text-mask": "^9.0.0",
         "barcode-2-svg": "^0.3.3",
         "firebase": "^9.9.3",
         "google-libphonenumber": "^3.2.30",
@@ -864,6 +866,19 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material-moment-adapter": {
+      "version": "15.2.9",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-15.2.9.tgz",
+      "integrity": "sha512-DHG8z8DG1/+oO/bRC/k+1nXwRGg0qDsCEYulUoEUtpYmQRHj8Tid/9V2JiibYqTh4s0DJeAnx64CAO9K/k9EZg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^15.0.0 || ^16.0.0",
+        "@angular/material": "15.2.9",
+        "moment": "^2.18.1"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "15.2.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-15.2.9.tgz",
@@ -5813,6 +5828,14 @@
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.29.tgz",
       "integrity": "sha512-mla2acNCMkWXBD+c+yeUrBUrzOxYMNFdQ6FGfigGGtEVBPJx07BQeJekjt9DmH1FtZek4E9rE1eRR9qQpxACOQ=="
     },
+    "node_modules/angular2-text-mask": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/angular2-text-mask/-/angular2-text-mask-9.0.0.tgz",
+      "integrity": "sha512-iALcnhJPS1zvX48d86rgUgDe/crX6XfhZrXC4Gdlo2/YwZW7u7KJZY6/b3ieSCIWVq/E6p+wDCzeo3E6leRjDA==",
+      "dependencies": {
+        "text-mask-core": "^5.0.0"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -13564,6 +13587,11 @@
       "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
       "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg=="
     },
+    "node_modules/text-mask-core": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/text-mask-core/-/text-mask-core-5.1.2.tgz",
+      "integrity": "sha512-VfkCMdmRRZqXgQZFlDMiavm3hzsMzBM23CxHZsaeAYg66ZhXCNJWrFmnJwNy8KF9f74YvAUAuQenxsMCfuvhUw=="
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -15118,6 +15146,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material-moment-adapter": {
+      "version": "15.2.9",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-15.2.9.tgz",
+      "integrity": "sha512-DHG8z8DG1/+oO/bRC/k+1nXwRGg0qDsCEYulUoEUtpYmQRHj8Tid/9V2JiibYqTh4s0DJeAnx64CAO9K/k9EZg==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "15.2.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-15.2.9.tgz",
@@ -18959,6 +18995,14 @@
         }
       }
     },
+    "angular2-text-mask": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/angular2-text-mask/-/angular2-text-mask-9.0.0.tgz",
+      "integrity": "sha512-iALcnhJPS1zvX48d86rgUgDe/crX6XfhZrXC4Gdlo2/YwZW7u7KJZY6/b3ieSCIWVq/E6p+wDCzeo3E6leRjDA==",
+      "requires": {
+        "text-mask-core": "^5.0.0"
+      }
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -24763,6 +24807,11 @@
       "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
       "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg=="
     },
+    "text-mask-core": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/text-mask-core/-/text-mask-core-5.1.2.tgz",
+      "integrity": "sha512-VfkCMdmRRZqXgQZFlDMiavm3hzsMzBM23CxHZsaeAYg66ZhXCNJWrFmnJwNy8KF9f74YvAUAuQenxsMCfuvhUw=="
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

angular/package.json

@@ -18,6 +18,7 @@
     "@angular/fire": "^7.5.0",
     "@angular/forms": "^15.2.9",
     "@angular/material": "^15.2.9",
+    "@angular/material-moment-adapter": "^15.2.9",
     "@angular/platform-browser": "^15.2.9",
     "@angular/platform-browser-dynamic": "^15.2.9",
     "@angular/router": "^15.2.9",
@@ -29,6 +30,7 @@
     "@types/uuid": "^8.3.4",
     "@types/web": "^0.0.99",
     "angular-moment-timezone": "^1.7.1",
+    "angular2-text-mask": "^9.0.0",
     "barcode-2-svg": "^0.3.3",
     "firebase": "^9.9.3",
     "google-libphonenumber": "^3.2.30",

angular/src/app/app.module.ts

@@ -50,7 +50,6 @@ import {
 } from '@angular/material/bottom-sheet';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { DirectivesModule } from './directives/directives.module';
-import { MAT_DATE_LOCALE } from '@angular/material/core';
 
 @NgModule({
   declarations: [
@@ -108,7 +107,7 @@ import { MAT_DATE_LOCALE } from '@angular/material/core';
     MatSnackBarModule,
     MatBottomSheetModule,
     MatProgressSpinnerModule,
-    DirectivesModule
+    DirectivesModule,
   ],
   providers: [
     DialogService,
@@ -116,7 +115,6 @@ import { MAT_DATE_LOCALE } from '@angular/material/core';
     MessagingService,
     { provide: MatBottomSheetRef, useValue: {} },
     { provide: MAT_BOTTOM_SHEET_DATA, useValue: {} },
-    { provide: MAT_DATE_LOCALE, useValue: 'ru-RU' }
   ],
   bootstrap: [AppComponent],
 })

angular/src/app/presentation-options/default-option/default-option.module.ts

@@ -7,9 +7,7 @@ import { SocialMediaButtonsComponent } from './components/social-media-buttons/s
 import { NavbarComponent } from './components/navbar/navbar.component';
 import { MenuItemComponent } from './components/navbar/menu_item.component';
 import { MatIconModule } from '@angular/material/icon';
-import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatSelectModule } from '@angular/material/select';
-import { MatNativeDateModule } from '@angular/material/core';
 import { GuestCardComponent } from './pages/guest-card/guest-card.component';
 import { QrCodeModule } from 'ng-qrcode';
 import { AccordionComponent } from './components/accordion/accordion.component';
@@ -26,7 +24,7 @@ import { LoyalityProgramComponent } from './pages/loyality-program/loyality-prog
 import { MatButtonModule } from '@angular/material/button';
 import { ToastModule } from 'primeng/toast';
 import { CreateUserComponent } from './pages/create_user/create_user.component';
-
+import { TextMaskModule } from 'angular2-text-mask';
 
 @NgModule({
   declarations: [
@@ -44,6 +42,7 @@ import { CreateUserComponent } from './pages/create_user/create_user.component';
     CreateUserComponent,
   ],
   imports: [
+		TextMaskModule,
     ToastModule,
     CommonModule,
     DefaultOptionRoutingModule,
@@ -57,9 +56,7 @@ import { CreateUserComponent } from './pages/create_user/create_user.component';
     MatInputModule,
     DirectivesModule,
     MatButtonModule,
-    MatDatepickerModule,
     MatSelectModule,    
-    MatNativeDateModule,
   ],
   bootstrap: [IndexComponent],
 })

angular/src/app/presentation-options/default-option/pages/create_user/create_user.component.html

@@ -20,9 +20,7 @@
       </mat-form-field>
       <mat-form-field appearance="outline">
 	<mat-label>Дата рождения</mat-label>	
-	<input formControlName="date" matInput [matDatepicker]="picker">      
+	<input formControlName="date" matInput [textMask]="mask">      	
-	<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-	<mat-datepicker #picker></mat-datepicker>
       </mat-form-field>
       <button mat-raised-button color="primary">Зарегистрироваться</button>
     </div>

angular/src/app/presentation-options/default-option/pages/create_user/create_user.component.ts

@@ -16,6 +16,12 @@ export class CreateUserComponent implements OnInit {
     date: new FormControl('', [Validators.required]),
   });
 
+  public mask = {
+    guide: true,
+    showMask: false,
+    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]
+  };
+
   constructor(
     public authService: AuthService,
     private messageService: MessageService,