@gselltho Большое спасибо за открытие этого запроса функции!
Я думаю, что по этой теме нам нужно тесное сотрудничество с нашей командой @ dynatrace-oss / ux-core. Возможно, они уже создали несколько макетов для этой темы или могут поделиться с нами некоторыми идеями.

Если у них уже есть несколько макетов или дизайнов, этот выпуск будет хорошей отправной точкой для сбора всей необходимой информации и предложений API.

Я не уверен, для какой цели нужен выбор даты, но Аркадиуш Липиарц уже давно работает вместе со своей командой над выбором даты, который мы хотим использовать в качестве глобального селектора таймфрейма.
это уже реализовано в нашей демонстрационной среде. Думаю, в этом случае лучше с ним поговорить.

У нас было обсуждение в прошлом, и @ ursula-wieshofer провел некоторую оценку продукта, и всего у нас есть один или два датпикера. Это означало, что это не входило в список приоритетов.

@gselltho Я думаю, имеет смысл обсудить это дальше и нацелить на добавление в библиотеку.
Я думаю, что мы можем извлечь много уроков из @ angular / components и сделать упрощенную версию.
Сможете ли вы создать для него более подробное предложение API?

Привет!

Таким образом, похоже, что функция, созданная моей командой, подойдет для вариантов использования, перечисленных в @gselltho, и многого другого. Помимо верхней части нашего сайта, он также используется командой Dashboard как локальный компонент. Мы готовили его как в Angular, так и в GWT. Свяжитесь со мной в Slack, если вам интересно.

Но ... похоже, что Райан и его команда готовили решение, очень похожее на то, что вы поделились. Вот как это выглядит:

Владелец кода - @areknow, и он может предоставить вам более подробную информацию.

Привет, ребята, я не знаю, что дальше. Компонент команды Ryans в основном состоит из угловых материалов и в точности то, что мне нужно. Но я бы сказал, поскольку это очень базовый компонент, его домом должны быть компоненты бариста, и, как кажется, больше команд могли бы его использовать.

@ ffriedl89 : конечно, я могу составить более подробное описание API. По крайней мере, для ограниченного набора функций для первой реализации. Я отправлю его сюда в ближайшие пару дней

Привет, @gselltho , я разработчик общего компонента выбора даты, который находится в

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

Есть ли проблема с использованием общего компонента выбора даты из монорепозитория?

Ваше здоровье

Привет, @areknow , у тебя отличный компонент! Мне просто не хватает функции Angulars Reactive Form (ControlValueAccessor), и, похоже, это должен быть DtFormFieldControl, чтобы использовать его без проблем в формах Barista и Angular Reactive.

@gselltho Спасибо, что снова @areknow . Его компонент представляет собой рестайлинговый компонент материала, который вводит зависимость от материалов и других утилитных библиотек из репозитория angular / components. Он также имеет жесткую зависимость от moment.js, которое огромно и не подвержено колебаниям.
К сожалению, в CDK еще нет датпикера, который не оформлен в материальном стиле.
До сих пор датапикер не был компонентом, который нужен многим командам, поскольку у нас нет никаких датпикеров, кроме глобального селектора таймфрейма в продукте.

Если вам нужен компонент, было бы здорово, если бы мы могли вместе работать над добавлением компонента в библиотеку. Этот процесс начинается с создания предложения API для него здесь, в этом выпуске :)
Как только это будет сделано, мы поможем вам начать работу и проведем вас через процесс разработки, а также поможем вам на этом пути.

Прямо сейчас команде бариста требуется помощь участников, чтобы добавить этот компонент в библиотеку.
Любая помощь здесь приветствуется

Эй, позаботимся об этом, так как настройки VCT теперь также нуждаются в выборе даты / времени. В следующих комментариях я постараюсь собрать все требования, а затем предложить API.

Если у вас также есть функции / требования, которые еще не перечислены, пожалуйста, дайте мне знать.

cc @areknow

Требования:

основные требования

• Выбор даты : пользователь должен иметь возможность выбрать дату
• Выбор времени : помимо выбора даты пользователь также должен иметь возможность выбрать дополнительное время.
• **Заполнить заранее
• Отключено : пользователь может полностью отключить указатель даты.
• Выбираемый диапазон : должна быть возможность определить диапазон дат, который может выбрать пользователь (может быть реализован с помощью входов min / max)
• Часовой пояс : должна быть возможность определить часовой пояс для дат, которые выбирает пользователь.

Технические требования

