@gselltho 이 기능 요청을 열어주셔서 대단히 감사합니다!
이 주제에 대해 @dynatrace-oss/ux-core 팀과 긴밀한 협력이 필요하다고 생각합니다. 아마도 그들은 이미 이 주제에 대한 몇 가지 모형을 만들었거나 우리에게 통찰력을 제공할 수 있습니다.

이미 일부 모형이나 디자인이 있는 경우 이 문제는 필요한 모든 정보와 API 제안을 수집하는 좋은 출발점이 될 것입니다.

어떤 목적에 날짜 선택 도구가 필요한지 잘 모르겠지만 Arkadiusz Lipiarz는 현재 오랫동안 그의 팀과 함께 글로벌 시간 프레임 선택 도구로 사용할 날짜 선택 도구에 대해 작업하고 있습니다.
데모 환경에서 이미 구현되어 있습니다. 이 경우에는 그와 이야기하는 것이 가장 좋을 것 같습니다.

우리는 과거에 토론을 했고 @ursula-wieshofer가 제품에 대해 약간의 평가를 했으며 총 하나 또는 두 개의 날짜 선택기가 있습니다. 이것은 이것이 우선 순위 목록에서 높지 않다는 것을 의미했습니다.

@gselltho 나는 이것을 더 논의하고 라이브러리에 추가하는 것을 목표로 하는 것이 합리적이라고 생각합니다.
@angular/components에서 많은 것을 배우고 단순화된 버전을 만들 수 있다고 생각합니다.
더 자세한 API 제안을 작성할 수 있습니까?

안녕하세요!

따라서 우리 팀이 만든 기능은 @gselltho에 나열된 사용 사례 및 훨씬 더 많은 경우에 적합할 것 같습니다. 사이트 상단 외에도 Dashboard 팀에서 로컬 구성 요소로 사용합니다. Angular와 GWT로 준비했습니다. 관심이 있으시면 Slack에서 저에게 연락하십시오.

하지만... Ryan과 그의 팀은 당신이 공유한 것과 매우 유사한 솔루션을 준비하고 있었던 것 같습니다. 다음과 같이 표시됩니다.

코드 소유자는 @areknow 이며 자세한 내용을 제공할 수 있습니다.

안녕 얘들아, 나는 다음이 무엇인지 잘 모르겠다. Ryans 팀의 구성 요소는 기본적으로 각진 재료이며 내가 필요한 정확한 것입니다. 하지만 아주 기본적인 구성 요소이기 때문에 집에 바리스타 구성 요소가 있어야 하고 더 많은 팀에서 사용할 수 있을 것 같습니다.

@ffriedl89 : 물론, 더 자세한 API 설명을 만들 수 있습니다. 적어도 첫 번째 구현에 대한 제한된 기능 세트에 대해서는. 나는 앞으로 며칠 안에 여기에 게시 할 것입니다

안녕하세요 @gselltho , 저는 spine-x

Angular CDK에는 날짜 선택기가 포함되어 있지 않으므로 이 구성 요소를 처음부터 작성해야 합니다.

모노 리포지토리에서 날짜 선택기 공유 구성 요소를 사용하는 데 문제가 있습니까?

건배

안녕하세요 @areknow , 귀하의 구성 요소는 훌륭합니다! Angulars Reactive Form 기능(ControlValueAccessor)이 그리워, Barista 및 Angular Reactive 양식 내에서 원활하게 사용하려면 DtFormFieldControl이어야 합니다.

@gselltho 다시 문의해 주셔서 감사합니다. @areknow가 설명한 대로입니다. 그의 구성 요소는 angular/components 저장소의 재질 및 기타 유틸리티 라이브러리에 대한 종속성을 도입하는 스타일이 변경된 재질 구성 요소입니다. 그것은 또한 거대하고 나무가 흔들릴 수 없는 moment.js에 대한 강한 의존성과 함께 제공됩니다.
불행히도 CDK에는 아직 날짜 선택 도구가 포함되어 있지 않습니다.
지금까지 datepicker는 제품에 글로벌 타임프레임 선택기를 제외하고는 datepicker가 없기 때문에 많은 팀이 필요로 하는 구성 요소가 아니었습니다.

