---
title: Date Picker
hide_title: true
---

# Date Picker

A UI component for picking dates. It works both as a text input where you can type the date, and as a calendar drop down (or using the native date picker on mobile).

<div className="ndl-image-with-background">

![](/library/prefabs/date-picker/date-picker.png)

</div>

On desktop and tablets the text input present a calendar drop down when edited.

<div className="ndl-image-with-background">

![](/library/prefabs/date-picker/date-picker-drop-down.png)

</div>

After importing the module you will see a component called **Date Picker** in your project.

The example below shows how to hook the **Date Picker** up to data in a **Variable**, you can save the value back to the object with the **Set Variable** using the **Changed** signal.

<div className="ndl-image-with-background xl">

![](/library/prefabs/date-picker/date-picker-nodes.png)

</div>

The **Value** input and output have the Javascript **Date** type.