Tanggal

1. Skenario yang berlaku

Ketika Anda perlu memilih tanggal atau waktu, komponen ini cocok untuk skenario seperti lembur dan perjalanan bisnis. Komponen Tanggal selalu menggunakan waktu lokal. Informasi dasar komponen

Untuk atribut komponen, penggunaan, dan contoh, klik di sini untuk melihatnya.

2. Fitur dasar

Anda dapat mengatur nilai tanggal default, format tanggal, penghapusan sekali klik, rentang tanggal, dan rentang kustom premium.

2.1 Atur waktu tetap dan format tanggal

2.1.1 Default (waktu tetap)

Komponen Tanggal mendukung Default. Setelah diatur, Default ditampilkan secara default ketika formulir dikirim (Anda tetap dapat memilih tanggal secara manual setelah menetapkan Default). Jalur: Komponen >> Atribut >> Default Catatan: Default ditampilkan sebagai “YYYY-MM-DD”, tetapi konten aktual yang ditampilkan pada komponen mengikuti Format spesifik yang Anda konfigurasikan. Contoh: Default tanggal

2.1.2 Format tanggal

Format tanggal default adalah “YYYY-MM-DD”. Anda juga dapat mengkustom Format tanggal. Contoh: Format tanggal

2.2 Rentang waktu yang dapat dipilih

Anda dapat membatasi waktu yang dapat dipilih, yang berguna untuk skenario seperti permintaan cuti dan lembur. Contoh: Rentang waktu yang dapat dipilih

2.2.1 Contoh skenario rentang waktu

Untuk membatasi pengguna agar hanya dapat mengajukan cuti mulai hari ini dan seterusnya, atur rentang waktu ke “Dapat dipilih mulai hari ini dan seterusnya (termasuk hari ini)”. Setelah diatur, tanggal sebelum hari ini menjadi abu-abu dan tidak dapat dipilih. Rentang lainnya bekerja dengan cara yang sama. Contoh:

2.2.2 Konfigurasi dan skenario rentang kustom premium

Anda dapat menggunakan JavaScript untuk membatasi pengguna agar hanya dapat memilih rentang waktu yang ditentukan. Ini cocok untuk skenario seperti janji temu dan pemrosesan bisnis khusus. Jalur: Atribut >> Rentang waktu yang dapat dipilih >> Pilih Kustom >> Ikat tindakan Ikat tindakan Anda dapat mengikat tindakan kustom untuk membatasi rentang waktu yang diizinkan. Berikut adalah contoh tindakan (hanya mengizinkan pemilihan tanggal dalam 7 hari). Langkah konfigurasi:

Setelah mengklik Ikat tindakan, layar berikut muncul. Ikuti langkah-langkah pada tangkapan layar.
Setelah mengklik Konfirmasi, layar berikut muncul. Ikuti langkah-langkah pada tangkapan layar:
Setelah menghapus kode yang ada, tulis kode JavaScript dan klik Simpan. Ikuti langkah-langkah pada tangkapan layar. Untuk referensi kode, lihat:

Developer Center: https://docs.aliwork.com/docs/developer/components/form/dateField Setelah dikonfigurasi, hanya tanggal dalam tujuh hari yang dapat dipilih. Contoh:

2.3 Tombol hapus

Setelah tombol hapus diaktifkan, jika waktu yang dipilih salah, Anda dapat mengklik × untuk menghapusnya dengan sekali klik. Contoh:

3. FAQ

3.1 Mengapa waktu diatur ulang setelah saya mengubah tanggal?

Ketika Anda memilih Format “YYYY-MM-DD HH:mm” atau “YYYY-MM-DD HH:mm:ss”, opsi “Atur ulang waktu setiap kali memilih tanggal” muncul pada panel Atribut. Contoh:Fitur ini dinonaktifkan secara default. Artinya, ketika Anda mengubah tanggal, nilai “jam-menit” tetap tidak berubah. Namun, jika Anda mengaktifkan opsi ini, nilai “jam-menit” diatur ulang menjadi “00:00” setiap kali Anda mengubah tanggal.Contoh:

3.2 Bagaimana cara mengubah selisih antara dua komponen Tanggal menjadi jam?

Lihat pengaturan berikut:

3.3 Ketika hari dalam seminggu dimasukkan pada Bidang Teks satu baris, bagaimana cara membuat komponen Tanggal di bawahnya menampilkan tanggal hari tersebut dalam minggu ini?

Ini belum dapat dicapai tanpa kode untuk saat ini. Anda dapat menggunakan formula untuk memperoleh tanggal saat ini, kemudian menggunakan JavaScript untuk membandingkan hari target dengan tanggal saat ini, menghitung selisih hari, dan menggunakan JavaScript untuk menentukan tanggal aktual dari hari target.

3.4 Saya telah menambahkan komponen rentang tanggal ke formulir. Bidang pertama diatur ke tanggal 12 pukul 4 sore, dan saya ingin Bidang kedua mengizinkan waktu setelah tanggal 12 pukul 4 sore. Namun, Bidang kedua hanya dapat mulai dari tanggal 13. Saat ini hanya mendukung presisi tingkat hari. Bisakah mendukung presisi tingkat jam?

Saat ini, komponen rentang tanggal hanya mendukung presisi tingkat hari. Silakan kirim permintaan fitur.

3.5 Bagaimana cara menghitung jumlah hari, jam, dan menit antara dua tanggal?

Ini dapat dihitung menggunakan rumus yang menghitung selisih antara dua nilai tanggal/waktu.

3.6 Mengimplementasikan jam dengan detik berdetak

Anda dapat menggunakan JavaScript untuk mencapainya. Tambah komponen Tanggal ke formulir, kemudian Salin kode berikut ke metode didMount(). Kode akan dimuat secara default. Catatan: Pengenal unik di bawah harus berupa pengenal unik dari komponen Tanggal.

 setInterval( function(){
var dt = new Date();
var y = dt.getFullYear();
var M = dt.getMonth()+ 1;
var d = dt.getDate();
var h = dt.getHours();
var m = dt.getMinutes();
var s = dt.getSeconds();
//alert("Waktu saat ini: " + y + "-"+M+"-"+d +" "+ h + ":" + m + ":" + s);
 document.getElementById( "uniqueIdentifier").innerHTML = "Waktu saat ini: " + y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s
 }, 1000);

Panel JS Hasil akhir:

3.7 Bagaimana cara memperbarui nilai komponen Tanggal ke waktu saat ini secara real-time ketika nilai Bidang berubah?

Buat tindakan baru pada Bidang yang nilainya berubah >> Saat nilai berubah.Salin kode berikut:

export function onChange({ value }) {
  this.$('DateComponentUniqueId').setValue(Date.parse(new Date()))
}

3.8 Bagaimana cara menghitung hari pecahan (misalnya, 0,x hari)?

Biasanya, jumlah hari antara dua tanggal adalah integer. Namun, ketika waktu mulai dan waktu akhir jatuh pada hari yang sama, hasilnya adalah 0 hari. Untuk mengubahnya menjadi nilai pecahan seperti 0,x hari, Salin kode berikut dan ganti komponen dengan komponen Tanggal di formulir Anda.

{"text":"DAYS(DATE(StartTime),DATE(EndTime))+TIME(HOUR(DATE(EndTime)),MINUTE(DATE(EndTime)),SECOND(DATE(EndTime)))-TIME(HOUR(DATE(StartTime)),MINUTE(DATE(StartTime)),SECOND(DATE(StartTime)))","marks":[{"from":{"line":0,"ch":10,"sticky":null},"to":{"line":0,"ch":16,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":23,"sticky":null},"to":{"line":0,"ch":29,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":47,"sticky":null},"to":{"line":0,"ch":53,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":68,"sticky":null},"to":{"line":0,"ch":74,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":89,"sticky":null},"to":{"line":0,"ch":95,"sticky":null},"value":"dateField_l0g14aqw","invalid":false},{"from":{"line":0,"ch":114,"sticky":null},"to":{"line":0,"ch":120,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":135,"sticky":null},"to":{"line":0,"ch":141,"sticky":null},"value":"dateField_l0g14aqu","invalid":false},{"from":{"line":0,"ch":156,"sticky":null},"to":{"line":0,"ch":162,"sticky":null},"value":"dateField_l0g14aqu","invalid":false}],"isCmData":true}

Memulai

Mulai Cepat

Manajemen Formulir

Desain Alur Kerja

Desain Laporan

Desain Tabel Agregat

Desain Portal

Halaman Kustom

Integrasi & Otomatisasi

Cool App

Manajemen Aplikasi

Manajemen Platform

Internasionalisasi

YiDA Dedicated

Fitur Pengembang

1. Skenario yang berlaku

2. Fitur dasar

2.1 Atur waktu tetap dan format tanggal

2.1.1 Default (waktu tetap)

2.1.2 Format tanggal

2.2 Rentang waktu yang dapat dipilih

2.2.1 Contoh skenario rentang waktu

2.2.2 Konfigurasi dan skenario rentang kustom premium

2.3 Tombol hapus

3. FAQ

3.6 Mengimplementasikan jam dengan detik berdetak

​1. Skenario yang berlaku

​2. Fitur dasar

​2.1 Atur waktu tetap dan format tanggal

​2.1.1 Default (waktu tetap)

2.1.2 Format tanggal

​2.2 Rentang waktu yang dapat dipilih

​2.2.1 Contoh skenario rentang waktu

​2.2.2 Konfigurasi dan skenario rentang kustom premium

​2.3 Tombol hapus

​3. FAQ

​3.6 Mengimplementasikan jam dengan detik berdetak

1. Skenario yang berlaku

2. Fitur dasar

2.1 Atur waktu tetap dan format tanggal

2.1.1 Default (waktu tetap)

2.2 Rentang waktu yang dapat dipilih

2.2.1 Contoh skenario rentang waktu

2.2.2 Konfigurasi dan skenario rentang kustom premium

2.3 Tombol hapus

3. FAQ

3.6 Mengimplementasikan jam dengan detik berdetak