时间戳

首页 > 解决方案 > 在角度 ng datepicker 中将日期字符串 ddmmyy 转换为 dd/mm/yyyy

angular - 在角度 ng datepicker 中将日期字符串 ddmmyy 转换为 dd/mm/yyyy

问题描述

正在使用NgbDatePicker的问题是，每当用户单击切换按钮并选择日期时，这意味着它同时转换所需dd/mm/yyyy的格式，而不是选择用户输入日期作为字符串，就像ddmmyyyy它不会转换为一样dd/mm/yyyy（例如：10072020 到 2020 年 7 月 10 日）拆分未按预期工作CustomDateParserFormatter。请帮助我如何解决这个问题，我不知道如何继续。 组件.ts

import { Injectable } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

@Injectable()
export class CustomDateParserFormatter {
    parse(value: string): NgbDateStruct {
        if (!value) {
            return null;
        }
        const parts = value;
        parts.split('/');
        console.log("first calling");
        return { year: +parts[0], month: +parts[1], day: +parts[2] } as NgbDateStruct;

    }
    format(date: NgbDateStruct): string {
        // tslint:disable-next-line:prefer-template
        console.log("second calling");
        return date ? ('0' + date.day).slice(-2) + '/' + ('0' + date.month).slice(-2) + '/' + date.year : null;
    }
}

组件.html

<div class="input-group datePicker">
    <input class="form-control" placeholder="DD/MM/YYYY" ngbDatepicker formControlName="dateofBrith"
        [minDate]="{year: 1945, month: 1, day: 1}" [maxDate]="{year: 2020, month: 12, day: 31}"
        name="dp" ngbDatepicker #d="ngbDatepicker" (ngModelChange)="changeDob($event)"
        maxlength="10">
    <div class="input-group-append">
        <button class="btn calendar btn-custom btn-outline-secondary" (click)="d.toggle()"
            type="button"><img src="/assets/images/dateicon.png"></button>
    </div>
</div>

在 console.log ("firstcalling") 中，当用户直接输入值时，字符串拆分不起作用，它应该转换为dd/mm/yyyy. 你们能帮我如何将日期字符串转换ddmmyyyy为日期格式吗dd/mm/yyy？

标签： angulartypescriptng-bootstrapbootstrap-datepickerangular9

解决方案

首先你应该改变代码

const parts = value;
parts.split('/');

对此

const parts = value.split('/');

您还需要在拆分后进行检查。以下条件检查它是否包含 / 即是否手动输入。

if(parts.length === 3) {
  return { year: +parts[0], month: +parts[1], day: +parts[2] } as NgbDateStruct;
}
else {
  return { year: +value.substring(0,2), month: +value.substring(2,4), day: 
           + value.substring(4,8) } as NgbDateStruct;
}

推荐阅读