Как обрабатывать несколько форматов даты в Bsdatepicker - PullRequest
Новая
       71

Как обрабатывать несколько форматов даты в Bsdatepicker

0 голосов
/ 17 января 2020

что мне нужно

  • мне нужно обработать несколько форматов даты в bsdatepicker.

Компонент даты 

        import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit, AfterViewChecked } from '@angular/core';
        import { FormGroup } from '@angular/forms';

        import * as moment from 'moment';
        import { BsDatepickerConfig, BsLocaleService } from 'ngx-bootstrap/datepicker';
        @Component({
          selector: 'date',
          changeDetection: ChangeDetectionStrategy.OnPush,
          template: `
              <div [formGroup]="form" >
                <ng-container *ngIf="field.read_only !== 'Y'">
                    <div>
                      <input type="text" class="form-control edit-mode-field" 
                        bsDatepicker
                        [formControlName]="field.code"
                        [bsConfig]="datePickerConfig"
                        [(ngModel)]="myDateValue"
                        (ngModelChange)="customOnDateChange($event);"
                        placeholder={{'DD-MMM-YYYY'}} 
                        #dp="bsDatepicker"
                        (keyup)="dp.toggle()"
                        value="{{ myDateValue | date: 'dd-MMM-yyyy'}}"
                        [(bsValue)]="myDateValue"
                       />
                        <i (click)="dp.toggle()"  class="far fa-calendar-alt date-field-calendar-icon"></i>
                    </div>
                    <span class="view-mode-field">{{ field.value }}</span>
                </ng-container>
                <ng-container *ngIf="field.read_only === 'Y'">
                      <span class="">{{ field.value }}</span>
                </ng-container>
              </div>
            `
        })
        export class DateComponent implements OnInit {
          @Input() field: any = {};
          @Input() form: FormGroup;
          @Input() type: string;

          appConstants = new ClientAppConstants();

          get isValid() { return this.form.controls[this.field.code].valid; }
          get isDirty() { return this.form.controls[this.field.code].dirty; }

          datePickerConfig = {
            isAnimated: true,
            containerClass: 'theme-blue',
            showWeekNumbers: false,
          };
          customInitDate = '';
          myDateValue = '';
          formatsDateFormats: any;
          constructor(private cd: ChangeDetectorRef, private bs: BsDatepickerConfig) {
            this.formatsDateFormats = [
              'dd/MM/yyyy',
              'dd/MM/yyyy hh:mm:ss',
              'dd-MM-yyyy',
              'DD-MM-YYYY',
              'dd-MM-yyyy HH:mm:ss',
              'MM/dd/yyyy',
              'MM/dd/yyyy hh:mm:ss',
              'yyyy/MM/dd',
              'yyyy/MM/dd HH:mm:ss',
              'dd/MM/yy',
              'dd/MM/yy hh:mm:ss',
              'DD-MM-YYYY', 'MM/dd/yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate', 'medium',
              'short', 'fullDate', 'longDate', 'mediumDate', 'mediumTime', 'DD-MMM-YYYY', 'YYYY-MMM-DD', 'YYYY/MMM/DD',
              'YYYY-MM-DD', 'YYYY/MM/DD'
            ];
            this.bs.dateInputFormat = this.formatsDateFormats;
          }
          ngOnInit() {
            if (this.field.value) {
              this.myDateValue = moment(new Date(this.field.value)).format('DD-MMM-YYYY');
            }

            if (typeof this.field.maxDays != 'undefined') {
              const date1 = new Date();
              date1.setDate(date1.getDate() + this.field.maxDays);
              this.datePickerConfig['maxDate'] = date1;
            }
            if (typeof this.field.minDays != 'undefined') {
              const date2 = new Date();
              date2.setDate(date2.getDate() - this.field.minDays);
              this.datePickerConfig['minDate'] = date2;
            }
            this.cd.markForCheck(); // marks path
            this.cd.detectChanges();
          }

          customOnDateChange(search: any) {
            if (search !== '') {
              if (moment(search).isValid()) {
                this.myDateValue = moment(new Date(search)).format('DD-MMM-YYYY');
              } else {
                this.myDateValue = '';
              }

            }

          }

        }

https://valor-software.com/ngx-bootstrap/# / DatePicker

Stackblitz

https://stackblitz.com/edit/ngx-bootstrap-datepicker-testing?file=app%2Fapp.component.ts

...