如何在 moment.js 中使用自定义日期格式 'MM/DD/YYYY H:MM am/pm'？答案

【问题标题】：how to used custom date format 'MM/DD/YYYY H:MM am/pm' in moment.js?如何在 moment.js 中使用自定义日期格式 'MM/DD/YYYY H:MM am/pm'？
【发布时间】：2017-08-23 13:40:21
【问题描述】：

我使用了 angular4 和 moment.js。我的自定义格式是：- 'MM/DD/YYYY H:MM am/pm' 我不知道如何使用这种格式。

Component.ts:-

import * as moment from 'moment';
ngOnInit() {
  moment(1503491583*1000).format('MM/DD/YYYY H:MM am/pm');
}

输出：- 08/23/2017 18:08 pm3/p3

这个输出是错误的。请告诉我们如何获得输出是 '08/23/2017 18:08 pm'

【问题讨论】：

标签： angular momentjs

【解决方案1】：

只需使用a 令牌，请参阅format() 文档。

请注意，您必须使用小写的 mm 来获取分钟，而大写的 MM 是月份。

import * as moment from 'moment';
ngOnInit() {
  moment(1503491583*1000).format('MM/DD/YYYY H:mm a');
}

你得到pm3/p3，因为am/pm被解释为：

a => am 或 pm（pm 适合您的情况）
m 为分钟（3 在您的情况下）
p 作为p 字符

作为旁注，moment 有 moment.unix(Number) 方法来解析自 Unix 纪元以来的秒数，正如文档所说：

这被实现为moment(timestamp * 1000)，因此输入时间戳中的部分秒数包括在内。

您可以使用moment.unix(503491583) 而不是moment(1503491583*1000) 来获得相同的结果。

【讨论】：

【解决方案2】：

import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import * as moment from 'moment';


@Component({
  selector: 'app-user-details',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
    // {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class UserDetailsComponent implements OnInit {

  userDetailsFormGroup = this.fb.group({
    firstName: [''],
    lastName: [''],
    username: [''],
    address: ['', Validators.required],
    dob: [moment(), Validators.required],
    gender: ['', Validators.required],
    contactNumber: ['', Validators.required],
  });



   updateUserProfile() {

   const dobDate = this.userDetailsFormGroup.controls.dob.value;
     const momentDOB1 = dobDate.format('MM/DD/YYYY');

       const body = {
      'firstName': this.userDetailsFormGroup.controls.firstName.value,
      'lastName': this.userDetailsFormGroup.controls.lastName.value,
      'address': this.userDetailsFormGroup.controls.address.value,
      'dob': momentDOB1,
      'gender': this.userDetailsFormGroup.controls.gender.value,
      'contactNumber': this.userDetailsFormGroup.controls.contactNumber.value

    };


    // call http method here
   }


   getUserProfileData(){

   //get http 
    this.http.get<any>(AppSettings.BASE_URL + '/v1/userProfile/getMyProfile').pipe()
      .subscribe(
          data => {
              const dateDob = moment(data.dob, 'MM/DD/YYYY');
              console.log('getting date format :::');
              console.log(dateDob.toISOString());
              this.userDetailsFormGroup.controls.dob.setValue(dateDob);
          }
      );
}

【讨论】：

updateUserProfile 方法用于在数据库中以 MM/DD/YYYY 格式设置日期，以及用于在 angualr 应用程序的 datepicker 中设置 MM/DD/YYYY 格式字符串的 getUserProfile 方法