Wenden Sie jQuery datepicker auf mehrere Instanzen an

70

Ich habe ein jQuery-Datumsauswahl-Steuerelement, das für eine Instanz einwandfrei funktioniert, bin mir jedoch nicht sicher, wie ich es für mehrere Instanzen zum Laufen bringen kann.

<script type="text/javascript">
    $(function() {
        $('#my_date').datepicker();
    });
</script>

<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>

Ohne die For Each-Schleife funktioniert es einwandfrei. Wenn jedoch mehr als ein Element in der "MyRecords" -Sammlung vorhanden ist, erhält nur das erste Textfeld eine Datumsauswahl (was sinnvoll ist, da es an die ID gebunden ist). Ich habe versucht, dem Textfeld eine Klasse zuzuweisen und Folgendes anzugeben:

$('.my_class').datepicker();

Während dies überall eine Datumsauswahl anzeigt, aktualisieren sie alle das erste Textfeld.

Was ist der richtige Weg, um diese Arbeit zu machen?

javascript jquery jquery-ui gfrizzle
quelle
Welche Sprache ist das <% blah%> Zeug?
docwhat
Das ist VB in einer ASP.NET-Seite - nur eine schnelle Möglichkeit, den Punkt der Frage zu veranschaulichen.
Gfrizzle
Stellen Sie sicher, dass die Eingabefelder nicht vorhanden disabledsind. Der Datepicker wird für Eingabefelder mit dem disabledAttribut
Bobobobo

Antworten:

124

html:

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

Skript:

$('.datepick').each(function(){
    $(this).datepicker();
});

(Pseudo-Codierung etwas, um es einfacher zu halten)

SeanJA
quelle
2
Es sieht so aus, als ob das Herz meines Problems darin besteht, dass alle Textfelder dieselbe ID haben, sodass jede Datumsauswahl das erste Textfeld aktualisiert. Ihr Beispiel leidet nicht darunter, also funktioniert es. Wie kann ich erreichen, dass die IDs in einer Schleife unterschiedlich sind?
Gfrizzle
14
Duh, lass die Textfelder nicht die gleiche ID haben. Manchmal muss man sich für eine Weile von einem Problem entfernen, damit die offensichtliche Antwort in die Luft sprudelt.
Gfrizzle
4
Würde es nicht $(".datepick").datepicker();funktionieren, wenn Sie unterschiedliche IDs in den Eingabefeldern haben?
Rapcal
Ich hatte keine IDs an den Eingängen, aber die gleiche Klasse. Funktioniert gut auf Chrome und FF, aber nicht auf IE. Um das zu beheben, bekomme ich nur die Eingangs-IDs
Will
Ich habe Datepicker mithilfe des CSS-Klassennamens und des onSelectEreignishandlers an einige HTML-Textfelder angehängt. Ich muss den Namen der Selektorklasse kennen, auf dem der aktuelle Vorgang onSelectstattgefunden hat. Auf die Elemente werden zwei andere Klassen angewendet als die, die ich zum Anhängen des Datepickers verwende
techie_28
10

Ich hatte gerade das gleiche Problem.

Die korrekte Verwendung der $('.my_class').datepicker();Datumsauswahl ist , Sie müssen jedoch sicherstellen, dass Sie nicht mehreren Datumsauswahlern dieselbe ID zuweisen.

Shuo
quelle
4

Die offensichtliche Antwort wäre, verschiedene IDs zu generieren, eine separate ID für jedes Textfeld, so etwas wie

[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>

Ich kenne ASP.net nicht, deshalb habe ich nur einen allgemeinen C-ähnlichen Syntaxcode in eckigen Klammern hinzugefügt. Die Übersetzung in tatsächlichen ASP.net-Code sollte kein Problem sein.

Dann müssen Sie einen Weg finden, um so viele zu generieren

$('#my_date[i]').datepicker();

als Artikel in Ihrem Model.MyRecords. Wiederum befindet sich in eckigen Klammern Ihr Zähler, sodass Ihre jQuery-Funktion ungefähr so ​​aussehen würde:

<script type="text/javascript">
    $(function() {
        $('#my_date1').datepicker();
        $('#my_date2').datepicker();
        $('#my_date3').datepicker();
        ...
    });
</script>
evilpenguin
quelle
4 
<html>
<head>
 <!-- jQuery JS Includes -->
 <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.core.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>

 <!-- jQuery CSS Includes -->
 <link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />

 <!-- Setup Datepicker -->
 <script type="text/javascript"><!--
  $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'jquery/images/calendar.gif',
    buttonImageOnly: true
   });
  });
 --></script>
</head>
<body>

 <!-- Each input field needs a unique id, but all need to be datepicker -->
 <p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
 <p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
 <p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>

