> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/datepicker/code.md).

# Code

{% hint style="danger" %}
This is not a Compound Component.
{% endhint %}

This component can be seen as a small library, because you will import the neccessary components from the 'DatePicker' library.

{% code fullWidth="false" %}

```tsx
import { RangeDatePicker, SingleDatePicker } from '@sipter/react-datepicker'
```

{% endcode %}

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Demo - Single Date Picker</td><td><a href="https://codesandbox.io/s/single-date-picker-l8r689">Code Sandbox</a></td><td></td></tr><tr><td>Live Demop - Range Date Picker</td><td><a href="https://codesandbox.io/s/range-date-picker-gn48q7">Code Sandbox</a></td><td></td></tr></tbody></table>