> For the complete documentation index, see [llms.txt](https://docs.webtonative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webtonative.com/javascript-apis/calendar-android.md).

# Android Calendar API

Native calendar with language support and an option to take time also from the user.

Can be configured to only take time input from the user.

{% hint style="info" %}
You'll need to import the JavaScript file into your website before starting from this [link](https://docs.webtonative.com/javascript-apis/getting-started).
{% endhint %}

{% tabs %}
{% tab title="Plain JS" %}

```html
window.WTN.showDateTimePicker({
    showDate:true,
    showTime:true,
    callback:function(data){
        console.log("Date Data ->",JSON.stringify(data));
    }
});
```

{% endtab %}

{% tab title="npm" %}

```
import { showDateTimePicker } from "webtonative"

showDateTimePicker({
    showDate:true,
    showTime:true,
    callback:function(data){
        console.log("Date Data ->",JSON.stringify(data));
    }
});
```

{% endtab %}
{% endtabs %}

{% code overflow="wrap" %}

```javascript
Data returned - 

{"success":true,"type":"DATE_TIME_PICKER","date":"2024-7-7","time":"18:30","timestamp":"1723035604669"}

To capture only date - set showDate:true and showTime:false
To capture only time - set showDate:false and showTime:true
To capture both - set showDate:true and showTime:true
```

{% endcode %}

<div align="left"><figure><img src="/files/xI0pNlAbBIZLVZK39YkD" alt=""><figcaption><p>Date view</p></figcaption></figure> <figure><img src="/files/SsZAsv3F9bI49VisoAvW" alt=""><figcaption><p>Time view</p></figcaption></figure></div>