jQuery datepicker

[webrconorg]

Hallo liebe Forengemeinde,

ich bin gerade dabei mich etwas mehr mit Javascript und jQuery zu beschäftigen. Nun soweit verstehe ich so einiges und kann mit mein Wissen bereits einige Dinge umsetzen. Nun steitere ich an einer Kopfsache.

Ich habe auf meiner Webseite 3 Verschiedene Formularfelder mit den sogenannten "datepicker" von jQuery. Nun habe ich allerdings bemerkt, das jedes Formularfeld sein eigenen Picker braucht. Ich habe mir bisher diesen Code zusammengebastelt und finde diesen sehr unprofessionell, zumal er riesig an Platz wegnimmt. Kann man diesen Code optimieren bzw. vereinfachen?

// datepicker
        $(function() {
	        $("#datepicker_search").datepicker({
	          showOn: 'button',
	          buttonImage: './templates/{$SmartyTheme}/images/icon_32_calendar.png',
	          buttonImageOnly: true,
            constrainInput: false,
            showWeek: false,
            monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
            monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'],
            dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
            dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            dateFormat: 'yy-mm',
            maxDate: '+0m +0w',
            buttonText: 'nach Datum suchen'
	        });
          $("#datepicker_entry").datepicker({
	          showOn: 'button',
	          buttonImage: './templates/{$SmartyTheme}/images/icon_32_calendar.png',
	          buttonImageOnly: true,
            constrainInput: true,
            showWeek: false,
            monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
            monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'],
            dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
            dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            dateFormat: 'dd.mm.yy',
            maxDate: '+0m +0w'
	        });
          $("#datepicker_exit").datepicker({
	          showOn: 'button',
	          buttonImage: './templates/{$SmartyTheme}/images/icon_32_calendar.png',
	          buttonImageOnly: true,
            constrainInput: true,
            showWeek: false,
            monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
            monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'],
            dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
            dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            dateFormat: 'dd.mm.yy',
            minDate: '+0m +0w'
	        });
        });

[monolith]

DRY im Zeitraffer:
1. DRY = Don't Repeat Yourself (= Wiederhol dich nicht)
Bedeutet: Keine unnötigen Wiederholungen von Code (kann man auch noch weiter fassen)
2. Die datepicker()-Methode musst du zwar verschiedenen Elementen zuweisen. Aber warum nicht gleich alle auf einmal?

$("#datepicker_search, #datepicker_entry, #datepicker_exit").datepicker({

Das geht, weil jQuery CSS-Selektoren verfügbar macht.
3. Dementsprechend könntest du auch diesen Elementen eine gemeinsame Klasse zuweisen und sie darüber noch einfacher und flexibler ansprechen:

$(".datepicker").datepicker({

4. Selbst wenn du nicht wusstest, das einmal $ reicht - du hättest dennoch das Argument - also das hier:

{
	          showOn: 'button',
	          buttonImage: './templates/{$SmartyTheme}/images/icon_32_calendar.png',
	          buttonImageOnly: true,
            constrainInput: true,
            showWeek: false,
            monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
            monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'],
            dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
            dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
            dateFormat: 'dd.mm.yy',
            minDate: '+0m +0w'
	        }

in eine eigene Variable auslagern und dann immer nur diese Variable übergeben können:

var arg = ... // Das Zeug der Variable zuweisen.

$("#datepicker_search").datepicker(arg);
$("#datepicker_entry").datepicker(arg);
$("#datepicker_exit").datepicker(arg);

NACHTRAG:
Es gibt also noch feine Unterschiede zwischen den Argumenten. Okay, Lösung 4 kann das aber ab. Du nimmst eine Variante als Ausgangsbasis und modifizierst dann eben nur die Eigenschaften die sich unterscheiden.

Hier ein Lösungsvorschlag:

        var arg = {
                  showOn: 'button',
                  buttonImage: './templates/{$SmartyTheme}/images/icon_32_calendar.png',
                  buttonImageOnly: true,
                constrainInput: false,
                showWeek: false,
                monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
                monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'],
                dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
                dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                dateFormat: 'yy-mm',
                maxDate: '+0m +0w',
                buttonText: 'nach Datum suchen'
                };

        var arg2 = {}; // Neues, leeres Objekt arg2 erzeugen
        jQuery.extend(arg2, arg); // arg nach arg2 kopieren (ggf. deep copy machen lassen)
        arg2.dateFormat = 'dd.mm.yy'; // Eigenschaft dateFormat bei arg3 ändern


$("#datepicker_search").datepicker(arg);
$("#datepicker_entry").datepicker(arg2);
$("#datepicker_exit").datepicker(arg2); // (Das Argument hier scheint das selbe zu sein wie arg2)

Siehe auch: http://api.jquery.com/jquery.extend/

[jspit]

Anstelle das Objekt einer Variable zuzuweisen und das Objekt bei Bedarf zu modifizieren,
kann ich auch eine namenlose Funktion erstellen, welche mir das Objekt liefert.
Dies hat den Vortieil, ich kann das Objekt bequem mit Funktionsparametern gestalten. Das Beispiel hier dient als Ansatz:

var argfkt = function(buttonImage){
  return {
    showOn: 'button',
    buttonImage: './templates/{$SmartyTheme}/'+buttonImage,
    buttonImageOnly: true,
  }
}

Dies kann ich dann einer Variable zuweisen oder auch meinem datepicker direkt mitgeben:

var arg = argfkt('images/icon_32_calendar.png');

$("#datepicker_search").datepicker(argfkt('images/icon_77_calendar.png'));

LG jspit

[monolith]

Ja stimmt, ist eine bessere Lösung als die mit den Objekt-Literal.