<script src="path/to/jquery.js"></script>
<script src="path/to/datepickr.min.js"></script>
<link rel="stylesheet" href="path/to/datepickr.css"/>

Examples

Simple Date Picker

<div id="datepickr-calendar-1"></div>
<script>
	$("#datepickr-calendar-1").DatePickr();
</script>

---

Draggable Date Range Picker

<div id="datepickr-calendar-2"></div>
<script>
	$("#datepickr-calendar-2").DatePickr({
		draggable: true
	});
</script>

---

Invoke with HTML attributes

<div id="datepickr-calendar-3" data-datepickr data-draggable></div>

---

Using Events

<div id="datepickr-calendar-4"></div>
<script>
	$("#datepickr-calendar-4").DatePickr({
		onChange: function(){
			alert("Changed!");
		},
		onMonthChange: function(e){
			alert("Month went one " + ((e.direction == -1) ? "backward": "forward"));
		}
	});
</script>

---

Input with Events

<input id="datepickr-calendar-5" type="text"/>
<script>
	$("#datepickr-calendar-5").DatePickr({
		onChange: function(){
			alert("Changed!");
		},
		onShow: function(){
			alert("Datepickr is being shown!");
		},
		onHide: function(){
			alert("Datepickr is being hidden!")
		},
		onMonthChange: function(e){
			alert("Month went one " + ((e.direction == -1) ? "backward": "forward"));
		}
	});
</script>

---

Input with minimum and maximum dates and a custom position.

<input id="datepickr-calendar-6" type="text"/>
<script>
	$("#datepickr-calendar-6").DatePickr({
		datemin: new Date().addDays(6),
		datemax: "2 September 2020",
		position: "right"
	});
</script>