Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save bogomolov-dev/9908102 to your computer and use it in GitHub Desktop.
Save bogomolov-dev/9908102 to your computer and use it in GitHub Desktop.
Tage im jQuery UI Datepicket hervorheben - http://www.starstormdesign.de/?p=485
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
// Unser Code
</script>
$(document).ready(function() {
var events = [
'2014-04-02',
'2014-04-07',
'2014-04-15',
'2014-04-30',
];
$('#date').datepicker({
dateFormat: "yy-mm-dd"
});
});
$('#date').datepicker({
dateFormat: "yy-mm-dd",
beforeShowDay: function (date) {
// Der Tag, der im Datepicker gerendert wird.
// Dieses Datum munn in unser Datumsformat konfertiert werden.
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var year = date.getFullYear();
var formated_date = year + '-' + month + '-' + day;
// Wenn der aktuelle Tag im Datepicker in der Liste der Events vorkommt,
// dann ist der Tag auswählbar, erhält die Klasse "ui-state-active" und
// bekommt einen Tooltip für die Erläuterung
if ($.inArray(formated_date, events) !== -1) {
return [true, 'ui-state-active', 'An diesem Tag haben wir Veranstaltungen.'];
}
// Ist der Tag nicht in dem Array mit den Events, dann ist dieser nicht
// auswählbar, und erhält einen Tooltip mit dem Hinweis darauf.
return [false, '', 'An diesem Tag haben wir leider keine Veranstaltungen.'];
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment