Material-ui: [DatePicker] 포트 구성 요소

@oliviertassinari 새 버전에서 이 구성 요소를 구현할 계획이 있는지 알고 싶습니다. 도와드리고 싶습니다. 알려주세요. 감사합니다.

구성 요소 마이그레이션을 시작하는 가장 좋은 방법은 열린 문제를 살펴보는 것입니다. 이를 통해 현재 구현의 한계를 더 잘 이해할 수 있습니다. v1 릴리스 마일스톤에서 DatePicker 및 TimePicker를 제거하여 더 빨리 만들 수 있습니다. 그래도 여러분의 도움을 환영합니다.

일부는 구성 요소 중 하나를 생각합니다.

• 우리가 가난한 UX를 제공하는 것처럼 매우 도전적입니다. 사람들은 플랫폼의 기본 선택기에 의존하는 것이 더 나을 것입니다.
• 날짜 조작은 복잡할 수 있습니다. 다른 라이브러리를 활용할 수 있는지 봅시다.
• Desktop UX는 좋지 않습니다. 다시 생각해볼 필요가 있습니다.
• 구성력이 부족합니다. 낮은 수준의 API를 노출해야 합니다.

datepicker(및 timepicker)의 중요성에 대한 제 의견을 남겨두고, 좋은 UI 프레임워크를 다루고 있는지 여부를 정의하는 3가지 주요 구성 요소가 있다고 생각합니다. Autocomplete , Datatables 및 Datepickers .

나는 많은 다른 프레임워크를 시도했고, 그 세 가지 구성 요소가 가장 골치 아픈 부분입니다. 주로 몇 가지 문제를 들자면 열악한 구현 및 국제화 옵션, 비동기 용량 및 페이지 매김으로 인해 발생합니다.

요약하자면, 저는 이 세 가지 구성 요소가 완전한 상태로 도착하는 것을 선호하지만 적어도 제 생각에는 ui 프레임워크를 선택하지 않을 많은 사람들이 있을 것이라는 점을 염두에 두십시오. 그 구성 요소 중 일부가 부족합니다.

어쨌든, MUI v1은 매우 유망해 보입니다. 완전히 출시되면 사용해 보고 싶습니다!

나는 오히려 이 세 가지 구성 요소가 완전한 상태로 도착하는 것을 선호합니다.

@GabrielDuarteM 저도 동의합니다. DatePicker 및 TimePicker 구현이 경쟁하려면 기본 구현만큼 우수해야 합니다. 그렇지 않으면 의미가 없습니다. 지금 당장은 프로덕션 준비 앱에서 v0.x 선택기를 사용하지 않을 것입니다. 차라리 플랫폼의 선택기를 사용하고 싶습니다.
우리는 이러한 구성 요소 없이 v1.0.0을 출시할 가능성이 높으며, 이러한 구성 요소가 중요하다고 생각하지 않습니다. 기본 선택 도구는 수년에 걸쳐 많이 개선되었습니다.

자동 완성과 관련하여 여기에서 예를 찾을 수 있습니다 .

오늘날 프로덕션 앱에서 MUI timepicker 및 datepicker를 광범위하게 사용하므로 불행히도 Material Design 기반 솔루션 없이는 v1.0.0으로 마이그레이션할 수 없습니다. 기본 시간/날짜 선택기를 사용하는 것은 좋은 솔루션이 아니며 훌륭하고 완전한 Material Design React 구성 요소 UI 패키지를 갖는 데 "중요"하지 않다는 데 동의하지 않습니다.

@skirunman에 동의합니다. DatePicker 및 TimePicker 는 프로덕션 앱에서 매우 중요합니다. 또한 대부분의 브라우저에서 기본 구현은 매우 제한적입니다. 예를 들어 Android용 크롬에서는 할 수 없습니다. 월과 연도를 선택하고 사용자가 예를 들어 생일을 선택할 때 그 부분이 중요하다고 생각합니다.