구성 요소가 필요한 경우 라이브러리에 구성 요소를 제공하는 데 함께 협력할 수 있다면 정말 좋을 것입니다. 이 프로세스는 이번 호에서 이에 대한 API 제안을 생성하는 것으로 시작됩니다. :)
이 작업이 완료되면 시작하는 데 도움이 되며 개발 프로세스를 안내할 수 있으며 그 과정에서 도움이 될 것입니다.

현재 바리스타 팀은 이 구성 요소를 라이브러리에 추가하기 위해 기여자의 도움이 필요합니다.
여기에 도움을 주시면 감사하겠습니다.

이봐, 설정 VCT도 이제 날짜/시간 선택기가 필요하므로 처리하겠습니다. 다음 의견에서는 모든 요구 사항을 수집한 다음 API를 제안하려고 합니다.

거기에 있어야 할 기능/요구 사항이 있고 아직 나열되지 않은 경우 알려주십시오.

cc @areknow

요구 사항:

일반적인 요구 사항

• 날짜 선택 : 사용자가 날짜를 선택할 수 있어야 합니다.
• 시간 선택 : 날짜를 선택하는 것 외에도 사용자는 추가 시간을 선택할 수 있어야 합니다.
• **미리 채우기
• 비활성화됨 : 소비자가 전체 날짜 선택기를 비활성화할 수 있습니다.
• 선택 가능 범위 : 사용자가 선택할 수 있는 날짜의 범위를 정의할 수 있어야 함 (최소/최대 입력을 통해 구현 가능)
• 시간대 : 사용자가 선택한 날짜의 시간대를 정의할 수 있어야 합니다.

기술 요구 사항

• NgModel compatible : datepicker는 angular 형태와 호환되어야 합니다.
• Form-field compatible : datepicker는 유효한 form-field-control이어야 합니다.
• 모듈성 : datepicker는 소비자가 전체 datepicker 구성 요소 대신 부분만 사용할 수 있도록 여러 하위 구성 요소/지시어/유틸리티로 구성되어야 합니다(예: 시간 프레임 선택기의 월별 보기).
• 기본 날짜 개체 : 날짜는 기본 Date 개체/클래스(전체 소비자 대면 API 포함)로 표시되어야 합니다. 일부 추상 사용자 정의 구현에 의한 것이 아닙니다. 추가 유틸리티 기능/서비스( DateAdapter )가 필요할 수 있습니다.
• Light & Dark 모드 : 컨트롤이 밝고 어두운 테마를 지원해야

선택적 요구 사항 (필요한 경우 확실하지 않음) :

• 선택 가능한 날짜 제한 :
• 범위 : 단일 날짜를 선택하는 것 외에도 날짜 범위를 선택할 수도 있어야 합니다(예: 1.1.2020 - 10.1.2020).
• 모바일 대체 : 모바일 장치에서 datepicker는 기본 대응으로 대체되어야 합니다(참고: 사용자 정의 버전에 대해 정의된 모든 기능이 기본 버전에서도 지원되는지 확인해야 함)

API 제안

_ WIP: 시간이 지남에 따라 조정됩니다.

Datepicker는 여러 구성 요소로 구성되어야 합니다.

날짜 선택기( dt-datepicker )

날짜 선택기 자체. 이 구성 요소는 다른 모든 구성 요소를 하나의 사용 가능한 날짜 선택기로 결합합니다(요구 사항 참조).

입력

| 이름 | 유형 | 기본값 | 설명 |
| ---------- | ----------- | -------------- | ------------ |
| 가치 | D \| null | null | 선택한 날짜입니다. |
| 시작시간 | D \| null | null | 달력을 처음 여는 날짜입니다. selected 가 설정된 경우 무시됩니다. 표시 전용으로 내부적으로 오늘 날짜가 기본값입니다. |
| 분 | D \| null | null | 최소 유효 날짜입니다. |
| 최대 | D \| null | null | 최대 유효 날짜입니다. |
| 장애인 | boolean | false | 날짜 선택기가 비활성화되었는지 여부입니다. |
| isTimeEnabled | boolean | false | 시간 모드가 활성화되었는지 여부입니다. |
| 범위 활성화 | boolean | false | 범위 모드가 활성화되었는지 여부입니다. |

Dt캘린더( dt-calendar )

달력 보기에서 날짜를 선택하기 위한 구성 요소( calendar-body 구성 요소). 달력 보기(월) 및 다른 월과 연도 사이를 탐색하는 데 필요한 컨트롤이 포함됩니다.

입력