• Совместимость с NgModel :
• Совместимость с полем формы : указатель даты должен быть допустимым элементом управления полем формы.
• Модульность : datepicker должен состоять из нескольких подкомпонентов / директив / утилит, чтобы потребители также могли использовать только части вместо полного компонента datepicker (например, просмотр месяца для селектора временных рамок)
• Собственный объект Date : даты должны быть представлены собственным объектом / классом Date (включая весь API, ориентированный на потребителя). Не какой-то абстрактной кастомной реализацией. Могут потребоваться дополнительные служебные функции / службы ( DateAdapter ).
• Светлый и темный режим : элемент управления должен поддерживать светлые и темные темы.

Необязательные требования (не уверен, нужны ли) :

• Ограничение выбираемых дат : должна быть возможность дополнительно ограничивать (расширять минимальные / максимальные требования) выбираемые даты (может быть реализовано функцией, которую может реализовать потребитель)
• Диапазоны : помимо выбора одной даты также должна быть возможность выбрать диапазон дат (например, 1.1.2020 - 10.1.2020)
• Мобильный резерв : на мобильных устройствах datepicker должен вернуться к своему собственному аналогу (Примечание: нам нужно проверить, все ли функции, определенные для пользовательской версии, поддерживаются также для собственной версии)

Предложение API

_ WIP: будет адаптироваться со временем.

Datepicker должен состоять из нескольких компонентов:

DtDatepicker ( dt-datepicker )

Сам датапикер. Этот компонент объединяет все остальные компоненты в одно средство выбора дат (см. Требования).

Входы

| Имя | Тип | Значение по умолчанию | Описание |
| ---------- | ----------- | ------------- | ------------ |
| значение | D \| null | null | Выбранная дата. |
| startAt | D \| null | null | Дата, на которую должен изначально открываться календарь. Игнорируется, если установлено selected . По умолчанию для внутреннего использования используется сегодняшняя дата только для отображения. |
| мин | D \| null | null | Минимальная допустимая дата. |
| макс | D \| null | null | Максимально допустимая дата. |
| отключен | boolean | false | Отключен ли выбор даты. |
| isTimeEnabled | boolean | false | Включен ли временной режим. |
| isRangeEnabled | boolean | false | Включен ли режим диапазона. |

DtCalendar ( dt-calendar )

Компонент для выбора даты в представлении календаря (компонент calendar-body ). Включает представление календаря (месяц) и необходимые элементы управления для перехода между месяцами и годами.

Входы

| Имя | Тип | Значение по умолчанию | Описание |
| ---------- | ----------- | ------------- | ------------ |
| выбрано | D \| null | null | Текущая выбранная дата. |
| startAt | D \| null | null | Дата, представляющая период (месяц или год), с которого начинается календарь. |
| minDate | D \| null | null | Минимальная выбираемая дата. |
| maxDate | D \| null | null | Максимально возможная дата. |

Выходы

| Имя | Тип | Описание |
| ---------------- | ----------- | ------------ |
| selectedChange | D | Выдается при изменении текущей выбранной даты. |

Тело календаря ( dt-calendar-body )

Размещает только календарную сетку на месяц.

Входы

| Имя | Тип | Значение по умолчанию | Описание |
| ------------ | ----------- | ------------- | ------------ |
| activeDate | D | сегодня | Дата, отображаемая в этом обзоре месяца (все, кроме месяца и года, игнорируется). |
| выбрано | D \| null | null | Текущая выбранная дата. |
| minDate | D \| null | null | Минимальная выбираемая дата. |
| maxDate | D \| null | null | Максимально возможная дата. |
| dateFilter | (date: D) => boolean | - | Функция, используемая для фильтрации возможности выбора даты. |

Выходы

| Имя | Тип | Описание |
| ------------------ | ----------- | ------------ |
| selectedChange | EventEmitter<D> | Выдается при выборе нового значения. |
| activeDateChange | EventEmitter<D> | Выдается при активации любой даты. |

Timepicker ('dt-timepicker')

Размещает средство выбора времени, которое содержит ввод времени (с часами и минутами).

Входы

| Имя | Тип | Значение по умолчанию | Описание |
| ------------ | ----------- | ------------- | ------------ |
| valueLabel | строка | '' | Ярлык, используемый для отображения даты в режиме диапазона.
| час | номер \ | null | null | Час, отображаемый в таймпикере.
| минута | номер \ | null | null | Минута, отображаемая в таймпикере.
| отключен | логическое | ложь | Отключенное состояние таймера и его входов.
| isTimeRangeEnabled | логическое | ложь | Включен ли режим временного диапазона.

Выходы

