# Datepickers

Atmos comes with host date input options which can be useful for various scenarios, we have included some of the most popular datepicker plugins that are available and are free to use

## Bootstrap Datepicker

Bootstrap datepicker is most simple and easy to implement datepicker, it by default supports bootstrap.

#### step 1

Include the stylesheet `datepicker3.css` inside the  if it's not there already. add this before atmos stylesheet

```markup
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
```

#### Step 2

Include the relevant javascript files inside the  before core template script inclusions, if it's not there already.

```markup
<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
```

#### Step 3

Add the Markup

```markup
 <input type="text" class="js-datepicker form-control" placeholder="Select a Date">
```

#### Step 4&#x20;

Initialize the plugin

```javascript
$(".js-datepicker").datepicker();
```

{% embed url="<https://uxsolutions.github.io/bootstrap-datepicker/>" %}

## Daterangepicker

Daterangepicker is used for selecting date ranges. To use daterangepicker take a look at following steps

#### Step 1

Include the stylesheet `daterangepicker.css` inside the if it's not there already. add this before atmos stylesheet

```markup
<link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css">
```

#### Step 2

Include the relevant javascript files inside the before core template script inclusions, if it's not there already.

```markup
<script src="assets/vendor/moment/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
```

#### Step 3

Add Following Markup

```markup
<input type="text" class="input-daterange form-control">
```

#### Step 4

Initialize the plugin

```javascript
 $('.input-daterange').daterangepicker();
```

{% embed url="<https://github.com/dangrossman/daterangepicker/>" %}

## Timepicker

Bootstrap timepicker for selecting times convenently. we have customised bootstrap timepicker for atmos admin panel. you can check its core at timepicker.scss

#### Step 1

Include the stylesheet `bootstrap-timepicker.min.css` inside the if it's not there already. add this before atmos stylesheet

```markup
<link rel="stylesheet" href="assets/vendor/timepicker/bootstrap-timepicker.min.css">
```

#### Step 2

Include the relevant javascript files inside the before core template script inclusions, if it's not there already.

```markup
<script src="assets/vendor/timepicker/bootstrap-timepicker.min.js"></script>
```

#### Step 3

Add Markup

```markup
<input class="form-control timepicker" type="text">
```

#### Step 4

initialize the plugin

```javascript
 $('.timepicker').timepicker({
        showInputs: false
    });
```

{% embed url="<http://jdewit.github.io/bootstrap-timepicker/>" %}

## Datedropper

datedropper is a fancy datepicker plugin build on top jqueryui datepicker, it has really playful UI for pickup dates.

#### Step 1&#x20;

Include the stylesheet datedropper.min.css inside the if it's not there already. add this before Atmos stylesheet

```markup
<link rel="stylesheet" href="assets/vendor/datedropper/datedropper.min.css">
```

#### Step 2

Include the relevant javascript files inside the before core template script inclusions, if it's not there already.

```markup
<script src="assets/vendor/datedropper/datedropper.min.js"></script>
```

#### Step 3

Add the Markup

```markup
<input class="form-control datedropper" type="text">
```

#### Step 4

Initialize the plugin

```javascript
$('.datedropper').dateDropper();
```

{% embed url="<https://felicegattuso.com/projects/datedropper/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atomui.com/form-elements/datepickers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.