| 이름 | 유형 | 기본값 | 설명 |
| ---------- | ----------- | -------------- | ------------ |
| 선택 | D \| null | null | 현재 선택한 날짜입니다. |
| 시작시 | D \| null | null | 달력을 시작할 기간(월 또는 연도)을 나타내는 날짜입니다. |
| 예정일 | D \| null | null | 선택 가능한 최소 날짜입니다. |
| 최대 날짜 | D \| null | null | 선택 가능한 최대 날짜입니다. |

출력

| 이름 | 유형 | 설명 |
| ---------------- | ----------- | ------------ |
| 선택변경 | D | 현재 선택된 날짜가 변경될 때 발생합니다. |

캘린더 본문( dt-calendar-body )

한 달 동안 달력 그리드만 호스팅합니다.

입력

| 이름 | 유형 | 기본값 | 설명 |
| ------------ | ----------- | -------------- | ------------ |
| 활성 날짜 | D | 오늘 | 이 월 보기에 표시할 날짜입니다(월 및 연도 이외의 모든 항목은 무시됨). |
| 선택 | D \| null | null | 현재 선택한 날짜입니다. |
| 예정일 | D \| null | null | 선택 가능한 최소 날짜입니다. |
| 최대 날짜 | D \| null | null | 선택 가능한 최대 날짜입니다. |
| 날짜 필터 | (date: D) => boolean | - | 날짜 선택 가능 여부를 필터링하는 데 사용되는 기능입니다. |

출력

| 이름 | 유형 | 설명 |
| ------------------ | ----------- | ------------ |
| 선택변경 | EventEmitter<D> | 새 값이 선택되면 발생합니다. |
| 활성 날짜 변경 | EventEmitter<D> | 날짜가 활성화되면 발생합니다. |

시간 선택기('dt-timepicker')

시간 입력(시 및 분 입력 포함)을 포함하는 시간 선택기를 호스팅합니다.

입력

| 이름 | 유형 | 기본값 | 설명 |
| ------------ | ----------- | -------------- | ------------ |
| 값 레이블 | 문자열 | '' | 범위 모드에서 날짜를 표시하는 데 사용되는 레이블입니다.
| 시간 | 번호 \| 널 | 널 | 시간 선택기에 표시할 시간입니다.
| 분 | 번호 \| 널 | 널 | 시간 선택기에 표시할 분입니다.
| 장애인 | 부울 | 거짓 | timepicker 및 해당 입력의 비활성화 상태입니다.
| isTimeRange활성화 | 부울 | 거짓 | 시간 범위 모드가 활성화되었는지 여부입니다.

출력

| 이름 | 유형 | 설명 |
| ------------------ | ----------- | ------------ |
| 시간변경 | 이벤트 이미터| 시간 입력이 흐림에 유효한 값을 포함하는 경우 timeChange 이벤트를 내보냅니다.

시간 입력('dt-timeinput')

시간 및 분 입력을 포함하는 timeinput을 호스팅합니다.

입력

| 이름 | 유형 | 기본값 | 설명 |
| ------------ | ----------- | -------------- | ------------ |
| 시간 | 번호 \| 널 | 널 | time입력에 표시할 시간입니다.
| 분 | 번호 \| 널 | 널 | 시간 입력에 표시할 분입니다.
| 장애인 | 부울 | 거짓 | 입력이 비활성화된 상태입니다.

출력

| 이름 | 유형 | 설명 |
| ------------------ | ----------- | ------------ |
| 시간변경 | 이벤트 이미터| 시간 입력이 흐림에 유효한 값을 포함하는 경우 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의 일부 사용 사례에는 특정 레거시 API와 상호 작용하기 위해 UTC가 필요합니다.

또한 @gselltho가 말했듯이 데이트만 할 수 있는 옵션이 있으면 좋을 것입니다.

이 프로젝트에 감사드립니다!

여기에 미리 정의된 상대 날짜가 포함됩니까? "지금", "2주 전" 등과 같이?

한 가지 더 요구사항(~ GTS):

• 우리는 밝고 어두운 버전이 필요합니다

가져서 좋다:

• 모바일 브라우저에서 -> 기본 날짜/시간 선택 컨트롤로 대체

@toddbaert 전역 시간 프레임 선택기와 별도로 이 일반 날짜 선택기의 사용

@pieniazek @areknow 가 목록에 추가됨