</body>
</html>
Codeguru
quelle
3

Es gibt eine einfache Lösung.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>      
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script> 
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/flexcroll.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="../js/JScript.js"></script>
        <title>calendar</title>    
        <script type="text/javascript"> 
            $(function(){$('.dateTxt').datepicker(); }); 
        </script> 
    </head>
    <body>
        <p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
        <p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
        <p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
    </body>
</html>
Deepak Singh
quelle
2

Wenn Sie Datepicker zur Laufzeit hinzufügen, müssen Sie überprüfen, ob er bereits Datepicker enthält. Entfernen Sie dann zuerst die Klasse hasDatepicker und wenden Sie datePicker darauf an.

function convertTxtToDate() {
        $('.dateTxt').each(function () {
            if ($(this).hasClass('hasDatepicker')) {
                $(this).removeClass('hasDatepicker');
            } 
             $(this).datepicker();
        });
    }
Harshit Singh
quelle
1

Eine kleine Notiz zur SeanJA-Antwort.

Interessanterweise, wenn Sie KnockoutJS und jQuery zusammen verwenden, sind die folgenden Eingaben mit unterschiedlichen IDs , aber mit derselben beobachtbaren Datenbindung :

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />

bindet einen (gleichen) Datepicker an beide Eingänge (obwohl sie unterschiedliche IDs oder Namen haben).

Verwenden Sie separate Observables in Ihrem ViewModel , um einen separaten Datepicker an jede Eingabe zu binden:

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />

Initialisierung:

$('.datepick').each(function(){
    $(this).datepicker();
});
user1572418
quelle
1
In Kombination mit KnockoutJS sollten Sie niemals so arbeiten. Es ist viel besser und sauberer, wenn Sie Ihren Datepicker mit einem BindingHandler binden.
Gigi2m02
0

Die Lösung besteht darin, unterschiedliche IDs zu haben, wie viele von Ihnen angegeben haben. Das Problem liegt noch tiefer im Datepicker. Bitte korrigieren Sie mich, aber der Datepicker hat keine Wrapper-ID - "ui-datepicker-div". Dies ist unter http://jqueryui.com/demos/datepicker/#option-showOptions im Thema zu sehen .

Gibt es eine Option, mit der diese ID in eine Klasse geändert werden kann? Ich möchte dieses Skript nicht nur für diese eine offensichtliche Lösung abspalten müssen !!

Alex Grande
quelle
Dies kann nur der "Beispiel" -Teil des Beispielcodes sein. Ich glaube nicht, dass es tatsächlich ein Div mit dieser ID generiert. Wenn Sie sicherstellen, dass jedes meiner Zielobjekte eine eindeutige ID hat, funktioniert alles wie erwartet.
Gfrizzle
0

So ändern Sie die Verwendung der Klasse anstelle der ID

<script type="text/javascript"> 
    $(function() { 
        $('.my_date1').datepicker(); 
        $('.my_date2').datepicker(); 
        $('.my_date3').datepicker(); 
        ... 
    }); 
</script>
Aehandasa
quelle
Und sicherlich würden wir keine alternativen Ansätze wollen ... obwohl ich zugebe, dass dies zwar funktionieren würde, ich es aber nicht verwenden würde. Besonders nachdem man die akzeptierte Antwort gesehen hat - aber für jeden seine eigene.
Brichins
0

Ich hatte das gleiche Problem, stellte jedoch schließlich fest, dass es ein Problem mit der Art und Weise war, wie ich das Skript von einem ASP-Webbenutzersteuerelement aus aufrief. Ich habe verwendet ClientScript.RegisterStartupScript(), aber vergessen, dem Skript einen eindeutigen Schlüssel zu geben (das zweite Argument). Da beiden Skripten derselbe Schlüssel zugewiesen wurde, wurde nur das erste Feld tatsächlich in einen Datepicker konvertiert. Deshalb habe ich beschlossen, die ID des Textfelds an den Schlüssel anzuhängen, um ihn eindeutig zu machen:

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
kad81
quelle
0

Ich hatte ein ähnliches Problem beim dynamischen Hinzufügen von Datepicker-Klassen. Die Lösung, die ich gefunden habe, bestand darin, Zeile 46 von datepicker.js zu kommentieren

// this.element.on('click', $.proxy(this.show, this));
Mozgras
quelle
0

In meinem Fall hatte ich meinen <input>Elementen keine ID gegeben und verwendete eine Klasse, um den Datepicker wie in SeanJAs Antwort anzuwenden, aber der Datepicker wurde nur auf den ersten angewendet. Ich stellte fest, dass JQuery automatisch eine ID hinzufügte und diese in allen Elementen dieselbe war, was erklärte, warum nur die erste Datumsauswahl getroffen wurde.

Jamsandwich
quelle