Aplicar jQuery selector de fechas a varias instancias

Tengo un control de selector de fecha jQuery que funciona bien para una instancia, pero no estoy seguro de cómo conseguir que funcione para varias instancias.Aplicar jQuery selector de fechas a varias instancias

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

Sin el bucle For Each, que funciona bien, pero si hay más de un artículo en el "MyRecords" de recogida, a continuación, sólo el primer cuadro de texto consigue un selector de fechas (lo cual tiene sentido ya que está ligada a la CARNÉ DE IDENTIDAD). Probé la asignación de una clase para el cuadro de texto y especificar:

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

pero al mismo tiempo que muestra un selector de fechas en todas partes, todos ellos de actualización del primer cuadro de texto.

¿Cuál es la manera correcta de hacer este trabajo?

Fuente

2009-04-01 gfrizzle

¿Qué idioma es el <% blah %> cosas? –

Eso es VB dentro de una página ASP.NET, solo una manera rápida de ilustrar el punto de la pregunta. – gfrizzle

Asegúrese de que los campos de entrada no estén 'deshabilitados', el selector de fechas no aparecerá en los campos de entrada con el atributo' 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" />

guión:

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

(seudo codificado un poco para mantenerlo simple)

Fuente

2009-04-01 23:01:40 SeanJA

Parece que el corazón de mi problema es que todos los cuadros de texto tienen la misma ID, por lo que cada selector de fecha está actualizando el primer cuadro de texto. Tu ejemplo no sufre de eso, así que funciona. ¿Cómo obtengo que los ID sean diferentes en un bucle? – gfrizzle

+14

Duh, no dejes que los cuadros de texto tengan la misma ID. A veces hay que alejarse de un problema por un tiempo para que la respuesta obvia aparezca. – gfrizzle

¿No funcionaría '$ (". Datepick "). Datepicker();' una vez que tenga identificadores diferentes en los campos de entrada? – rapcal

La respuesta obvia sería la de generar diferentes identificaciones, un identificador separado para cada cuadro de texto, algo así como

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

No sé ASP.net por lo que acaba de agregar un código general C-como sintaxis entre corchetes. Traducirlo al código real de ASP.net no debería ser un problema.

Entonces, usted tiene que encontrar una manera de generar el mayor número

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

como artículos en su Model.MyRecords. Una vez más, entre corchetes es su contador, por lo que su función jQuery sería algo así como:

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

Fuente

2009-04-01 22:45:24 evilpenguin

O podría usar clases para simplificar el JS ... –

Ya, eso no es realmente lo obvio respuesta ... – SeanJA

La solución aquí es tener diferentes identificadores como muchos de los que han declarado. El problema aún es más profundo en datepicker. Por favor, corrígeme, pero el datepicker no tiene una ID de envoltura - "ui-datepicker-div". Esto se ve en http://jqueryui.com/demos/datepicker/#option-showOptions en el tema.

¿Hay una opción que puede cambiar este ID para ser una clase? ¡No quiero tener que bifurcar este guión solo por esta solución obvia!

Fuente

2009-11-10 17:44:49

Puede ser simplemente la parte de "muestra" del código de muestra.No creo que en realidad genere un div con esa ID. Asegurándome de que cada uno de mis objetos objetivo tuviera identificaciones únicas, todo funcionó como se esperaba. – 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>

Fuente

2010-01-15 16:16:32 codeguru

Para cambiar el uso de la clase en lugar de ID

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

Fuente

2010-11-01 06:54:56 Aehandasa

Esta respuesta ya está provista por Shuo – Gowri

Y seguramente no querríamos enfoques alternativos ... aunque admito que si bien esto funcionaría, no lo usaría. Especialmente después de ver la respuesta aceptada, pero a cada uno la suya. – brichins

acabo de tener el mismo problema.

La forma correcta de usar la fecha es $('.my_class').datepicker();, pero debe asegurarse de no asignar la misma ID a múltiples selectores de fecha.

Fuente

2010-12-06 21:46:10 Shuo

he tenido el mismo problema, pero finalmente se descubrió que era un problema con la forma en que estaba invocando el script desde un control de usuario de la web ASP. Yo estaba usando ClientScript.RegisterStartupScript(), pero se olvidó de dar el guión una clave única (el segundo argumento). Con ambos scripts asignados a la misma clave, solo el primer cuadro se estaba convirtiendo en un datepicker.Así que decidió adjuntar el identificador del cuadro de texto con la clave para que sea único:

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

Fuente

2012-01-12 23:18:16 kad81

He tenido un problema similar con la adición de clases dinámicamente datepicker. La solución que encontré fue crear un comentario en la línea 46 de datepicker.js

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

Fuente

2013-07-30 06:46:51 mozgras

Al añadir planificador de evento en tiempo de ejecución genera cuadros de texto de entrada que tiene que comprobar si ya contiene selector de fechas a continuación, retire primero hasDatepicker clase a continuación, aplicar DatePicker a ella.

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

Fuente

2013-10-08 08:54:20

Hay una solución simple.

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

Fuente

2014-02-19 09:34:56

Una pequeña nota para la respuesta de SeanJA.

Curiosamente, si se utiliza KnockoutJS y jQuery juntos las siguientes entradas con diferentes ID, pero con los mismos datos, se unen observables:

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

se unirá uno (el mismo) datepicker a ambas entradas (aunque tengan diferentes ids o nombres).

Use observables independientes en su modelo de vista que se unen a un planificador de evento separado para cada entrada:

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

inicialización:

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

Fuente

2014-11-23 11:06:21 user1572418

Nunca debe trabajar de esa manera en combinación con KnockoutJS. Es mucho mejor y más claro si enlaza su marcador de fecha usando un bindingHandler. – Gigi2m02

En mi caso, no me había dado mis <input> elementos de cualquier ID , y estaba usando una clase para aplicar el marcador de fecha como en la respuesta de SeanJA, pero el marcador de fecha solo se estaba aplicando al primero. Descubrí que JQuery estaba agregando automáticamente una ID y era la misma en todos los elementos, lo que explicaba por qué solo la primera se estaba acertando.

Fuente

2015-09-07 01:23:10 jamsandwich

Aplicar jQuery selector de fechas a varias instancias

Respuesta

Cuestiones relacionadas