@thomaspink 일관성의 이유로 사용자가 날짜 선택기를 더 쉽게 처리할 수 있도록 달력도 포함하는 전역 시간 프레임 선택기 부분을 고수해야 한다고 생각합니다. 기본 기능과 핸들링은 스타일과 동일해야 합니다.
이것은 사용자가 이미 기능에 익숙해졌기 때문에 사용자가 이를 처리할 때 지원합니다.

@thomaspink 사용자에게는 문제가 되지 않겠지만 미리 정의된 상대적 날짜가 유용할 수 있는 일부 UI를 곧 공개할 예정입니다.

@toddbaert 지원되는 값 목록이 있습니까? 괜찮으시다면 좋은 목록에 추가하겠습니다.

datepicker의 경우 날짜와 정확한 이름(요일 이름 포함)을 한편으로 표시하고 계산할 수 있도록 기능과 정보를 제공하는 일종의 서비스(각형 재료 데이터 어댑터와 유사)도 필요합니다. /반면에 기본 날짜로 작업합니다. 이 "서비스"는 소비자도 사용할 수 있어야 동일한 방식으로 날짜를 처리할 수 있고 우리는 이 기능을 공유할 수 있습니다.

이를 위해 최소한 2가지 옵션이 있습니다(더 많은 아이디어가 있는 경우 아래에 게시해 주시면 감사하겠습니다).

1. 기본 날짜 API( Intl , Date )와 유틸리티 함수(예: addCalendarDays )를 결합하는 NativeDateAdapter를 만듭니다. 이 어댑터는 Angular Materials NativeDateAdapter 와 매우 유사합니다. 그러나 지원되는 모든 브라우저에 이미 Intl' built in. We would also not need the possibility to have DateAdapter for different libraries as we only work with the native Date` API가 있으므로 사용 사례의 경우 Intl 를 사용할 수 없는 경우 폴백이 필요하지 않습니다.
2. date-fns 와 같은 외부 라이브러리를 사용하고 이를 고객에게 제공하는 서비스(DateAdapter)로 래핑합니다.

지금은 추가 라이브러리 없이 기본 API를 많이 사용하기 때문에 옵션 1을 더 선호하지만 아이디어, 결과 및 의견도 게시해 주세요. :)

@thomaspink 그런 어댑터 서비스를 만들어야 한다는 데 동의합니다. 이전에 Intl 및 Date 네이티브를 사용하고 싶다고 말했지만 Intl.DateFormat 에 대한 지원 을 다시 확인했지만 그렇지 않습니다. 그것에 대해 매우 행복합니다. 특히 부분적으로 누락된 Range 형식은 약간 아쉽습니다.

date-fns 이 treeshakable 이고 일반적으로 큰 라이브러리로 보이지 않는 것을 보면 이제 date-fns 를 사용하기로 선택합니다.
또한 날짜 및 시간 수학은 클라이언트 시간대 등을 처리할 때 많은 기본 지원이 있더라도 정말 어려울 수 있습니다.

날짜 선택기에 대한 PR 초안을 이미 작성했다는 것을 알 수 있습니다. 구성 요소와 관련하여 제안할 수 있는 API가 이미 있습니까?

Intl.DateFormat : 내가 지금 우연히 발견한 사용 사례의 경우 대체를 쉽게 달성할 수 있지만 사용자 지정 날짜/시간 계산이 어려울 수 있다는 데 동의합니다.

이 PR은 wip이며 나는 아직 그러한 서비스가 필요한 작업을 다루지 않았습니다. 이 서비스에 어떤 기능이 필요한지 아직 확실하지 않지만 기본 기능부터 시작하여 계속 확장하겠습니다.

시간대

최근에 이 요구 사항을 삭제했습니다. UX 관점에서 사용자에게 설명하기 어려운 많은 작지만 복잡한 세부 사항을 고려해야 합니다.

날짜 조작 라이브러리

date-fns는 addMonth , getDaysInMonth , isToday , startOfTheWeek 등과 같은 시간 이동 작업을 위한 환상적인 API입니다. . 아마도 어댑터 추상화만큼 많은 비용이 들 것입니다.

반면에, 도서관 소비자는 순간이나 luxon이 있을 때 date-fns 를 포함해야 하는 경우 엇갈린 감정을 가질 것입니다. -> Here 어댑터가 유용할 것입니다. 하지만 운이 좋게도 date-fns 를 사용하므로 문제가 되지 않습니다.

