angular 2 - создание модульного компонента средства выбора даты

Я читал о включении и пытаюсь понять, нужно ли мне это, чтобы создать службу выбора всплывающих окон, которую можно добавить куда угодно.

Поскольку ngx-bootstrap еще не поддерживает модальное средство выбора даты, я делаю свое собственное. У меня есть несколько средств выбора даты в приложении, даже несколько на одной странице, поэтому я хочу, чтобы оно было как можно более модульным.

Я начинаю со стандартного ввода даты:

<input 
    type="date" 
    class="form-control" 
    (click)="pickDate($event, '#requestDate')" />

На данный момент мой datepicker находится прямо на странице (помещен абсолютно, поэтому он ведет себя как всплывающее окно):

<datepicker 
    id="requestDate" 
    name="requestDate" 
    [(ngModel)]="incident.absence.requestDate" 
    required></datepicker>

... но я ожидаю, что мой сервис будет генерировать это по мере необходимости.

Метод до сих пор:

pickDate(e, popupId) {
    e.preventDefault();
    var popupCtrl = this.elementRef.nativeElement.querySelector(popupId);
    popupCtrl.style.display= 'block';
}

Будет много связи между вводом и средством выбора даты, передающим дату инициализации и изменения туда и обратно. Предположительно, простого включения недостаточно.

Как работает служба, которая создает элемент управления на моей странице?

(Или я заново изобретаю велосипед?)


person DaveC426913    schedule 15.08.2017    source источник
comment
Почему бы не предоставить ng-bootstrap.github.io/#/components/datepicker/examples идти?   -  person pkozlowski.opensource    schedule 15.08.2017
comment
Директива установки компонентов и директив имеет этот бонус, который может быть привязан к атрибуту, а затем ваш компонент средства выбора даты будет добавлен динамически, и вы можете привязать ко многим входам или создать родительский компонент, содержащий ввод формы и средство выбора даты, и просто вставьте в свои формы этот компонент, он должен работать как часть формы. Я построил последние работы как шарм.   -  person Vic    schedule 16.08.2017


Ответы (1)


Хотя вы можете написать свою собственную оболочку для средства выбора даты, это звучит как больше работы, чем вам нужно. Похоже, вы уже используете ngx-bootstrap, поэтому, если вам действительно нужен собственный выбор даты, я бы просто поместил средство выбора даты в раскрывающийся список или элемент управления всплывающей подсказкой, который они предоставляют.

На самом деле я бы использовал средство выбора даты из Primeng: https://www.primefaces.org/primeng/#/calendar

Не должно иметь большого значения, что вы используете несколько фреймворков пользовательского интерфейса (primeng и ngx-bootstrap), потому что большая часть наворотов должна быть устранена в вашей сборке продукта.

person mgm87    schedule 15.08.2017
comment
Нет, ОП говорит: «Поскольку ngx-bootstrap еще не поддерживает модальное средство выбора даты, я делаю свое собственное». - person Vega; 15.08.2017
comment
Верно. Я бы предпочел не создавать свои собственные, но, возможно, придется. - person DaveC426913; 16.08.2017