> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/forms/date-picker.md).

# Date Picker

## Introduction

We used [daterangepicker](http://www.daterangepicker.com/) a JavaScript component for choosing date ranges, dates and times.

<div align="left"><img src="/files/-LRm_kSqSKzyFNpGCe7e" alt=""></div>

## How to Setup

### **HTML Structure**

```markup
<input class="form-control" type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
```

## Dependency

### CSS

```markup
<!-- Daterangepicker CSS -->
<link href="vendors/daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
```

### JS

```markup
<!-- Daterangepicker JavaScript -->
<script src="vendors/moment/min/moment.min.js"></script>
<script src="vendors/c/daterangepicker.js"></script>
<script src="dist/js/daterangepicker-data.js"></script>
```

### Initialize daterangepicker JS

```javascript
/* Date range with a callback*/
$('input[name="daterange"]').daterangepicker({
	opens: 'left',
	"cancelClass": "btn-secondary",
}, function(start, end, label) {
	console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
```