@gselltho Terima kasih banyak telah membuka permintaan fitur ini!
Saya pikir pada topik ini kita membutuhkan kerjasama yang erat dengan tim @dynatrace-oss/ux-core kami. Mungkin mereka telah membuat beberapa ejekan untuk topik ini atau mereka dapat memberi kami beberapa wawasan.

Jika mereka sudah memiliki beberapa tiruan atau desain, masalah ini akan menjadi titik awal yang baik untuk mengumpulkan semua informasi yang diperlukan dan proposal API.

Saya tidak yakin untuk tujuan apa pemilih tanggal diperlukan tetapi Arkadiusz Lipiarz bekerja sama dengan timnya untuk waktu yang lama sekarang pada pemilih tanggal yang ingin kami gunakan sebagai pemilih jangka waktu Global
itu sudah diterapkan di lingkungan demo kami. Saya pikir dalam hal ini akan lebih baik untuk berbicara dengannya.

Kami telah berdiskusi di masa lalu dan @ursula-wieshofer melakukan beberapa evaluasi dalam produk, dan kami memiliki satu atau dua datepicker secara total. Ini berarti bahwa ini tidak tinggi dalam daftar prioritas.

@gselltho Saya pikir masuk akal untuk membahas ini lebih lanjut dan menargetkan tambahan ke perpustakaan.
Saya pikir kita dapat mengambil banyak pelajaran dari @angular/components dan melakukan versi yang disederhanakan.
Apakah Anda dapat membuat Proposal API yang lebih detail untuk itu?

Halo!

Jadi sepertinya fitur yang dibuat tim saya akan sesuai dengan kasus penggunaan @gselltho yang terdaftar dan banyak lagi. Selain bagian atas situs kami, ini juga digunakan oleh tim Dashboard sebagai komponen lokal. Kami menyiapkannya dalam Angular dan GWT. Hubungi saya di Slack jika Anda tertarik.

Tapi... sepertinya Ryan dan timnya sedang menyiapkan solusi yang sangat mirip dengan apa yang Anda bagikan. Berikut adalah tampilannya:

Pemilik kode adalah @areknow dan dia dapat memberi Anda detail lebih lanjut.

Hai teman-teman, saya tidak yakin apa selanjutnya. Komponen tim Ryan pada dasarnya adalah bahan sudut dan persis apa yang saya butuhkan. Tetapi saya akan mengatakan, karena ini adalah komponen yang sangat mendasar, rumahnya harus menjadi komponen barista dan sepertinya, lebih banyak tim dapat menggunakannya.

@ffriedl89 : tentu saja, saya dapat membuat deskripsi API yang lebih detail. Setidaknya untuk set fitur terbatas untuk implementasi pertama. Saya akan mempostingnya di sini dalam beberapa hari ke depan

Hai @gselltho , saya adalah pengembang komponen bersama pemilih tanggal yang berada di repo spine-x. Saya telah berbicara dengan tim barista tentang mentransfernya ke lib komponen barista, tetapi sayangnya ia memiliki ketergantungan keras pada beberapa paket material yang bukan sesuatu yang ingin ditambahkan tim ke proyek.

CDK sudut tidak menyertakan pemilih tanggal yang berarti komponen ini harus ditulis dari bawah ke atas.

Apakah ada masalah dengan Anda menggunakan komponen bersama pemilih tanggal dari repo mono?

Bersulang

Hai @areknow , komponen Anda hebat! Saya baru saja melewatkan fitur Angulars Reactive Form (ControlValueAccessor) dan, sepertinya, itu harus menjadi DtFormFieldControl untuk menggunakannya dengan mulus dalam formulir Barista dan Angular Reactive.

