> For the complete documentation index, see [llms.txt](https://saba-framework.gitbook.io/saba-framework-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://saba-framework.gitbook.io/saba-framework-documentation/examples/dynamic-form/input-type/date-time-range-picker.md).

# Date Time Range Picker

1. Deskripsi :

Penggunaan tipe input ini untuk merender formulir atau input dalam aplikasi web. Tipe data dalam hal ini yaitu "datetime-range" untuk mendeskripsikan inputan berupa jarak waktu,  ("startDateField") sebagai waktu awal dan ("endDateField") sebagai waktu akhir. Tipe data ini biasanya digunakan pada "dynamicColumnsFilter" juga untuk menampilkan data dari filter date time range yang diminta. Perbedaannya dengan date range adalah adanya parameter jam sebagai inputannya. Seperti contoh berikut: 

<br>

2. Implementasi JSON

```json
"dynamicColumnsFilter": [
    {
      "fieldName": "startDateEndDate",
      "fieldLabel": "Periode Transaksi",
      "type": "datetime-range",
      "size": 12,
      "startDateField": "planned_startDate",
      "endDateField": "planned_endDate",
      "includeOnPayload": false,
      "rules": {
        "required": false
      }
    },
    {
      "fieldName": "planned_startDate",
      "fieldLabel": "Termination Date",
      "type": "datetime",
      "size": 12,
      "isHidden": false
    },
    {
      "fieldName": "planned_endDate",
      "fieldLabel": "End Date",
      "type": "datetime",
      "size": 12,
      "isHidden": false
    }
]
```

2. Gambar capture contoh hasil Implementasi :&#x20;

inputan pada Form

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdT-NZRXaodl5S7nZFE_BWBihVsUg-IYSwfDolAlb6g4hcOmSVDGS448CbC0csyvBxWdzNRR_RyTTYc46-XVmTYqcrR29kzsHlakoaGo2NRr_CgNtLdtGj_YICqdFlplWl0gIuP7MBOQjVAch8yFiJdrxpj?key=1WdLxvH1S9tvbia0d6TcBg" alt=""><figcaption></figcaption></figure>

Hasil implementasi blok range inputan

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd12fVSLyUaxzn7cqXO5PxqnyuWacm2iN-HvqguP8a0ix5Hwglq0q2kvnuDOycsjBsaZwsQo8MzSGkzsbS8k-1CxGWEodNMf65moIIngRrW9teAFQkexfJBx759ZcOowZ1AVgLxhmIfqztMTYiFBMB-WF4n?key=1WdLxvH1S9tvbia0d6TcBg" alt=""><figcaption></figcaption></figure>

Hasil inputan dari datetime yang di blok

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfYRLAOzziYV76NBfa0bbu5__xhb9q7TBU9IZu9SuxAOL3k0mfAodjHbwPSh0LExBiECBmE8rSy-wiW4MiMtc_2u6gs6GmNCnwU6tl8gsUID2-1esCI_X_8_lMuyI09T5VV320EALXFJfgWq2ruGLu9Mj4?key=1WdLxvH1S9tvbia0d6TcBg" alt=""><figcaption></figcaption></figure>