Aware Controls | JavaScript (ES5) Date Picker Demos

The Date Picker is a control that allows the user to select a date from a drop down calendar.

Default Behavior

Demonstrates the default behavior of the Date Picker control.

new ac.calendars.DatePicker({}, "#cntlDatePicker");

<input id="cntlDatePicker" />

Date Range

Demonstrates how you can limit the selection to a specific range in a calendar by using min and max properties.

new ac.calendars.DatePicker(
	{
		min: new Date("07/04/2016"),
		max: new Date("07/29/2016")
	},
	"#cntlDatePicker"
);

<input id="cntlDatePicker" />

Special Dates

Demonstrates how you can mark a date as a special date so it will stand out.

new ac.calendars.DatePicker({ renderDayCell: specialRenderDayCell }, "#cntlDatePicker");

function specialRenderDayCell(args) {
	if (args.date.getDate() === 7) {
		let span = document.createElement("span");
		span.setAttribute("class", "a-icons a-highlight doctor");
		args.element.firstElementChild.setAttribute("title", "Doctors Appointment");
		args.element.setAttribute("title", "Doctors Appointment");
		args.element.appendChild(span);
	}
	if (args.date.getDate() === 11) {
		let span = document.createElement("span");
		span.setAttribute("class", "a-icons a-highlight pto");
		args.element.firstElementChild.setAttribute("title", "PTO");
		args.element.setAttribute("title", "PTO");
		args.element.appendChild(span);
	}
	if (args.date.getDate() === 23) {
		let span = document.createElement("span");
		span.setAttribute("class", "a-icons a-highlight vacation");
		args.element.firstElementChild.setAttribute("title", "Vacation");
		args.element.setAttribute("title", "Vacation");
		args.element.appendChild(span);
	}
}

<input id="cntlDatePicker" />

span.a-icons.a-highlight.doctor:before {
	color: #ff5b57;
}
span.a-icons.a-highlight.pto:before {
	color: #8753de;
}
span.a-icons.a-highlight.vacation:before {
	color: #f59c1a;
}

Disabled Dates

Demonstrates how you can disable specific dates in the calendar using the renderDayCell event.

new ac.calendars.DatePicker({ renderDayCell: renderDayCell }, "#cntlDatePicker");

function renderDayCell(args) {
	if (args.date.getDay() === 0 || args.date.getDay() === 3 || args.date.getDay() === 6) {
		args.isDisabled = true;
	}
}

<input id="cntlDatePicker" />

Format

Demonstrates how you can change the format of the selected date.

new ac.calendars.DatePicker({ value: new Date(), format: "dd-MMM-yy" }, "#cntlDatePicker");

<input id="cntlDatePicker" />