@gselltho Terima kasih telah menghubungi kami lagi. Persis seperti yang digariskan @areknow . Komponennya adalah komponen material yang dibenahi kembali yang memperkenalkan ketergantungan pada material dan pustaka util lainnya dari repo sudut/komponen. Itu juga dilengkapi dengan ketergantungan keras pada moment.js yang sangat besar dan tidak dapat digoyahkan pohon.
Sayangnya, CDK tidak datang dengan datepicker yang tidak ditata dengan cara material.
Sampai sekarang datepicker bukanlah komponen yang dibutuhkan banyak tim karena kami tidak memiliki datepicker kecuali pemilih jangka waktu global dalam produk.

Jika Anda membutuhkan komponen, akan luar biasa jika kita dapat bekerja sama dalam menyumbangkan komponen ke perpustakaan. Proses ini dimulai dengan membuat proposal API untuknya di edisi ini :)
Setelah ini selesai, kami dapat membantu Anda memulai dan memandu Anda melalui proses pengembangan dan kami akan membantu Anda di sepanjang jalan.

Saat ini tim barista membutuhkan bantuan dari kontributor untuk menambahkan komponen ini ke library.
Bantuan apa pun di sini sangat dihargai

Hei, akan mengurusnya karena pengaturan VCT juga membutuhkan pemilih tanggal/waktu sekarang. Dalam komentar berikut saya akan mencoba mengumpulkan semua persyaratan dan kemudian mengusulkan API.

Jika Anda juga memiliki dan fitur/persyaratan yang harus ada di sana, yang belum tercantum, beri tahu saya.

cc @areknow

Persyaratan:

Ketentuan Umum

• Memilih tanggal : Pengguna harus dapat memilih tanggal
• Memilih waktu : Selain memilih tanggal, pengguna juga harus dapat memilih waktu tambahan.
• **Praisian
• Dinonaktifkan : Konsumen dapat menonaktifkan seluruh datepicker.
• Rentang yang dapat dipilih : Seharusnya dimungkinkan untuk menentukan rentang tanggal yang dapat dipilih pengguna (dapat diimplementasikan melalui input min/maks)
• Zona waktu : Seharusnya dimungkinkan untuk menentukan zona waktu untuk tanggal yang dipilih pengguna.

Persyaratan Teknis

• Kompatibel dengan NgModel :
• Kompatibel dengan bidang formulir : Datepicker harus berupa kontrol bidang formulir yang valid.
• Modularitas : Datepicker harus terdiri dari beberapa sub-komponen/direktif/utilitas sehingga konsumen juga dapat menggunakan hanya bagian daripada komponen datepicker penuh (mis. Tampilan bulan untuk pemilih jangka waktu)
• Objek Tanggal Asli : Tanggal harus diwakili oleh objek/kelas Date (termasuk seluruh API yang dihadapi konsumen). Bukan oleh beberapa implementasi kustom abstrak. Fungsi/layanan utilitas tambahan ( DateAdapter ) mungkin diperlukan.
• Mode Terang & Gelap : Kontrol perlu mendukung tema terang dan gelap

Persyaratan Opsional (Tidak yakin jika diperlukan) :

• Batasi tanggal yang dapat dipilih : Harus dimungkinkan untuk membatasi lebih lanjut (memperpanjang persyaratan min/maks) tanggal yang dapat dipilih (dapat diimplementasikan oleh fungsi yang dapat diterapkan konsumen)
• Rentang : Selain memilih satu tanggal, Anda juga dapat memilih rentang tanggal (mis. 1.1.2020 - 10.1.2020)
• Penggantian seluler : Pada perangkat seluler, datepicker harus mundur ke mitra aslinya (Catatan: Kami perlu memeriksa apakah semua fitur yang ditentukan untuk versi khusus juga didukung untuk yang asli)

Proposal API

_ WIP: akan disesuaikan dari waktu ke waktu.

Datepicker harus terdiri dari beberapa Komponen:

DtDatepicker ( dt-datepicker )

Pemilih tanggal itu sendiri. Komponen ini menggabungkan semua komponen lain menjadi satu gunakanabe datepicker (lihat Persyaratan).

Masukan

