it-swarm.com.de

Wenden Sie jQuery Datepicker auf mehrere Instanzen an

Ich habe ein jQuery-Datumsauswahl-Steuerelement, das für eine einmalige Instanz gut funktioniert, aber ich bin nicht sicher, wie es für mehrere Instanzen funktioniert.

<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 sich jedoch mehr als ein Element in der Sammlung "MyRecords" befindet, wird nur das erste Textfeld mit einem Datumsauswahlfeld versehen (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 jedoch überall eine Datumsauswahl zeigt, wird das erste Textfeld alle aktualisiert.

Was ist der richtige Weg, um dies zu erreichen?

68
gfrizzle

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-Code, um es einfacher zu halten)

114
SeanJA

Ich hatte gerade das gleiche Problem.

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

10
Shuo

Die naheliegende Antwort wäre, verschiedene IDs zu generieren, eine separate ID für jedes Textfeld oder ähnliches

[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, also habe ich nur allgemeinen C-artigen Syntaxcode in eckigen Klammern hinzugefügt. Das Übersetzen in aktuellen ASP.net-Code sollte kein Problem sein.

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

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

als Artikel in Ihrem Model.MyRecords. In eckigen Klammern steht wiederum Ihr Zähler, also würde Ihre jQuery-Funktion so aussehen:

<script type="text/javascript">
    $(function() {
        $('#my_date1').datepicker();
        $('#my_date2').datepicker();
        $('#my_date3').datepicker();
        ...
    });
</script>
4
evilpenguin
<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>
4
codeguru

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>
3
Deepak Singh

Beim Hinzufügen von datepicker zur Laufzeit generierten Eingabetextfeldern müssen Sie prüfen, ob es bereits datepicker enthält, und dann die Klasse hasDatepicker entfernen.

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

Eine kleine Anmerkung zur Antwort von SeanJA.

Interessanterweise verwenden Sie KnockoutJS und jQuery zusammen Die folgenden Eingaben mit unterschiedlichen IDs , jedoch mit der gleichen Datenbindung beobachtbar :

<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 (auch wenn 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();
});
1
user1572418

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

Gibt es eine Option, die diese ID in eine Klasse ändern kann? Ich möchte dieses Skript nicht nur für diese offensichtliche Lösung festlegen.

0
Alex Grande

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

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

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>
0
Aehandasa

Ich hatte ein ähnliches Problem mit dem dynamischen Hinzufügen von Datepicker-Klassen. Die Lösung, die ich fand, bestand darin, Zeile 46 von datepicker.js auszukommentieren 

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

In meinem Fall hatte ich meinen <input> -Elementen keine ID gegeben und verwendete eine Klasse, um den Datepicker wie in der Antwort von SeanJA anzuwenden, aber der Datepicker wurde nur auf die erste angewendet. Ich entdeckte, dass JQuery automatisch eine ID hinzufügte und in allen Elementen dieselbe ID war, was erklärt, warum nur die erste Datepickered-Funktion erhielt. 

0
jamsandwich