Wie umschreiben Sie diesen Datepicker-Code?

Question

Ich benutze diese library und ich habe einige JS-Code für die Initialisierung:

$(function() { 
    $('#datetimepicker2').datetimepicker({ 
     language: 'en', 
     maskInput: true, 
     pickTime: false 
    }); 
    $('#datetimepicker3').datetimepicker({ 
     language: 'en', 
     maskInput: true, 
     pickTime: false 
    }); 
    $('#datetimepicker4').datetimepicker({ 
     language: 'en', 
     pickDate: false, 
     maskInput: true, 
     pickSeconds: false, 
     pick12HourFormat: true 
    }); 
    $('#datetimepicker5').datetimepicker({ 
     language: 'en', 
     pickDate: false, 
     maskInput: true, 
     pickSeconds: false, 
     pick12HourFormat: true  
    }); 
}); 

ich es nicht, weil mögen, wenn ich 10 weitere Elemente werde ich 50 Saiten wiederholt Code haben, so das, was ich will tun, ist dies:

var DateTimePicker = { 
    constructor: function(id, language, maskInput,pickTime,pickSeconds,pick12HourFormat){ 
     this.language = language; 
     this.maskInput = maskInput; 
     this.pickTime = pickTime; 
     this.pickSeconds = pickSeconds; 
     this.pick12HourFormat = pick12HourFormat; 
     this.id = id; 
     return this; 
    }, 
    initialization: function() { 
     document.getElementById(this.id).datetimepicker({ 
      language: this.language, 
      maskInput: this.maskInput, 
      pickTime: this.pickTime, 
      pickSeconds: this.pickSeconds, 
      pick12HourFormat: this.pick12HourFormat 
     }); 
    } 

}; 
var firstDatepicker, secondDatepicker, firstTimepicker, secondTimepicker; 
firstDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker2','en', true, false, false, false); 
secondDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker3','en', true, false, false, false); 
firstTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker4','en', true, true, false, true); 
secondTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker5','en', true, true, false, true); 

firstDatepicker.initialization(); 
secondDatepicker.initialization(); 
firstTimepicker.initialization(); 
secondTimepicker.initialization(); 

Das gibt mir eine Fehlermeldung:

Uncaught TypeError: Cannot read property 'datetimepicker' of null

Also ich denke, ich versuche, etwas wirklich seltsam zu tun. Ich vermute, dass datetimepicker ein Objekt ist, das ich versuche, falsch zu manipulieren. Könnten Sie mir bitte dabei helfen, ich lerne gerade JS.

Answer 1

Der Fehler, den Sie erhalten, ist, weil Sie datetimepicker() auf einem DOMelement aufrufen. Verwenden Sie stattdessen $(this.id).datetimepicker().

Das gesagt, würde ich argumentieren, dass Ihre "vereinfachte" Version tatsächlich komplexer und schwer zu pflegen ist.

Wenn Sie sich die Einstellungen ansehen, die Sie verwenden, haben Sie wirklich nur zwei verschiedene Einstellungen; diejenigen mit pickSeconds und pick12HourFormat und solche ohne. Als solche könnten Sie einfach zwei Klassen verwenden, indem Sie die entsprechende auf den gewünschten Datumsauswahlpunkt setzen. Versuchen Sie folgendes:

$(function() { 
    $('.simple-datepicker').datetimepicker({ 
     language: 'en', 
     maskInput: true, 
     pickTime: false 
    }); 

    $('.adv-datepicker').datetimepicker({ 
     language: 'en', 
     pickDate: false, 
     maskInput: true, 
     pickSeconds: false, 
     pick12HourFormat: true  
    }); 
}); 

Offensichtlich sind die Klassennamen angepasst werden können, wie Sie benötigen, aber Sie können jetzt den obigen Code für eine unendliche Anzahl von Kalenderwerkzeug in Ihrer Seite verwenden, solange sie die richtige Klasse zu ihnen hinzugefügt .