| Nama | Ketik | Nilai default | Deskripsi |
| ---------- | ----------- | ------------- | ------------ |
| nilai | D \| null | null | Tanggal yang dipilih. |
| mulaiPada | D \| null | null | Tanggal untuk membuka kalender pada awalnya. Diabaikan jika selected disetel. Default untuk tanggal hari ini secara internal hanya untuk tampilan. |
| menit | D \| null | null | Tanggal berlaku minimum. |
| maks | D \| null | null | Tanggal valid maksimum. |
| dengan disabilitas | boolean | false | Apakah datepicker dinonaktifkan. |
| isTimeEnabled | boolean | false | Apakah mode waktu diaktifkan atau tidak. |
| isRangeEnabled | boolean | false | Apakah mode rentang diaktifkan atau tidak. |

DtCalendar ( dt-calendar )

Komponen untuk memilih tanggal dalam tampilan kalender ( komponen calendar-body ). Termasuk tampilan kalender (bulan) dan kontrol yang diperlukan untuk menavigasi antara bulan dan tahun yang berbeda.

Masukan

| Nama | Ketik | Nilai default | Deskripsi |
| ---------- | ----------- | ------------- | ------------ |
| dipilih | D \| null | null | Tanggal yang dipilih saat ini. |
| mulaiPada | D \| null | null | Tanggal yang mewakili periode (bulan atau tahun) untuk memulai kalender. |
| minDate | D \| null | null | Tanggal minimum yang dapat dipilih. |
| tanggal maks | D \| null | null | Tanggal maksimum yang dapat dipilih. |

Keluaran

| Nama | Ketik | Deskripsi |
| ---------------- | ----------- | ------------ |
| dipilihUbah | D | Dipancarkan saat tanggal yang dipilih saat ini berubah. |

Badan Kalender ( dt-calendar-body )

Hanya menghosting kisi kalender selama sebulan.

Masukan

| Nama | Ketik | Nilai default | Deskripsi |
| ------------ | ----------- | ------------- | ------------ |
| tanggal aktif | D | hari ini | Tanggal untuk ditampilkan dalam tampilan bulan ini (segala sesuatu selain bulan dan tahun diabaikan). |
| dipilih | D \| null | null | Tanggal yang dipilih saat ini. |
| minDate | D \| null | null | Tanggal minimum yang dapat dipilih. |
| tanggal maks | D \| null | null | Tanggal maksimum yang dapat dipilih. |
| filter tanggal | (date: D) => boolean | - | Fungsi yang digunakan untuk memfilter apakah suatu tanggal dapat dipilih atau tidak. |

Keluaran

| Nama | Ketik | Deskripsi |
| ------------------ | ----------- | ------------ |
| dipilihUbah | EventEmitter<D> | Dipancarkan saat nilai baru dipilih. |
| activeDateChange | EventEmitter<D> | Dipancarkan saat tanggal apa pun diaktifkan. |

Pemilih waktu ('dt-pemilih waktu')

Menghosting timepicker, yang berisi input waktu (dengan input jam dan menit).

Masukan

| Nama | Ketik | Nilai default | Deskripsi |
| ------------ | ----------- | ------------- | ------------ |
| nilaiLabel | string | '' | Label yang digunakan untuk menampilkan tanggal dalam mode rentang.
| jam | nomor \| nol | nol | Jam untuk ditampilkan di pemilih waktu.
| menit | nomor \| nol | nol | Menit untuk ditampilkan di pemilih waktu.
| dengan disabilitas | boolean | salah | Status pencatat waktu yang dinonaktifkan dan inputnya.
| isTimeRangeEnabled | boolean | salah | Apakah mode rentang waktu diaktifkan atau tidak.

Keluaran

| Nama | Ketik | Deskripsi |
| ------------------ | ----------- | ------------ |
| perubahan waktu | AcaraEmitter| Memancarkan acara timeChange jika input waktu berisi nilai yang valid pada blur.