내 의견에 대한 자세한 내용을 추가하겠습니다.

우리가 가난한 UX를 제공하는 것처럼 매우 도전적입니다. 사람들은 플랫폼의 기본 선택기에 의존하는 것이 더 나을 것입니다.

강력하게 반대합니다. 기본 선택기는 일반적으로 기능이 제한되어 있으며 확실히 머티리얼 디자인에 적합하지 않습니다.

날짜 조작은 복잡할 수 있습니다. 다른 라이브러리를 활용할 수 있는지 봅시다.

머티리얼 디자인 기반 시간 및 날짜 선택기를 구현하는 것은 현재 많은 사용자를 추위에 떨게 할 것이라고 생각합니다. 현재 MUI의 핵심 구성 요소이며 실제로 그래야 하는 것에 대해 다른 라이브러리를 사용하면 MUI의 전반적인 매력이 약해집니다.

Desktop UX는 좋지 않습니다. 다시 생각해볼 필요가 있습니다.

머티리얼 디자인 지침을 따르는 한 왜 이것을 말하는지 잘 모르겠습니다.

구성력이 부족합니다. 낮은 수준의 API를 노출해야 합니다.

이것은 있으면 좋지만 v1.0.0 IMO의 요구 사항은 아닙니다.

@skirunman 우리는 그 구성 요소가 필요하다는 데 동의합니다. 여기서 문제가 되는 것은 타이밍 우선순위에 관한 것입니다. v1을 먼저 출시하고 DatePicker/TimePicker를 나중에 구현하는 것이 더 많은 가치가 있다고 생각합니다. (사람들은 항상 마스터 버전을 사용할 수 있습니다).
또한 핵심 기여자의 필요에서 비롯됩니다. 예를 들어, 내가 필요로 하는 것이 아니기 때문에 작업을 하지 않을 수도 있습니다.

기여자가 구성 요소의 ✨ 구현을 가지고 있다면 우리는 확실히 그것을 검토하고 우리 모두가 만족하면 병합할 것이라는 것은 말할 필요도 없습니다.

