> 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-range-picker.md).

# Date Range Picker

1. Deskripsi :

Penggunaan tipe input ini untuk merender formulir atau input dalam aplikasi web. Tipe data dalam hal ini yaitu "date-range" untuk mendeskripsikan jarak waktu yang dipilih berupa inputan tanggal awal  ("startDateField") dan tanggal akhir  ("endDateField"). Tipe data ini biasanya digunakan pada "dynamicColumnsFilter" juga untuk menampilkan data dari filter date range yang diminta. Seperti contoh berikut: 

2. Implementasi JSON : 

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

3. Gambar capture contoh hasil Implementasi : 

inputan pada Form

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfhfskAeK0oSozoBQPEdGgpbHc1QBCO6LvTvQUtucSSyK3r5Ev-7yivOiTOM083oSQWImmPl1a4xbu6UOc-ywlD3G2ioOPXn_EWsrtig9Qm_wnK6sWFzQNORFC-3wo3UvfgUy7dStsa-_PHEraQhgEVhWqA?key=rRRtFTS2VyRYEThfeymoIg" alt=""><figcaption></figcaption></figure>

Hasil implementasi blok range inputan

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeqZMqnv-p1f2553msgjGH_TA5ym7TmeAs3dPhPKm3YmlxjbOkaL9VGgzTENbw_Iw9e1ruLbtqPOAAOgtC46uJES6L5l0EHHFg3HtIW9tGgTBMRr42KWoZO_i0860NdmGdHAgdVTK5Xk6VaX1H2ILwOu-A?key=rRRtFTS2VyRYEThfeymoIg" alt=""><figcaption></figcaption></figure>

Hasil inputan dari date yang di blok

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfQHTDdkVTkfQ5ipKo2CZWyPBjILhKdFO81NR5OVEXF7c88laWoEyFmpF1ACqRvafm9tXWoLtRTsC2eZrp99LiY9HeYFVx5VfF-oRLV4M_vd_QYIK1GqNsnjfxUiaZx1ohRSBN6iYE_ToBQRWZrN8cVDXE?key=rRRtFTS2VyRYEThfeymoIg" alt=""><figcaption></figcaption></figure>