Masukan waktu ('dt-masukan waktu')

Menghosting input waktu, yang berisi input jam dan menit.

Masukan

| Nama | Ketik | Nilai default | Deskripsi |
| ------------ | ----------- | ------------- | ------------ |
| jam | nomor \| nol | nol | Jam untuk ditampilkan di input waktu.
| menit | nomor \| nol | nol | Menit untuk ditampilkan di input waktu.
| dengan disabilitas | boolean | salah | Status input yang dinonaktifkan.

Keluaran

| Nama | Ketik | Deskripsi |
| ------------------ | ----------- | ------------ |
| perubahan waktu | AcaraEmitter| Memancarkan acara timeChange jika input waktu berisi nilai yang valid pada blur.

Silakan posting di bawah persyaratan/fitur yang harus disediakan oleh datepicker. Saya akan menambahkannya dalam daftar komentar sebelumnya.

@thomaspink Terima kasih telah mengurus ini 👍
Deskripsi kebutuhan Anda sudah memiliki semua yang saya perlukan. Saya hanya punya pertanyaan tentang:
Selecting a time: In addition to selecting a date the user must also be able to select an additional time.
Waktu dimaksudkan sebagai opsional, saya kira? Apakah saya dapat memilih apa yang dapat dipilih: hanya tanggal, hanya waktu, atau keduanya dalam kombinasi?

@gselltho Terima kasih atas umpan baliknya 👍

Idenya adalah untuk memiliki tanggal dan waktu sebagai default, tetapi Anda dapat menonaktifkan bagian waktu untuk menjadikannya tanggal saja, atau sebaliknya. Tidak yakin apa cara terbaiknya (apakah lebih banyak konsumen hanya membutuhkan pemilih tanggal atau tanggal/waktu).

Akan menyenangkan untuk memiliki kendali atas zona waktu. Beberapa kasus penggunaan kami di spine X memerlukan UTC untuk berinteraksi dengan API lawas tertentu.

Juga seperti yang dikatakan @gselltho , memiliki opsi untuk berkencan saja akan menyenangkan.

Terima kasih untuk proyek ini!

Apakah ini termasuk tanggal relatif yang telah ditentukan sebelumnya? Seperti dalam "sekarang", "dua minggu lalu", dll?

Satu persyaratan lagi (~ GTS):

• Kami membutuhkan versi terang dan gelap

Senang bisa memiliki:

• di browser seluler -> mundur ke kontrol pemilihan tanggal/waktu asli

@toddbaert Terlepas dari pemilih jangka waktu global apakah ini juga merupakan usecase untuk datepicker umum ini?

@pieniazek @areknow ditambahkan ke daftar

@thomaspink Saya pikir karena alasan konsistensi dan untuk membuat penanganan pemilih tanggal lebih mudah bagi pengguna, kita harus tetap berpegang pada bagian pemilih jangka waktu global yang juga menyertakan kalender. Fungsionalitas dan penanganan dasar harus sama dengan gaya.
Ini akan mendukung pengguna ketika berhadapan dengannya karena dia sudah terbiasa dengan fungsionalitasnya.

@thomaspink itu tidak akan menjadi pemecah kesepakatan bagi pengguna, tetapi kami akan segera mengekspos beberapa UI yang tanggal relatif yang telah ditentukan sebelumnya dapat berguna.

@toddbaert apakah Anda memiliki daftar nilai yang didukung? Saya akan menambahkannya ke daftar yang bagus jika itu baik untuk Anda

Untuk datepicker kami juga memerlukan beberapa jenis layanan (mirip dengan adaptor data bahan sudut) yang memberi kami fungsionalitas dan informasi sehingga kami dapat menampilkan tanggal dan penamaan yang benar (termasuk nama hari kerja) di satu sisi dan menghitung /bekerja dengan tanggal asli di sisi lain. "Layanan" ini kemudian juga harus tersedia bagi konsumen kami sehingga mereka dapat bekerja dengan tanggal dengan cara yang sama dan kami dapat berbagi fungsi ini.

Untuk itu kami memiliki setidaknya 2 opsi (jika Anda memiliki lebih banyak ide, saya akan sangat menghargai jika Anda mempostingnya di bawah):

1. Buat NativeDateAdapter yang menggabungkan API tanggal asli ( Intl , Date ) dan fungsi utilitas (seperti addCalendarDays ). Adaptor ini akan sangat mirip dengan Angular Materials NativeDateAdapter . Tetapi untuk kasus penggunaan kami, kami tidak memerlukan fallback ketika Intl tidak tersedia, karena semua browser kami yang didukung telah memiliki 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.
2. Gunakan perpustakaan eksternal seperti date-fns dan bungkus menjadi layanan (DateAdapter) yang kemudian kami berikan kepada pelanggan kami.

Saat ini saya akan lebih cenderung ke opsi 1 karena sangat menggunakan API asli tanpa memerlukan perpustakaan tambahan tetapi harap juga posting ide, temuan, dan komentar Anda :)

@thomaspink Saya setuju bahwa kita harus membuat layanan adaptor seperti itu. Saya tahu bahwa saya menyatakan sebelumnya, bahwa saya ingin menggunakan Intl dan Date asli untuk yang satu ini, tetapi saya memeriksa ulang dukungan untuk Intl.DateFormat dan saya tidak sangat senang tentang itu. Terutama format Rentang yang sebagian hilang agak menyedihkan.

Melihat bahwa date-fns adalah treehakable dan tidak terlihat seperti perpustakaan besar secara umum , sekarang saya akan memilih untuk menggunakan date-fns .
Selain itu, matematika tanggal dan waktu bisa sangat sulit, bahkan dengan banyak dukungan asli ketika berhadapan dengan zona waktu klien, dll...

Seperti yang saya lihat bahwa Anda telah membuat draf PR untuk pemilih tanggal. Apakah sudah ada API yang bisa Anda usulkan, terkait komponen tersebut?

Mengenai Intl.DateFormat : Untuk kasus penggunaan yang saya temukan saat ini, mundur dapat dengan mudah dicapai, tetapi saya setuju bahwa perhitungan tanggal/waktu khusus bisa sulit.

PR ini adalah wip dan saya belum menangani tugas-tugas yang membutuhkan layanan seperti itu. Masih tidak yakin fungsionalitas mana yang akan kita perlukan untuk layanan ini, tetapi saya akan mulai dengan yang dasar dan akan mengembangkannya nanti.

Zona waktu

Baru-baru ini kami menjatuhkan persyaratan ini. Ada banyak detail kecil namun rumit untuk dipertimbangkan yang sulit dijelaskan kepada pengguna dari perspektif UX.

Pustaka manipulasi tanggal

date-fns adalah API yang fantastis untuk operasi perubahan waktu seperti addMonth , getDaysInMonth , isToday , startOfTheWeek dll. Tree-shake'ability menjadikannya penggunaan yang ringan . Mungkin biayanya sama beratnya dengan abstraksi adaptor.

Di sisi lain, perpustakaan-konsumen akan memiliki perasaan campur aduk jika mereka perlu memasukkan date-fns ketika mereka memiliki momen atau luxon -> Di sini adaptor akan berguna. Kami beruntung menggunakan date-fns , jadi itu tidak akan menjadi masalah bagi kami.

Catatan tentang zona waktu: date-fns tidak akan cocok jika Anda ingin menerapkan dukungan zona waktu penuh (bahkan dengan date-fns-tz yang hanya menyelesaikan masalah pemformatan/penguraian, tetapi tidak ada skenario manipulasi tanggal ). Baru-baru ini kami mempertimbangkan untuk menggunakan luxon untuk tujuan ini, setidaknya sampai spesifikasi Temporal belum selesai dan diadopsi oleh browser.

