#ionic3
#ionic3
Вопрос:
Я создаю приложение Ionic 3, которое содержит средство выбора ion-datetime для выбора даты. Меня попросили начать выбор с определенной даты (чтобы старшим пользователям не приходилось слишком много прокручивать), но при этом разрешить пользователю выбирать более новые или более старые даты по сравнению с этим предварительно назначенным значением.
Итак, мой 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 ‘ устанавливается программно при инициализации компонента, беря текущее значение date и вычитая оттуда 18 лет. Это работает хорошо, и если сегодня 19 марта 2019 года, то startingDate устанавливается на 19 марта 2001 года.
Пока все хорошо. С одной проблемой: при заданном начальном значении, присвоенном с помощью ngModel, атрибут ‘placeholder’ переопределяется. Это может привести к тому, что мои пользователи будут полагать, что дата была предварительно выбрана для них, или случайно пролистают ввод даты и отправят неправильное значение.
Мой вопрос: могу ли я сделать placeholder атрибут с текстовым индикатором, подобным тому, что в коде, и значением по умолчанию, установленным [(ngModel)]="startingDate" , сосуществующими в представлении? Смысл не в том, чтобы показывать оба значения в поле ввода, а в том, чтобы заранее назначенное значение было готово для предварительного заполнения селектора даты, когда пользователь нажимает на поле. Я пытался изменить использование [(ngModel)] на присвоение [значения] (как с [], так и без него), но в этом сценарии значение не устанавливается внутри моего средства выбора даты и времени.
Ответ №1:
Итак, что вы можете использовать, так это интерполяцию строк для вашего заполнителя и использовать ту же переменную для вашей предварительно выбранной даты.
<ion-datetime type="date" displayFormat="DD/MMM/YYYY" pickerFormat="DD/MMM/YYYY" placeholder={{startingDate}} [max]="today" ngModel // more parameters after that>
В некоторых случаях, если вы не манипулировали своей строкой даты, вы получите полное значение даты, потому что pickerFormat и DisplayFormat не распознают значение заполнителя.
Вы можете изменить внешний вид на любой, какой захотите.
public Date: any = new Date();
public startingDate: any = this.Date.getMonth() 1 '/' this.Date.getDate() '/' (this.Date.getFullYear() - 18);
Комментарии:
1. Привет, Стивен, не совсем то, что я искал (хотя ты заставил меня увидеть, что часть предпосылки вопроса была недостаточно ясной, и я отредактировал ее, так что спасибо за это!). Что я ищу, так это текстовый заполнитель, подобный тому, что был в моем исходном сообщении, чтобы пользователь видел текст «Выберите дату», прежде чем он / она откроет средство выбора даты и времени, чтобы сделать выбор.
2. @JurgenBlitz Я немного запутался. Итак, вам нужен заполнитель, но вы также хотите, чтобы отображалась начальная дата? или показывать только после выбора поля формы?
3. идея заключается в том, чтобы заполнитель отображался до того, как пользователь нажмет на ввод. В настоящее время, если я не включаю заполнитель, когда я нажимаю на фактический селектор даты и времени, «колесо» для даты уже установлено на мой startingDate. Я хочу сохранить это поведение, но включить заполнитель, чтобы он мог присутствовать до тех пор, пока пользователь не нажмет.