Date Range Picker

const start = new Date(new Date(new Date().setDate(new Date().getDate() - ((new Date().getDay() + 7) % 7))).toDateString());

new ac.calendars.DateRangePicker(
	{
		placeholder: "Select a range",
		presets: [
			{
				label: "This Week",
				start: start,
				end: new Date(new Date(new Date().setDate(start.getDate() + 6)).toDateString())
			},
			{
				label: "This Month",
				start: new Date(new Date(new Date().setDate(1)).toDateString()),
				end: new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString())
			},
			{
				label: "Last Week",
				start: new Date(new Date(start.getTime() - 7 * 24 * 60 * 60 * 1000).toDateString()),
				end: new Date(new Date(start.getTime() - 1 * 24 * 60 * 60 * 1000).toDateString())
			},
			{
				label: "Last Month",
				start: new Date(new Date(new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(1)).toDateString()),
				end: new Date(new Date(new Date().setDate(0)).toDateString())
			}
		]
	},
	"#cntlDateRangePicker"
);

<input id="cntlDateRangePicker" />

new ac.calendars.DateRangePicker(
	{
		placeholder: "Select a range",
		format: "dd/MMM/yy",
		startDate: new Date(new Date().setDate(1)),
		endDate: new Date(new Date().setDate(7))
	},
	"#cntlDateRangePicker"
);

<input id="cntlDateRangePicker" />

new ac.calendars.DateRangePicker(
	{ 
		placeholder: "Select a month range",
		start: "Year",
		depth: "Year",
		format: "MMM yyyy"
	},
	"#cntlMonthDateRangePicker"
);

<input id="cntlDateRangePicker" />