Question

并且很抱歉，如果重复出现，但是我的搜索没有给我可靠的答案。

因此，我正在构建一个Ionic 3应用，其中包含一个 ion-datetime 选择器以选择日期。我被要求从一个特定的日期开始选择（以防止年龄较大的用户不得不滚动太多），但仍然允许用户选择与该预定值相比较新或较旧的日期。

所以我的离子日期时间看起来像这样：

<ion-datetime type="date" displayFormat="DD/MMM/YYYY" pickerFormat="DD/MMM/YYYY" placeholder="Select Date" [max]="today" [(ngModel)]="startingDate" // more parameters after that>

在这种情况下，“ today”是当前日期，使用通常的const date = new Date();进行设置，而“ startingDate”是在组件初始化时以编程方式设置的，采用当前的{{1 }}，然后从那里减去18年。它运行良好，如果今天是2019年3月19日，则startingDate设置为2001年3月19日。

到目前为止很好。有一个问题：为ngModel分配了一个预定的起始值，“ placeholder”属性被覆盖。这可能导致我的用户认为为他们预选了日期，或者不小心浏览了日期输入并发送了错误的值。

我的观点：我可以使date属性带有文本指示符，如代码中的指示符，并且由placeholder设置的默认值在视图中共存吗？关键不是要在输入框中显示这两个值，而是要让预分配的值准备好在用户单击字段时预填充日期选择器。我尝试将[（ngModel）]的使用更改为[value]赋值（带有和不带有[]），但是在那种情况下，该值未在我的日期时间选择器中设置。

预先感谢，祝您有美好的一天。

Answer 1

So what you can use is string interpolation for your placeholder and use the same variable for your pre-selected Date.

<ion-datetime type="date" displayFormat="DD/MMM/YYYY" pickerFormat="DD/MMM/YYYY" placeholder={{startingDate}} [max]="today" ngModel // more parameters after that>

In some cases if you haven't manipulated your date string you will get the full Date value because the pickerFormat and displayFormat don't recognize the placeholder value.

You can change the look to however you want.

public Date: any = new Date();

public startingDate: any = this.Date.getMonth() + 1 + '/' + this.Date.getDate()+  '/' + (this.Date.getFullYear() - 18);

Hope this helps!

离子3（离子日期时间）可以同时显示预定值和占位符吗？

1 个答案: