> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Tanggal

> Pelajari cara menggunakan komponen Tanggal di YiDA — atur nilai default, format tanggal, rentang waktu, dan kustomisasi premium untuk skenario cuti, lembur, atau perjalanan bisnis.

## 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](/id/yida/form/snftao)

<Note>
  Untuk atribut komponen, penggunaan, dan contoh, [**klik di sini**](/id/open/yida/components/interface) untuk melihatnya.
</Note>

## 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:

1. Setelah mengklik Ikat tindakan, layar berikut muncul. Ikuti langkah-langkah pada tangkapan layar.

2. Setelah mengklik Konfirmasi, layar berikut muncul. Ikuti langkah-langkah pada tangkapan layar:

3. 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](/id/open/yida/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

<AccordionGroup>
  <Accordion id="q1" title="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:
  </Accordion>

  <Accordion id="q2" title="3.2 Bagaimana cara mengubah selisih antara dua komponen Tanggal menjadi jam?">
    Lihat pengaturan berikut:
  </Accordion>

  <Accordion id="q3" title="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.
  </Accordion>

  <Accordion id="q4" title="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.
  </Accordion>

  <Accordion id="q5" title="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.
  </Accordion>
</AccordionGroup>

### 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.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
 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:

<AccordionGroup>
  <Accordion id="q6" title="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:

    ```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
    export function onChange({ value }) {
      this.$('DateComponentUniqueId').setValue(Date.parse(new Date()))
    }
    ```
  </Accordion>

  <Accordion id="q7" title="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.

    ```ruby theme={"theme":{"light":"github-light","dark":"github-dark"}}
    {"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}
    ```
  </Accordion>
</AccordionGroup>