Very simple datepicker using jQuery.

datepicker.js

function Datepicker($input) {
	var datepicker = this;
	
	datepicker.$input = $input;
	
	$input.on('click', function(event) {
		event.stopPropagation();
	}).on('focus', function() {
		datepicker.open();
	});
}

Datepicker.prototype.open = function() {
	var datepicker = this;
	
	datepicker.close();
	
	var $datepicker = $('<div id="datepicker"><div class="year"><i class="fa fa-caret-left"></i><i class="fa fa-caret-right"></i><span></span></div><div class="month"><i class="fa fa-caret-left"></i><i class="fa fa-caret-right"></i><span></span></div><table><thead><tr><th>M</th><th>D</th><th>M</th><th>D</th><th>F</th><th>S</th><th>S</th></tr></thead><tbody></tbody></table></div>');
	
	var selected = Datepicker.stringToDate(datepicker.$input.val());
	var inputOffset = datepicker.$input.offset();
	
	$datepicker.css({
		position: 'absolute',
		top: inputOffset.top + datepicker.$input.outerHeight(),
		left: inputOffset.left,
		zIndex: 99
	});
	
	$datepicker.on('click', function(event) {
		event.stopPropagation();
	});
	
	$datepicker.appendTo('body');
	
	$datepicker.find('.year .fa-caret-left').on('click', function() {
		var year = $datepicker.data('year') - 1;
		var month = $datepicker.data('month');
		
		if(selected !== false && year == selected.getFullYear() && month == selected.getMonth()) {
			datepicker.update(year, month, selected.getDate());
		} else {
			datepicker.update(year, month);
		}
	});
	$datepicker.find('.year .fa-caret-right').on('click', function() {
		var year = $datepicker.data('year') + 1;
		var month = $datepicker.data('month');
		
		if(selected !== false && year == selected.getFullYear() && month == selected.getMonth()) {
			datepicker.update(year, month, selected.getDate());
		} else {
			datepicker.update(year, month);
		}
	});
	$datepicker.find('.month .fa-caret-left').on('click', function() {
		var year = $datepicker.data('year');
		var month = $datepicker.data('month') - 1;
		
		while(month < 0) {
			month += 12;
			year--;
		}
		
		if(selected !== false && year == selected.getFullYear() && month == selected.getMonth()) {
			datepicker.update(year, month, selected.getDate());
		} else {
			datepicker.update(year, month);
		}
	});
	$datepicker.find('.month .fa-caret-right').on('click', function() {
		var year = $datepicker.data('year');
		var month = $datepicker.data('month') + 1;
		
		while(month >= 12) {
			month -= 12;
			year++;
		}
		
		if(selected !== false && year == selected.getFullYear() && month == selected.getMonth()) {
			datepicker.update(year, month, selected.getDate());
		} else {
			datepicker.update(year, month);
		}
	});
	
	if(selected !== false) {
		datepicker.update(selected.getFullYear(), selected.getMonth(), selected.getDate());
	} else {
		var date = new Date();
		datepicker.update(date.getFullYear(), date.getMonth());
	}
	
	$(document).one('click.datepicker', function() {
		datepicker.close();
	});
};

Datepicker.prototype.close = function() {
	var datepicker = this;
	
	$('#datepicker').remove();
	
	$(document).off('click.datepicker');
};

Datepicker.prototype.update = function(year, month, day) {
	var datepicker = this;
	
	if(typeof day == 'undefined') {
		day = null;
	}
	
	var $datepicker = $('#datepicker');
	
	$datepicker.data('year', year);
	$datepicker.data('month', month);
	
	$datepicker.find('.year span').text(year);
	$datepicker.find('.month span').text(Datepicker.months[month]);
	
	$datepicker.find('tbody tr').remove();
	
	var firstDayOfMonth = new Date(year, month, 1);
	var lastDayOfMonth = new Date(year, month + 1, 0);
	
	var $row = $('<tr></tr>');
	for(var index = 0; index < firstDayOfMonth.getDay(); index++) {
		$row.append('<td></td>');
	}
	
	for(var date = 1; date < lastDayOfMonth.getDate(); date++) {
		var $day = $('<td class="day">' + date + '</td>');
		if(day !== null && day === date) {
			$day.addClass('selected');
		}
		$row.append($day);
		
		if($row.children().size() >= 7) {
			$datepicker.find('tbody').append($row);
			$row = $('<tr></tr>');
		}
	}
	
	if($row.children().size()) {
		while($row.children().size() < 7) {
			$row.append('<td></td>');
		}
		$datepicker.find('tbody').append($row);
	}
	
	$datepicker.find('td.day').on('click', function() {
		var day = $(this).text();
		var month = $datepicker.data('month');
		var year = $datepicker.data('year');
		datepicker.$input.val(Datepicker.dateToString(new Date(year, month, day, 0, 0, 0, 0))).change();
		datepicker.close();
	});
};

Datepicker.dateToString = function(date) {
	var day = date.getDate();
	var month = date.getMonth() + 1;
	var year = date.getFullYear();
	
	if(day < 10) {
		day = '0' + day;
	}
	if(month < 10) {
		month = '0' + month;
	}
	
	var string = day + '. ' + month + '. ' + year;
	
	return string;
};

Datepicker.stringToDate = function(string) {
	var parts = string.split('.');
	
	if(parts.length !== 3) {
		return false;
	}
	
	var day = 1 * parts[0];
	var month = 1 * parts[1] - 1;
	var year = 1 * parts[2];
	
	if(isNaN(day) || isNaN(month) || isNaN(year)) {
		return false;
	}
	
	var date = new Date(year, month, day, 0, 0, 0, 0);
	
	return date;
};

Datepicker.months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];