시간 영역에 대한 참고 : date-fns 당신이 (심지어 전체 시간대 지원을 구현하기 위해 좋아하는 것이다 경우에 적합하지 않을 것입니다 date-fns-tz 있는 해결할 수있는 문제는 문제를 분석 / 포맷을,하지만 날짜 조작 시나리오 ). 최근에 우리는 이러한 목적을 위해 luxon 를 사용하는 것을 고려했습니다. 최소한 임시 사양 이 완료되지 않고 브라우저에서 채택될 때까지입니다.

서식

• Angular Material datepicker가 단순히 DetePipe를 사용하지 않는 이유를 알고 있습니까?
• Intl.DateFormat 에서 누락된 범위 형식 : 아마도 우리 자신의 폴백을 구현하거나 폴리필을 사용할 수 있을까요? 제품에서 우리는 이미 무언가를 가지고 있습니다.
• 서식 지정에 DetePipe를 사용하지 않을 경우 텍스트 번역 방식을 제어하기 위해 LOCALE_ID 토큰을 지원하는 것이 좋습니다.

@piotrl 감사

내가 이해하는 한 DatePipe는 최종적으로 선택한 날짜를 표시하는 데만 유용하지만 다음과 같은 것을 계산/표시할 때는 유용하지 않습니다. 특정 월의 모든 날.

내가 모든 의견을 읽을 때, 나는 우리가 어댑터 개념이 가야 할 길이라는 데 동의할 수 있다고 생각합니다. 그런 다음 합의할 솔루션에 따라 기본, date-fns 또는 luxon 용 어댑터를 만들 수 있습니다. @piotrl이 언급했듯이 이것은 소비자가 자체 날짜 라이브러리를 가지고 있는 경우 새 어댑터를 쉽게 구현할 수 있다는 문제도 해결합니다.

@ffriedl89 @tomheller 당신의 생각은?
@piotrl : 우리가 날짜 어댑터를 구현한다면 클러스터도 그것을 중앙 날짜 진입점으로 사용할까요? 또한 이 주제에 대해 많은 전문 지식을 갖고 계시기 때문에 저를 지원해 주신다면 얼마나 좋을까요?

또 다른 긍정적인 부작용은 우리가 재료 날짜 어댑터의 API에 밀접하게 붙어 있고 그들이 그것을 cdk로 옮기면 쉽게 적응하고 변경할 수 있다는 것입니다.

@areknow

시간대를 제어할 수 있으면 좋을 것입니다. spine X의 일부 사용 사례에는 특정 레거시 API와 상호 작용하기 위해 UTC가 필요합니다.

datepicker가 날짜를 어댑터가 제공하는 일반 객체로 취급하기 때문에 날짜 어댑터를 사용하면 이 요구 사항도 해결됩니다. 이것은 기본 날짜, 순간 래퍼 또는 항상 특정 시간대가 있는 날짜일 수 있습니다.

날짜 어댑터를 구현하면 클러스터도 이를 중앙 날짜 진입점으로 사용합니까?

나는 그것을 고려하기 위해 열려 있습니다. 내 초기 생각: Raw Date 개체는 이미 600개 이상의 장소에서 사용됩니다(명시적으로, 암시적 사용을 계산할 수 없음).

대부분의 사용은 어쨌든 캘린더에 연결되거나 캘린더에 가깝지 않습니다. 사용법을 찾을 때 일반적으로 날짜는 백엔드에서 가져오고 형식 지정을 위해 약간 처리됩니다. 캘린더와의 일관성을 위해서만 이러한 사용 사례에 어댑터를 사용하는 것은 압도적일 수 있습니다. 그래서 나는 달력을 사용할 때마다 기본 날짜에서 어댑터로의 작은 변환을 고려할 것입니다(어댑터가 @Input 로 필요한 경우).

따라서 어댑터를 사용하기로 결정한 경우 여전히 2가지 방법이 있습니다.

1. 내부 달력 날짜 작업에 대해서만 모듈 구성에 어댑터를 제공합니다. 모델(입력/출력)은 여전히 ​​기본 날짜를 기반으로 합니다.
2. 내부 사용 + 입출력 API 모두에 어댑터를 제공합니다.

두 번째 옵션은 생각해야 할 사용 사례 측면에서 더 침습적 이며 어댑터의 잘 생각한 API가 필요합니다.
첫 번째 옵션은 시작하기 더 쉬울 수 있으며 필요한 경우 두 번째 옵션으로 발전할 수 있습니다.

APM-266081로 이동