Applica jQuery datepicker a più istanze

Ho un controllo di selezione data jQuery che funziona bene per una sola istanza, ma non sono sicuro di come farlo funzionare per più istanze.Applica jQuery datepicker a più istanze

<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%>

Senza il ciclo For Each, funziona benissimo, ma se c'è più di un elemento in "MyRecords" di raccolta, allora solo la prima casella di testo ottiene un selettore di data (che ha senso dal momento che è legata alla ID). Ho provato l'assegnazione di una classe per la casella di testo e specificando:

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

ma mentre che mostra una selezione data in tutto il mondo, hanno tutto l'aggiornamento prima casella di testo.

Qual è il modo giusto per farlo funzionare?

fonte

2009-04-01 gfrizzle

Che lingua è la roba <% blah %>? –

Questo è VB all'interno di una pagina ASP.NET - solo un modo rapido per illustrare il punto della domanda. – gfrizzle

Assicurarsi che i campi di input non siano 'disabled', il datepicker non verrà visualizzato per i campi di input con l'attributo' disabled' – bobobobo

106

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" />

script:

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

(pseudo codificato un po 'a più semplice)

fonte

2009-04-01 23:01:40 SeanJA

Sembra che il cuore del mio problema è che le caselle di testo hanno tutti lo stesso ID, quindi ogni selezione di date sta aggiornando la prima casella di testo. Il tuo esempio non ne soffre, quindi funziona. Come faccio a ottenere che gli ID siano diversi in un ciclo? – gfrizzle

+14

Duh, non lasciare che le caselle di testo abbiano lo stesso ID. A volte devi allontanarti da un problema per un po 'perché la risposta ovvia possa esplodere. – gfrizzle

Non '$ (". Datepick "). Datepicker();' funziona una volta che hai id diversi nei campi di input? – rapcal

La risposta ovvia sarebbe quella di generare diversi ID, un ID separato per ogni casella di testo, qualcosa di simile

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

Non so ASP.net così ho solo aggiunto un po 'di codice generale C-like sintassi entro parentesi quadre. La traduzione in codice ASP.net non dovrebbe essere un problema.

Quindi, è necessario trovare un modo per generare il maggior numero

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

come oggetti nel vostro Model.MyRecords. Anche in questo caso, tra parentesi quadre è il vostro contatore, in modo che le funzioni jQuery sarebbe qualcosa di simile:

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

fonte

2009-04-01 22:45:24 evilpenguin

Oppure potresti usare le classi per rendere il JS più semplice ... –

Ya, non è proprio così ovvio rispondi ... – SeanJA

La soluzione qui è quella di avere ID diversi come molti di voi hanno dichiarato. Il problema è ancora più profondo in datepicker. Per favore correggimi, ma il datapicker non ha un ID wrapper - "ui-datepicker-div". Questo è visto su http://jqueryui.com/demos/datepicker/#option-showOptions nel tema.

Esiste un'opzione che può modificare questo ID in una classe? Non voglio dover biforcare questo script solo per questa ovvia soluzione !!

fonte

2009-11-10 17:44:49

Potrebbe essere solo la parte "campione" del codice di esempio.Non penso che in realtà generi un div con quell'ID. Assicurandosi che ognuno dei miei oggetti target avesse ID univoci, tutto ha funzionato come previsto. – gfrizzle

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

fonte

2010-01-15 16:16:32 codeguru

Per modificare l'uso della classe invece di ID

<script type="text/javascript"> 
    $(function() { 
     $('.my_date1').datepicker(); 
     $('.my_date2').datepicker(); 
     $('.my_date3').datepicker(); 
     ... 
    }); 
</script>

fonte

2010-11-01 06:54:56 Aehandasa

Questa risposta è già fornita da Shuo – Gowri

E sicuramente non vorremmo approcci alternativi ... anche se ammetto che mentre funzionerebbe, non lo userei. Soprattutto dopo aver visto la risposta accettata - ma a ciascuno il suo. – brichins

Ho appena avuto lo stesso problema.

Il modo corretto di utilizzare la selezione data è $('.my_class').datepicker(); ma è necessario assicurarsi di non assegnare lo stesso ID a più datepicker.

fonte

2010-12-06 21:46:10 Shuo

Ho avuto lo stesso problema, ma alla fine ho scoperto che si trattava di un problema con il modo in cui stavo invocando lo script da un controllo utente Web ASP. Stavo usando ClientScript.RegisterStartupScript(), ma ho dimenticato di dare allo script una chiave univoca (il secondo argomento). Con entrambi gli script assegnati alla stessa chiave, solo la prima casella veniva effettivamente convertita in un datepicker.Così ho deciso di aggiungere l'ID del testo per la chiave per renderlo unico:

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

fonte

2012-01-12 23:18:16 kad81

Ho avuto un problema simile con l'aggiunta dinamicamente classi DatePicker. La soluzione che ho trovato è stato quello di commentare la linea 46 di datepicker.js

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

fonte

2013-07-30 06:46:51 mozgras

Quando si aggiunge datepicker a runtime generato caselle di testo di input si deve verificare se contiene già datepicker quindi rimuovere prima classe hasDatepicker quindi applicare DatePicker ad esso.

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

fonte

2013-10-08 08:54:20

C'è una soluzione semplice.

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

fonte

2014-02-19 09:34:56

Una piccola nota alla risposta SeanJA.

È interessante notare che, se si utilizza KnockoutJS e jQuery insieme i seguenti ingressi con ID diversi, ma con la stessa data-bind osservabili:

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

legherà uno (lo stesso datepicker a entrambi gli input (anche se hanno id o nomi diversi).

Utilizzare osservabili separati nel tuo ViewModel di impegnare un datepicker separato per ogni ingresso:

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

inizializzazione:

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

fonte

2014-11-23 11:06:21 user1572418

Non si dovrebbe mai lavorare in questo modo in combinazione con KnockoutJS. È molto meglio e più pulito se leghi il tuo datepicker usando un bindingHandler. – Gigi2m02

Nel mio caso, non avevo dato il mio <input> elementi qualsiasi ID e stavo usando una classe per applicare il datepicker come nella risposta di SeanJA, ma il datepicker veniva applicato solo al primo. Ho scoperto che JQuery aggiungeva automaticamente un ID ed era lo stesso in tutti gli elementi, il che spiegava il motivo per cui solo il primo era stato aggiornato.

fonte

2015-09-07 01:23:10 jamsandwich

Applica jQuery datepicker a più istanze

risposta

Problemi correlati