Форматирование даты с помощью средства выбора даты и времени в DD-MM-YYYY

#javascript #angular #angular-material #datetimepicker

#javascript #угловой #угловой материал #datetimepicker

Вопрос:

Я использую средство выбора даты и времени из материала.

Но я хочу, чтобы формат был таким:

2021-02-15 23:59:59

Поэтому я пробую это так:

 export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'MMM DD, YYYY',
    monthYearLabel: 'MMMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  },
};

@Component({
  selector: 'app-widget-editor',
  templateUrl: './widget-editor.component.html',
  styleUrls: ['./widget-editor.component.css'],
  providers: [{provide: DateAdapter, useClass: AppDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}]
})

и шаблон выглядит следующим образом:

  <div class="form-group row">
                <label for="start" class="editor-label col-sm-4"><strong> Time start:</strong></label>

                <input [(ngModel)]="start" [ngModelOptions]="{standalone: true}" type="text" class="date"  id="start" value="start"  matInput [ngxMatDatetimePicker]="picker">
                <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>


                <span class="ml-2" (click)= "reOpenCalender()">
                    <fa-icon [icon]="faCalendarAlt" size="1x"    #picker [styles]="{'color': '#B7B7B7'}"
                      ></fa-icon>
                </span>
            </div>

Но это не работает, это все еще показывает это:

 2/25/2021, 16:32:52

Итак, что я должен изменить?

Я пробую это так:

 export class AppDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      let day: string = date.getDate().toString();
      day =  day < 10 ? '0'   day : day;
      let month: string = (date.getMonth()   1).toString();
      month =  month < 10 ? '0'   month : month;
      let year = date.getFullYear();
      return `${year}-${month}-${day}`;
    }
    return date.toDateString();
  }
}
export const APP_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'numeric' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'
    },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

Но я не использую средство выбора даты, но я использую: средство выбора даты и времени:

https://stackblitz.com/edit/demo-ngx-mat-datetime-picker ?файл=src/app/app.module.ts

и тогда это не работает.

1. Вы можете использовать канал даты. angular.io/guide/pipes

2. ? Но у меня нет собственности. Как это сделать в этом примере?

3. Вы можете получить временную метку UNIX с помощью средства выбора даты и преобразовать ее с помощью канала даты в любой формат, который вы хотите.

Ответ №1:

Вы могли бы сделать это сами, сложив вместе день, месяц и год. Я не уверен, что этот код именно то, что вы хотите, но вы могли бы сделать что-то подобное.

 var today = new Date();
var date = today.getDate()   "/"   (today.getMonth()   1)   "/"   today.getFullYear();

Ответ №2:

Используйте thisone для вашего формата даты. Формат даты :- this.currentDate = ${this.currDate.getFullYear().toString().padStart(4, '0')}-${(this.currDate.getMonth() 1).toString().padStart(2, '0')}-${this.currDate.getDate().toString().padStart(2, '0')} ${this.currDate.getHours().toString().padStart(2, '0')}:${this.currDate.getMinutes().toString().padStart(2, '0')}:${this.currDate.getSeconds().toString().padStart(2, '0')}