Memformat

• Tahukah Anda mengapa datepicker Material Angular tidak hanya menggunakan DetePipe?
• Pemformatan rentang tidak ada dari Intl.DateFormat : Mungkin kita bisa menerapkan fallback kita sendiri atau menggunakan polyfil? Dalam produk kami sudah memiliki sesuatu di tempat.
• Perhatikan jika kita tidak akan menggunakan DetePipe untuk memformat, sebaiknya dukung token LOCALE_ID untuk mengontrol bagaimana teks diterjemahkan.

Terima kasih @piotrl

Sejauh yang saya pahami, DatePipe hanya akan berguna untuk menampilkan tanggal yang akhirnya dipilih, tetapi tidak saat menghitung/menampilkan hal-hal seperti: Semua hari dalam bulan tertentu.

Ketika saya membaca semua komentar, saya pikir kita bisa setuju bahwa konsep adaptor harus menjadi jalan yang harus ditempuh. Kami kemudian dapat membuat adaptor untuk native, date-fns , atau luxon tergantung pada solusi yang akan kami setujui. Seperti yang disebutkan @piotrl, ini juga akan menyelesaikan masalah bahwa ketika konsumen memiliki perpustakaan tanggal sendiri, adaptor baru dapat dengan mudah diimplementasikan.

@ffriedl89 @tomheller Pikiran Anda?
@piotrl : Jika kita akan menerapkan adaptor tanggal, apakah cluster juga akan menggunakannya sebagai titik masuk tanggal pusat? Juga akan sangat bagus jika Anda dapat mendukung saya karena Anda memiliki banyak keahlian tentang topik ini?

Efek samping positif lainnya adalah jika kita tetap dekat dengan api dari adaptor tanggal material, dan mereka akan memindahkannya ke cdk, kita dapat dengan mudah menyesuaikan dan mengubahnya.

@areknow

Akan menyenangkan untuk memiliki kendali atas zona waktu. Beberapa kasus penggunaan kami di spine X memerlukan UTC untuk berinteraksi dengan API lawas tertentu.

Memiliki adaptor tanggal juga akan menyelesaikan persyaratan ini, karena datepicker memperlakukan tanggal sebagai objek generik apa pun yang disediakan adaptor. Ini bisa berupa Tanggal asli, pembungkus Momen, atau tanggal yang selalu memiliki zona waktu tertentu.

Jika kita akan menerapkan adaptor tanggal, apakah cluster juga akan menggunakannya sebagai titik masuk tanggal pusat?

Saya terbuka untuk mempertimbangkannya. Pikiran awal saya: Objek Tanggal Mentah sudah digunakan di 600+ tempat (secara eksplisit, tidak dapat menghitung penggunaan implisit).

Sebagian besar penggunaan tidak akan terhubung ke kalender atau dekat dengan kalender. Saat saya mencari penggunaan, umumnya tanggal berasal dari backend dan sedikit diproses untuk tujuan pemformatan. Menggunakan adaptor untuk kasus penggunaan tersebut hanya untuk konsistensi dengan kalender mungkin berlebihan. Jadi saya akan mempertimbangkan konversi kecil dari Date to Adapter asli setiap kali kami menggunakan kalender (jika kami membutuhkan Adapter sebagai @Input ).

Jadi jika kami memutuskan untuk menggunakan adaptor, masih ada 2 cara:

1. Sediakan adaptor dalam konfigurasi modul HANYA untuk operasi tanggal kalender internal, model (input/output) masih akan didasarkan pada tanggal asli
2. Menyediakan adaptor untuk penggunaan internal + API input/output.

Opsi ke-2 lebih invasif dalam hal kasus penggunaan untuk dipikirkan, membutuhkan API adaptor yang dipikirkan dengan baik.
Opsi pertama bisa lebih mudah untuk memulai dan bisa berkembang menjadi yang kedua jika diperlukan.

Pindah ke APM-266081