jQuery UI Datepicker Bindung

Question

Ich bin neu in der JavaScript-und JQuery-Konzept, ich möchte nur ein Datepicker für den Zeitraum bekommen. Ich habe die js und jsp mit 2 Feldern wie: zu "und" von, als separate Dateien und ich binde die js-Datei in der jsp-Seite mit data -bind. Aber ich möchte wissen, wie man diese Methode aufruft (um die Datumsauswahl), wenn ich auf dem Textfeld klicken und die Werte erhalten, die ausgewählt werden (Start- und Enddatum) aus den var Daten? die Funktion in der JQuery-Website gegeben ist

$(function() {  

var dates = $("#from, #to").datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 3, 
      onSelect: function(selectedDate) { 
       var option = this.id == "from" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat, 
         selectedDate, instance.settings); 
       dates.not(this).datepicker("option", option, date); 
      } 
     }); 
    }); 

---

Vielen Dank für Ihre Eingabe, Ja, ich habe die genaue ID in der JSP-Datei und ich habe das Skript als Modell in einer separaten JS-Datei und ich binde das Modell mit Datenbindung in der JSP. Und ich fügte das Skript wie Sie erwähnt, aber die Methode überhaupt nicht genannt, so änderte ich die JSP als

und ich änderte die Funktion wie unten und ich rief die Kalendermethode auf das Click-Ereignis der beiden Textfelder, die Methode wird aufgerufen, aber ich bin nicht in der Lage, die von und bis Datum zu bekommen, keine Ahnung, wie man von den Var-Daten kommt. Ich brauche das von Datum in einem ko.observal() und das Enddatum too.Highly appriciate Ihre Hilfe

calender: function(){ 
console.log("in calender"); 
var dates = $("#from, #to").datepicker({ 
defaultDate: new Date(), 
changeMonth: true, 
numberOfMonths: 1, 
onSelect: function(selectedDate) { 
var option = this.id == "from" ? "minDate" : "maxDate", 
instance = $(this).data("datepicker"), 
date = $.datepicker.parseDate(
instance.settings.dateFormat || 
$.datepicker._defaults.dateFormat, 
selectedDate, instance.settings); 
dates.not(this).datepicker("option", option, date); 
} 
}); 
}, 

Answer 1

#from und #to sind die IDs der Textfelder zu erhalten. Wenn Sie haben im Anschluss an die in Ihrem Code wird es autmatically die Datumsauswahl anzeigen, wenn Sie in einem der Textfelder klicken:

HTML

<label for="from">From</label> 
<input type="text" id="from" name="from"/> 
<label for="to">to</label> 
<input type="text" id="to" name="to"/> 

Javascript

$(function() { 
    var dates = $("#from, #to").datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 3, 
      onSelect: function(selectedDate) { 
       var option = this.id == "from" ? "minDate" : "maxDate", 
        instance = $(this).data("datepicker"), 
        date = $.datepicker.parseDate(
         instance.settings.dateFormat || 
         $.datepicker._defaults.dateFormat, 
         selectedDate, instance.settings); 
       dates.not(this).datepicker("option", option, date); 
      } 
     }); 
    }); 

Sie tun nichts anderes tun müssen, weil jQuery sich um den Rest kümmert. Ohne Ihren HTML-Code und ohne weitere Informationen zu sehen, würde ich annehmen, dass Ihre IDs nicht übereinstimmen.