나는 최근에서야 react-infinite-calendar 를 보기 시작했지만 일부 사람들에게는 v0 캘린더를 대체할 가치가 있을 것입니다. 명시적인 월별 스테핑 대신 월 사이를 스크롤할 수 있어 다르게 작동하지만 범위 선택(https://github.com/callemall/material-ui/issues/7574를 통해 요청)과 같은 추가 요청 기능이 있습니다. 꽤 침착하다 (처음에는 얼굴을 붉히다)

이 문제에 대한 앞으로의 계획이 있습니까?

@DoWhileGeek 내가 가진 가장 최근 계획은 다음을 사용하여 문서에 새 페이지를 추가하는 것이었습니다.

<input type="datetime-local" name="bdaytime">
<input type="date" name="bday" max="1979-12-31">
<input type="time" name="usr_time">

와 같은 예.

@oliviertassinari 저는 특히 #7781에 대한 해결 방법을 찾고 있습니다. 우리 ux 사용자에게는 약간의 문제입니다.

@DoWhileGeek 0.x 브랜치에 대해 #7781에 대한 솔루션을 자유롭게 홍보할 수 있습니다. 핵심 팀은 1.0 릴리스에 집중하고 있습니다. 그렇기 때문에 모든 문제가 종료되었습니다.

+1 우리는 기본 v1 선택기에 정말 관심이 있습니다. 지금 작업 중인지 알려주세요.
추신: 우리는 Material ui v1에 대해 흥분하고 있습니다.

더 이상의 +1 유형 댓글을 방지하기 위해 이 문제를 잠그고 있습니다.

이 알림은 Pickers 문서에 이미 표시되어 있습니다.

알아 채다
현재 기본 입력 컨트롤로 대체하고 있습니다. 구현에 관심이 있거나 멋진 UX로 풍부한 Material Design Picker를 구현한 경우 #4787 및 #4796으로 알려주십시오! 문서에 프로젝트에 대한 링크나 데모를 추가할 수 있습니다.

여기 에서 같이 계획은 Pickers 구성 요소 데모의 기본 컨트롤로 돌아가 Datepicker , Timepicker 의 _dedicated_ 작업을 기꺼이 수행할 외부 프로젝트를 홍보하는 것입니다.

선택기를 외부 프로젝트로 사용하는 데 관심이 있는 경우 많은 사람들이 성공을 원하므로 이를 공유해 주시면 다음을 수행하겠습니다.

• 프로젝트에 눈에 띄게 링크
• material-ui 문서 내에서 데모 제공
• 당신의 방향으로 협력자를 가리킵니다.

material-ui 의 인기와 이러한 선택기에 대한 수요를 감안할 때 선택기 프로젝트 소유자는 인기 있는 프로젝트와 함께 제공되는 모든 인터넷 명성과 영광을 받을 것입니다.

관심있는? 제발 핑 @rosskevin 및 @oliviertassinari에 gitter .

@rosskevin @oliviertassinari 현재 TimePicker 작업 중이며 이번 주말에 첫 번째 작업 버전(아직 일부 애니메이션이나 가로 모드가 누락되었을 수 있음)을 사용할 수 있기를 바랍니다. :무지개:

대부분의 경우 선택기가 완료되면 DatePicker 부터 시작하겠습니다.

@leMaik 방금 이 프로젝트를 확인 했습니다. @dmtrKovalenko

프로젝트 참여에 대해 논의할 수 있을까요? 차이점을 찾기 위해 파고 들지는 않았지만 고려할 가치가 있습니다.

또한 최근에 github 조직 mui-org . mui-org 에 참여하고 프로젝트를 호스팅하기로 결정했다면 저희에게 알려주십시오.

@rosskevin
프로젝트에 참여하는 것이 훨씬 더 복잡할 것 같습니다. 순간을 피어 종속성으로 사용하고 날짜를 표시하는 많은 컨트롤(예: datetime 선택기)을 구현했기 때문에 @leMaik의 프로젝트 대신 시간 선택기를 표시하는 훨씬 가벼운 솔루션입니다.
조직으로 이동하는 것은 어떻습니까? 저는 반대하지 않지만 실제로 그것이 의미하는 바를 완전히 이해할 수 없습니까? 조직에서 저장소를 옮기기만 하면 됩니까?

조직에 관하여: 예 - 조직 아래로 옮기는 것일 뿐이며 아마도 material-ui 자체의 인기로 인해 더 많이 노출될 수 있습니다(더 많은 유지 관리자). 그러나 그것은 단지 생각일 뿐이며, 그것이 거기에 있을 필요가 없습니다. 단지 우리가 지금 조직 내에서 보완적인 프로젝트에 대한 문을 열고 있다는 것입니다.

@rosskevin @dmtrKovalenko 저는 프로젝트가 상당히 다른 접근 방식을 취하기 때문에 프로젝트를 _병합_ 하고 싶지 않습니다. material-ui-pickers를 날짜 선택기로만 변환하고(그리고 애니메이션과 모든 것을 추가하여 훌륭한 기반을 구축하고) 시간 선택기를 시간 선택기로 유지하고 둘 다 조직 아래로 이동할 수 있습니까? :생각:

@leMaik
날짜로 다시 실행하는 것과 관련하여 - 일부 프로젝트의 경우 날짜 작업에 대한 일반적인 접근 방식을 사용하는 것이 훨씬 도움이 되기 때문에 material-ui-pickers는 이에 대한 모든 구성 요소를 제공합니다. 머티리얼 디자인 사양에 나열되지 않은 날짜-시간 선택기도 있습니다. 😉

https://material.angular.io/components/datepicker/overview 와 같이 구현하는 것이 좋습니다.

훌륭하고 유연한 datepicker 라이브러리를 찾았습니다.
https://github.com/gpbl/react-day-picker

material-ui 텍스트 입력을 사용하여 ranged datepicker를 생성하도록 관리:

@saraivinha85 스윗! 🍬

다른 사람들이 배울 수 있도록 구현을 공유하시겠습니까? (요점만 있어도 좋습니다!)

@mbrooks 문제 없습니다:
https://codesandbox.io/s/9l7kry52or

시간 선택기를 위한 이 프로젝트는 좋습니다. https://github.com/TeamWertarbyte/material-ui-time-picker

안녕하세요. 구성 요소가 매우 중요하고 이미 다음 버전을 사용하고 있기 때문에 이에 대한 추정치가 있는지 또는 도움이 될 방법이 있는지 물어봐야 합니다.

다른 DatePickers를 확인했지만 실제로는 충분히 잘 작동하지 않으므로 번들로 제공되는 것이 최상의 솔루션이어야 합니다(특히 우리가 사용하는 redux-form 또는 redux-form-material-ui@next 와 함께 작업하는 경우).

현재로서는 https://github.com/dmtrKovalenko/material-ui-pickers 를 사용하는 것이 가장 좋은 솔루션인 것 같습니다

감사합니다. 시도해보겠습니다. 머티리얼 디자인의 모달 요구 사항으로 날짜 선택 도구가 있습니까?

Google Flights 베타 사이트에서 사용되는 자료에 영향을 받는 날짜 선택기 및 날짜 범위 선택기와 유사한 것을 구현하면 깔끔할 것입니다.

https://www.google.com/flights/beta

어떻게 monthPicker 또는 yearPicker만 사용할 수 있습니까? 가이드를 주시겠습니까?

@taoxueweilong 여기 에 문제를 작성

안녕하세요 개발자 여러분...
여기에 Material UI를 사용하여 datepicker를 구현했습니다.
https://github.com/chingyawhao/material-ui-next-datepicker

시작하는 방법을 알려주는 사람이 있으면 Material UI에 기여할 수 있을 것 같습니다.

엄청난!

2018년 5월 2일 수요일 오전 11시 13분, Ching Yaw Hao [email protected]
썼다:

안녕하세요 개발자 여러분...
여기에 Material UI를 사용하여 datepicker를 구현했습니다.
https://github.com/chingyawhao/material-ui-next-datepicker

누구나 할 수 있다면 Material UI에 기여할 수 있을 것입니다.
시작하는 방법 길드

—
이 스레드에 가입했기 때문에 이 메시지를 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/mui-org/material-ui/issues/4787#issuecomment-385914554 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AacMkVQOH0GRO7JsIyggzHidwmypEPdHks5tuXjQgaJpZM4JSThr
.

@chingyawhao 기여 가이드는 거의 완성되었지만 이제 새 구성 요소가 packages/material-ui-lab 갑니다. 이것이 적합한 후보자인지 여부에 대해서는 @oliviertassinari 에게

@mbrookes 주말에 material-ui-lab에 pull request를 시도할 것입니다.

@chingyawhao 프로젝트를 공유해 주셔서 감사합니다. 현재로서는 문서 의 대안 과 함께 문서화하는 것이 가장 좋은 단계라고 생각합니다.
도서관의 다른 지역에서는 이미 해야 할 일이 많습니다. 날짜 선택 도구는 올바른 작업을 수행하기 위한 복잡한 구성 요소라고 생각합니다. 예를 들어 bootstrap-datepicker 의 모든 사용을 살펴보십시오. 전략적 관점에서 볼 때 이 구성 요소를 커뮤니티에 오래 맡길수록 더 좋다고 생각합니다. 다운로드 통계에서 ~13% 의 사람들이 날짜 선택기, 시간 선택기 또는 그 사이에 필요한 것이

@oliviertassinari 알았 습니다...
개발을 시작할 준비가 되면 알려주시겠습니까? 제가 도와드릴까요?

@chingyawhao https://github.com/dmtrKovalenko/material-ui-pickers 에서 @dmtrKovalenko 와 시겠습니까 ? 개선의 여지가 많다고 확신합니다.

@stunaz 모양과 느낌에 대해 다른 견해를 가지고 있다고 생각하지만 분명히 https://github.com/dmtrKovalenko/material-ui-pickers 가 현재 material-ui-next의 전체 디자인과 UX 포인트에 훨씬 더 잘 맞습니다. .

@up-to-you 내 최종 목표는 데스크탑의 텍스트 필드에서 선택기에 대한 material-design의 묘사를 따르는 것입니다. 이러한 선택 도구는 대화 상자 대신 팝오버에 있습니다.

내가 작업하고 있던 프로젝트에는 사용자가 선택기에서 날짜를 선택하도록 제한하지 않는 datepicker의 보다 맞춤화된 구성 요소가 필요합니다. 사용자는 마스크된 텍스트 입력에 날짜를 입력할 수도 있습니다.

내 프로젝트는 해당 수준의 사용자 정의를 허용합니다. 입력 또는 포함하는 대화 상자 또는 팝오버가 없는 선택기인 캘린더 구성 요소만 가져올 수 있습니다.

import {Calendar, Clock} from 'material-ui-next-pickers'

참고로 타임피커도 출시했어요 XD

@chingyawhao 는

@techniq yup, 확실히 ... 내 프로젝트에서 한 것과 비슷합니다.
예가 필요하면 내 저장소에 문제를 만드십시오.

폐쇄된 이유는 무엇입니까? 이것이 해결되지 않은 것 같습니다(여기 - https://material-ui.com/demos/pickers/).

참고로, 현재 문제는 Firefox가 기본적으로 지원하지 않기 때문에 datetime-local에 대한 좋은 솔루션이 없다는 것입니다. 머티리얼 1.0으로 전환하자 파이어폭스 사용자가 우리의 날짜/시간 필드를 사용할 수 없다는 것을 알게 되었습니다.

위의 논의의 대부분은 날짜 또는 시간의 좋은 구현에 관한 것 같지만 둘 다 datetime 작동 문제를 전혀 다루지 않습니다.

@rogerstorm 은 120달러로 이 문제에 자금을 지원했습니다. IssueHunt에서 확인하세요.

여보세요!

DataPicker 진행 상태에 대한 업데이트를 받을 수 있습니까?

이 긴 스레드에서 이것을 평가하기가 점점 어려워지고 있습니다.

그리고 @dmtrKovalenko 는 한동안 Material-UI-Pickers 에 꾸준히 전념해 온 것 같습니다.

구체적으로:

1. 원래 문제는 확인란 항목을 나열했으며 그 중 어느 것도 선택 해제되지 않았습니다. 정확합니까?
   
   
   @dmtrKovalenko 에는 테스트, 문서, 데모 등이 있는 것 같습니다. 모든 작업을 완료하지 않았을 수도 있지만 이 시점에서 _아무것도_ 체크할 수 없다고 말하는 것이 정확한가요?

2. 이 문제에 대해 @dmtrKovalenko의 의견을 듣고 싶습니다. Material-ui-picker를 접는 방식으로 가져오는 것에 대해 Material UI 팀과 논의한 적이 있습니까?

@jasonkylefrank 공식 리포지토리에서 아무 작업도 수행되지 않았기 때문에 아무 것도 표시되지 않았으며, 공정하게

@dmtrKovalenko 훌륭한 작업을 수행했으며 "공식"이 아닌 구성 요소를 사용하지 않을 이유가 없습니다.

DatePicker 및 TimePicker 구성 요소에 대한 작업은 계획하지 않습니다.
커뮤니티에 맡겨야 한다고 생각합니다. @dmtrKovalenko 가 죽이고 있습니다!
문제를 종료할 수 있도록 이 입장을 반영하도록 문서를 업데이트해야 합니다.

@rogerstorm 문제가 material-ui-pickers로 해결되면

나는 당신이 반 농담이었다는 것을 알고 있지만: cc @rogerstorm