如何从输入类型 =“日期”自定义占位符数据 [重复]答案

【问题标题】：How to customize placeholder data from input type="date" [duplicate]如何从输入类型 =“日期”自定义占位符数据 [重复]
【发布时间】：2021-08-17 22:55:47
【问题描述】：

目前我有这个输入类型日期，我的问题是如何更改输入中的文本，而不是设置占位符，而是将“mm/dd/yyyy”更改为“ZZ/LL/AAAA”？

    <input matInput placeholder='Birth date' type='date' 
                                       formControlName='birthDate'>

【问题讨论】：

我不明白 - 占位符是您要更改的内容，那么更改占位符而不更改占位符是什么意思？
欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。
默认输入 type="date" 占位符设置为 "mm/dd/yyyy" 我不能更改它我需要像 "ZZ/LL/AAAA"

标签： html css angular

【解决方案1】：

要改变格式你需要使用一些css和js

查看此示例并将其用于您的需要。

$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD")
.format( this.getAttribute("data-date-format") )
)
}).trigger("change")

input {
position: relative;
width: 150px; height: 20px;
color: white;
}
input:before {
position: absolute;
top: 3px; left: 3px;
content: attr(data-date);
display: inline-block;
color: black;
}
input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
display: none;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
top: 3px;
right: 0;
color: black;
opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD/MM/YYYY" value="2015-08-09">
<br>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

【讨论】：

我不需要改变格式而是改变输入的文本现在是“mm/dd/yyyy”但我需要是“mm/dd/yyyy”

【解决方案2】：

您可以使用 Angular here 建议的自定义日期格式

我就是这样做的：

在 .TS 文件中

import * as _moment from 'moment'

import {defaultFormat as _rollupMoment} from 'moment'
const moment = _rollupMoment || _moment

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'DD MMM YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
}

@Component({
  selector: 'app',
  templateUrl: 'component.html',
  styleUrls: ['component.css'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ]
})

请务必在moment.js 官方网站上查找您的自定义格式。

您可以将dateInput 更改为moment.js 建议的任何格式

【讨论】：

【解决方案3】：

您可以使用日期适配器更改日期区域设置。例如。将此设置为瑞典日期格式的 ngOnInit。

this.dateAdapter.setLocale('sv-SE');

【讨论】：