Datepicker ohne Kalenderblatt

Der Datepicker des jQuery-Frameworks ist eine wahre Wohltat, um es Benutzern zu ermöglichen, ein Datum im gewünschten Format eingeben zu lassen. Vor allem lässt sich die Funktion schnell ganz nach Wunsch anpassen. Allerdings: Manchmal braucht man einen Datepicker nur für Monat und Jahr, sprich auf das Kalenderblatt würde man gerne verzichten. Dies ist über die Standardoptionen jedoch nicht so ohne Weiteres möglich.

Zunächst wird ein input.-Feld erzeugt, das später mit der Funktionalität belegt werden soll:

<label for="zeitraum">Zeitraum:</label>
<input type="text" name="zeitraum" id="zeitraum" />

Danach kann schon das jQuery-Skript eingefügt werden:

<script> 
$(function() {
   monthDatepicker();
   function updateCalendar () {
       $('#ui-datepicker-div').toggleClass ('hidden', true);
   };
   function monthDatepicker() {
       $( "#zeitraum" ).datepicker( {
       changeMonth : true,
       changeYear : true,
       showButtonPanel : true,
       dateFormat : 'mm.yy',
       monthNames : ['Januar', 'Februar', 'M&auml;rz', 'April', (...)],
       monthNamesShort : ['Jan', 'Feb', 'Mrz', 'Apr', (...)],
       nextText : 'weiter',
       prevText : 'zur&uuml;ck',
       closeText : 'Datum setzen',
       beforeShow : updateCalendar ,
       onClose : function(dateText, inst) {
           var month = inst.selectedMonth;
           var year  = inst.selectedYear;
           $(this).datepicker('setDate', new Date(year, month , 1));
       }                                
       })
   };
});
</script>

Im Einzelnen: Zunächst wird die Funktion über den Aufruf von „monthDatepicker()“ initialisiert. Die Funktion „updateCalendar()“ sorgt für das korrekte ein- und ausblenden des Datepickers.

Die eigentliche Funktion „monthDatepicker()“ wird auf das Element mit ID-Attribut  „zeitraum“ gesetzt. Hier werden einige Optionen gesetzt:

  • Select-Felder für Monats- und Jahreswechsel werden eingeblendet
  • Schaltflächen werden unter dem Datepicker zur Datumsübernahme angezeigt
  • Format soll „Monat.Jahreszahl“ sein
  • Bezeichnungen für die einzelnen Monate in Lang- und Kurzschreibweise
  • Alt-Texte für Blättern-Schaltflächen
  • Text für Bestätigungs-Schaltfläche
  • Abschließende Funktionalität zur Übernahme von Monat und Jahr im input-Feld

Zusätzlich muss noch eine Ergänzung im Stylesheet vorgenommen werden:

.hidden .ui-datepicker-calendar, .ui-datepicker-current {
    display: none;
}

Damit wird das Kalenderblatt sowie die Schaltfläche „Heute“ unter dem Datepicker ausgeblendet:

Schwerpunkt: ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.