Kann ich Datepicker für die Klasse und dann für das gleiche Element verwenden?

Question

Ich habe drei Eingabefelder, die Datumsauswahl verwenden:

<input id="issue_date" name="issue_date" class="form-control date_class" type="text" required /> 
    <input id="expiry_date" name="expiry_date" class="form-control date_class" type="text" required /> 

Kann ich jquery wie folgt verwenden (der Code, den ich versuchen, auf IDs anzuwenden scheint nicht zu funktionieren):

$(".date_class").datepicker({ 
    monthNamesShort: [ "Jan", "Feb", "Mart", "Apr", "Maj", "Jun", "Jul", "Avg", "Sep", "Okt", "Nov", "Dec" ], 
    changeMonth: true, 
    changeYear: true, 
    dateFormat: "dd-mm-yy" 
    }); 

    $("#issue_date").datepicker({ 
    yearRange: "-110:+0", 
    maxDate: "today" 
    }); 

    $("#expiry_date").datepicker({ 
    minDate: "today" 
    }); 

I Erkenne, dass ich nur die ID-Selektoren verwenden kann, aber ich wollte den Code kürzen. Mache ich etwas falsch oder kann ich es auf diese Weise nicht tun?

Answer 1

Sie können das Plugin nur einmal initialisiert werden.

Eine Lösung ist

$ .extend() zu erstellen, um die Optionen wie

var opts = { 
 
    monthNamesShort: ["Jan", "Feb", "Mart", "Apr", "Maj", "Jun", "Jul", "Avg", "Sep", "Okt", "Nov", "Dec"], 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    dateFormat: "dd-mm-yy" 
 
}; 
 

 
$("#issue_date").datepicker($.extend({}, opts, { 
 
    yearRange: "-110:+0", 
 
    maxDate: "today", 
 
})); 
 

 
$("#expiry_date").datepicker($.extend({}, opts, { 
 
    minDate: "today" 
 
}));

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" /> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<input id="issue_date" name="issue_date" class="form-control date_class" type="text" required /> 
 
<input id="expiry_date" name="expiry_date" class="form-control date_class" type="text" required />

---

Ein weiterer Grund ist zu verwenden, um die Optionen-Methode verwendet

$(".date_class").datepicker({ 
 
    monthNamesShort: ["Jan", "Feb", "Mart", "Apr", "Maj", "Jun", "Jul", "Avg", "Sep", "Okt", "Nov", "Dec"], 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    dateFormat: "dd-mm-yy" 
 
}); 
 

 
$("#issue_date").datepicker('option', { 
 
    yearRange: "-110:+0", 
 
    maxDate: "today" 
 
}); 
 

 
$("#expiry_date").datepicker('option', { 
 
    minDate: "today" 
 
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" /> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<input id="issue_date" name="issue_date" class="form-control date_class" type="text" required /> 
 
<input id="expiry_date" name="expiry_date" class="form-control date_class" type="text" required />