Created
April 1, 2014 05:14
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
var events = [ | |
'2014-04-02', | |
'2014-04-07', | |
'2014-04-15', | |
'2014-04-30', | |
]; | |
$('#date').datepicker({ | |
dateFormat: "yy-mm-dd" | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('#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