| Имя | Тип | Описание |
| ------------------ | ----------- | ------------ |
| timeChange | EventEmitter| Выдает событие timeChange, если входные данные времени содержат допустимые значения при размытии.

Timeinput ('dt-timeinput')

Содержит ввод времени, который содержит ввод часов и минут.

Входы

| Имя | Тип | Значение по умолчанию | Описание |
| ------------ | ----------- | ------------- | ------------ |
| час | номер \ | null | null | Час, отображаемый во вводе времени.
| минута | номер \ | null | null | Минута, отображаемая во вводе времени.
| отключен | логическое | ложь | Отключенное состояние входов.

Выходы

| Имя | Тип | Описание |
| ------------------ | ----------- | ------------ |
| timeChange | EventEmitter| Выдает событие timeChange, если входные данные времени содержат допустимые значения при размытии.

Пожалуйста, опубликуйте ниже требования / особенности, которые должен предоставить datepicker. Я добавлю их в список предыдущего комментария.

@thomaspink Спасибо, что позаботились об этом 👍
В вашем описании требований уже есть все, что мне нужно. У меня просто вопрос по поводу:
Selecting a time: In addition to selecting a date the user must also be able to select an additional time.
Полагаю, время указано как необязательное? Смогу ли я выбрать то, что можно выбрать: только дату, только время или то и другое вместе?

@gselltho Спасибо за отзыв 👍

Идея заключалась в том, чтобы установить дату и время по умолчанию, но вы можете отключить временную часть, чтобы она была только датой, или наоборот. Не уверен, что лучший способ (больше потребителей нуждаются только в селекторах даты или даты / времени).

Было бы неплохо иметь контроль над часовым поясом. Некоторые из наших вариантов использования в spine X требуют UTC для взаимодействия с некоторыми устаревшими API.

Также, как сказал @gselltho , было бы неплохо иметь возможность просто встречаться в одиночестве.

Спасибо за этот проект!

Будет ли это включать предопределенные относительные даты? Как в «сейчас», «две недели назад» и т. Д.?

Еще одно требование (~ GTS):

• Нам нужна светлая и темная версия

Приятно иметь:

• в мобильных браузерах -> возврат к собственным элементам управления выбором даты / времени

@toddbaert. Помимо глобального селектора таймфреймов, можно ли использовать этот вариант для общего выбора

@pieniazek @areknow добавлен в список

@thomaspink Я думаю, что из соображений согласованности и для того, чтобы упростить для пользователя использование средства выбора даты, мы должны придерживаться той части глобального селектора таймфрейма, которая также включает в себя календарь. Базовая функциональность и обработка должны быть такими же, как и стиль.
Это поддержит пользователя при работе с ним, поскольку он / она уже привык к этой функциональности.

@thomaspink это не

@toddbaert у вас есть список поддерживаемых значений? Я добавлю его в список желаний, если он вам подходит

Для datepicker нам также понадобится какой-то сервис (аналогичный адаптеру данных angular материалов), который предоставляет нам функциональность и информацию, чтобы мы могли отображать даты и правильные наименования (включая названия дней недели) с одной стороны и вычислять / работать с родными датами с другой стороны. Затем этот «сервис» должен быть доступен и нашим потребителям, чтобы они могли работать с датами таким же образом, и мы могли бы поделиться этой функциональностью.

Для этого у нас есть как минимум 2 варианта (если у вас есть другие идеи, я был бы признателен, если бы вы разместили их ниже):

1. Создайте NativeDateAdapter, который объединяет собственные API дат ( Intl , Date ) и служебные функции (например, addCalendarDays ). Этот адаптер был бы очень похож на Angular Materials NativeDateAdapter . Но для наших сценариев использования нам не нужны резервные варианты, когда Intl недоступен, поскольку все наши поддерживаемые браузеры уже имеют API Intl' built in. We would also not need the possibility to have DateAdapter for different libraries as we only work with the native Date`.
2. Используйте внешнюю библиотеку, такую ​​как date-fns и оберните ее в службу (DateAdapter), которую мы затем предоставляем нашим клиентам.

Прямо сейчас я бы больше склонялся к варианту 1, поскольку он в значительной степени использует собственные API-интерфейсы без необходимости в дополнительной библиотеке, но, пожалуйста, также публикуйте свои идеи, выводы и комментарии :)

@thomaspink Я согласен, что мы должны создать такую ​​службу адаптера. Я знаю, что ранее заявлял, что хотел бы использовать для этого варианты Intl и Date , но я дважды проверил поддержку Intl.DateFormat и я не супер рад этому. Особенно огорчают частично отсутствующие форматы Range.

Увидев, что date-fns является treehakable и в целом не выглядит большой библиотекой , я бы предпочел использовать date-fns .
Кроме того, математика даты и времени может быть очень сложной, даже с большой нативной поддержкой при работе с часовыми поясами клиента и т. Д.

Как я вижу, вы уже создали черновик PR для средства выбора даты. Есть ли уже API, который вы можете предложить в отношении компонента?

Относительно Intl.DateFormat : для случаев использования, на которые я наткнулся прямо сейчас, можно легко сделать откат, но я согласен с тем, что пользовательские вычисления даты / времени могут быть трудными.

Этот пиар пуст, и я еще не взялся за задачи, требующие такой услуги. Все еще не уверен, какие функции нам понадобятся для этой услуги, но я начну с базовой и по мере ее расширю.

Часовые пояса

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

Библиотека управления датами

date-fns - фантастический API для операций сдвига по времени, таких как addMonth , getDaysInMonth , isToday , startOfTheWeek и т. д. Возможность Tree-shake'а делает его легким в использовании. . Вероятно, это будет стоить столько же веса, сколько абстракция адаптера.

С другой стороны, у потребителя библиотеки были бы смешанные чувства, если бы им нужно было включить date-fns когда у них есть момент или люксон -> Адаптер был бы полезен. Нам повезло, что мы использовали date-fns , поэтому для нас это не проблема.

Примечание о часовых поясах: date-fns не подойдет, если вы хотите реализовать полную поддержку часовых поясов (даже с date-fns-tz который решает только проблемы форматирования / синтаксического анализа, но не сценариев манипулирования датами. ). Недавно мы решили использовать для этой цели luxon , по крайней мере, до тех пор, пока временная спецификация не будет завершена и принята браузерами.

Форматирование

• Знаете ли вы, почему DatePicker Angular Material не использует просто DetePipe?
• Отсутствует форматирование диапазона из Intl.DateFormat : Возможно, мы могли бы реализовать собственный запасной вариант или использовать polyfil? В продукте у нас уже что-то есть.
• Обратите внимание: если мы не будем использовать DetePipe для форматирования, было бы хорошо поддерживать токен LOCALE_ID для управления переводом текста.

Спасибо @piotrl

Насколько я понимаю, DatePipe будет полезен только для отображения окончательно выбранной даты, но не при вычислении / отображении таких вещей, как: Все дни определенного месяца.

Когда я прочитал все комментарии, я думаю, мы могли согласиться с тем, что концепция адаптера должна быть подходящим вариантом. Затем мы могли бы создать адаптер для нативного, date-fns или luxon зависимости от решения, с которым мы собираемся согласиться. Как упомянул @piotrl, это также решит проблему,

@ ffriedl89 @tomheller Ваши мысли?
@piotrl : Если мы собираемся реализовать адаптер даты, будет ли кластер также использовать его в качестве центральной точки входа в дату? Также было бы здорово, если бы вы могли поддержать меня, так как у вас большой опыт по этой теме?

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

@areknow

Было бы неплохо иметь контроль над часовым поясом. Некоторые из наших вариантов использования в spine X требуют UTC для взаимодействия с некоторыми устаревшими API.

Наличие адаптера даты также решило бы это требование, поскольку средство выбора даты рассматривает даты как любой общий объект, предоставляемый адаптером. Это может быть собственная дата, оболочка момента или дата, всегда имеющая определенный часовой пояс.

Если мы собираемся реализовать адаптер даты, будет ли кластер также использовать его в качестве центральной точки входа в дату?

Я открыт для рассмотрения. Мои первоначальные мысли: объект Raw Date уже используется более чем в 600 местах (явно не может подсчитывать неявное использование).

Большинство использований никак не связаны с календарем или близко к календарю. Когда я смотрю на использование, обычно даты поступают из бэкэнда и немного обрабатываются для целей форматирования. Использование адаптера для этих случаев использования только для согласованности с календарем может быть непосильным. Поэтому я бы подумал о небольшом преобразовании из собственной даты в адаптер всякий раз, когда мы используем календарь (если нам нужен адаптер как @Input ).

Итак, если мы решим использовать адаптер, есть еще два пути:

1. Предоставьте адаптер в конфигурации модуля ТОЛЬКО для внутренних календарных операций с датами, модель (ввод / вывод) по-прежнему будет основываться на собственных датах
2. Предоставьте адаптер для внутреннего использования + API ввода / вывода.

Второй вариант более инвазивен с точки зрения вариантов использования, требует хорошо продуманного API адаптера.
С 1-го варианта может быть проще начать и при необходимости он может развиться до 2-го.

Перенесено на APM-266081