Mit jQuery mobile den Datepicker verwenden

Wie so oft ist an sich alles ganz einfach. Wenn man die Angelegenheit dann genauer betrachtet, ist es doch nicht ganz so einfach wie Anfangs gedacht. Einen einfachen Datepicker zu verwenden ist tatsächlich einfach.

<input type="text" data-role="date">

Und schon hat man einen wunderbaren Kalender der auf mobilen Geräte es ermöglicht komfortabel ein Datum auszuwählen. Ein wenig mühsame wird die Geschichte wenn man Optionen und Methoden verwenden  möchte, um den Datepicker zu modifizieren.

Zu allererst müssen gewisse externe Datei eingebunden werden um das Datepicker Widget von jQuery mobile verwenden zu können.

<link rel="stylesheet" href="styles/jquery.mobile.datepicker.css" />
 <link rel="stylesheet" href="styles/jquery.mobile.datepicker.theme.css" />
 <script src="js/external/jquery-ui/datepicker.js"></script>
 <script src="js/jquery.mobile.datepicker.js"></script>
 <script>
 $(function(){
     $( ".date-input-css" ).datepicker();
 })
 </script>

Die hier eingebundenen Dateien kann man unter https://github.com/arschmitz/jquery-mobile-datepicker-wrapper herunterladen. Sollte der Link nicht mehr aktuell sein, am besten einfach auf der jQuery mobile Seite nachsehen.

Ps. Leider ändert sich immer alles. Sämtliche Aussagen in diesem Beitrag beziehen sie auf die Version 1.4.5 von jQuery mobile.