Estoy trabajando en un sitio web de WordPress con el tema basado en Bootstrap 3.

En un formulario debo incluir la fecha del calendario de recicladores. He añadido un js de la biblioteca de eyecon (Demo sitio Web para Datepicker de la Biblioteca). Hice el trabajo con selectores de fecha, pero estoy teniendo problemas para deshabilitar la elección de los últimos tiempos para la llegada de campo, cuando la hora de salida está establecido.

Por ejemplo, si la hora de Salida se establece en 1 de Marzo, cuando el usuario hace clic en la Llegada de campo en el calendario que aparece, todas las fechas antes del 2 de Marzo debe estar deshabilitada.

He probado varias versiones de código que se proporciona en el sitio web de demostración, pero que no funcionan. Creo que el problema podría ser que he jQuery noConflict modo.

Mi actual secuencia de comandos se encuentra en footer.php de mi tema. El calendario emergente obras, y desactiva las fechas pasadas, pero no deshabilitar las fechas antes de la Llegada de campo una vez que la fecha de Salida está establecido.

Este fue el más exitoso intento de, al menos, el calendario de ventanas emergentes que estaban trabajando en este intento: http://jsfiddle.net/j5ZKc/

Y este es mi script actual:

<script type="text/javascript">
jQuery(function() {
  jQuery('#dp1, #dp2'
  ).datepicker({startDate: '-0m'}).on('changeDate', function(){
    jQuery( '#dp1, #dp2'
    ).datepicker('hide');
  })
});
</script>

Alguna sugerencia por favor?

  • Su página de demostración tiene un checkin/checkout ejemplo. Que lo han intentado y no funciona? Parece razonable para mí.
  • Sí, traté de usar, pero tal vez no podía obtener el derecho de la sintaxis para js, como tenía que usarlo con noConflict modo, el uso de jQuery en lugar de $
  • Podría usted por favor edita tu post y mostrar cómo habría hecho. Entonces puedo intentar corregir sus errores.
  • He editado mi post, se agregó un vínculo de jsfiddle. Gracias @nvrmnd : ))
  • Ok, así que traté de modificar el código para que funcione en jsFiddle… no lograr eso, pero yo tengo trabajo en mi entorno local. Yo no modificar el código del ejemplo demasiado y funcionó.
InformationsquelleAutor Domeniko | 2014-01-29

2 Comentarios

  1. 9

    Así que después de algunos problemas por fin tengo algo de trabajo para usted:

    jsFiddle Bootstrap-datepicker

    Lo que hice yo:

    He utilizado bifurcada Bootstrap-datepicker. Es en mi opinión mucho mejor documentada y más fácil de usar. Yo tengo trabajo por lo que debe contar para algo.
    Por ejemplo tengo la fecha de la respectiva datepicker invocando getDate() en un datepicker:

    checkout.datepicker("getDate").valueOf()

    Si usted tiene alguna pregunta acerca de mi código, que me haga saber!

    EDICIÓN:

    He actualizado el ex jsFiddle (ver el enlace de arriba). Se ajusta automáticamente el valor de #dp2 para la fecha seleccionada de #dp1 + un día. Por lo tanto, usted debe estar siempre en el mes correcto.

    Si usted no desea que el código para poner el foco en #dp2 después de una fecha seleccionada acaba de quitar la línea siguiente en el jsFiddle:

    $('#dp2')[0].focus();
    • Hola @nvrmnd muchas Gracias! Esta realidad resuelto mi problema… funciona, pero tengo un pequeño problema nuevo ahora. La cosa es que, no a la hora de elegir una fecha de salida que permite decir el 1 de Marzo, se salta automáticamente a la Llegada de campo y no me deja elegir cualquier fecha antes del 1 de Marzo (Esto es correcto), pero necesito manual de desplazamiento par de meses desde la fecha actual para llegar al 1 de Marzo y, a continuación, seleccione una fecha de llegada. Hay una manera, para hacer de la llegada de campo muestran inicialmente el mes y la fecha, que fue seleccionado en la Salida de campo? Espero tener sentido, lo siento por mi inglés : ))
    • Otra pregunta que tengo es, ¿cómo iba a ser capaz de desactivar automáticamente saltando sobre la fecha de llegada, tan pronto como la fecha de Salida (#dp1) se establece? Y que este script funcione para múltiples campos? Si vamos a decir que tengo 3 fechas de salida y, a continuación, 1 de llegada? Muchas gracias @nvrmnd realmente aprecio su ayuda un montón! : ))
    • He editado el jsFiddle para satisfacer sus necesidades. Si desea utilizar 4 tipos de selectores de fecha, entonces, por supuesto, usted tiene que hacer algunas pequeñas modificaciones, pero debe ser bastante fácil hacerlo.
    • Gracias @nvrmnd alguien Ha dicho alguna vez que eres su héroe? : )) Bueno, Señor… eres mi héroe 😀 Ahora, todo lo que tengo que averiguar es, cómo duplicar esta secuencia de comandos para mi otra página, donde tengo varios campos para el calendario, para múltiples destinos. Supongo que simplemente copiar y cambiar los nombres de IDENTIFICACIÓN de la secuencia de comandos debe hacer bien el trabajo ? Muchas gracias de nuevo! : ))
    • Exactamente, ajustar el Id y que debería estar bien. Si te gusta mi respuesta, usted debe upvote/marca como el aceptado la respuesta para que los demás sepan que el problema está resuelto.
    • He aceptado la respuesta, pero no puedo upvote todavía. Va a volver a esta respuesta una vez que tengo la reputación suficiente para upvote… muchas Gracias de nuevo… Saludos! : ))
    • Esta fue una impresionante solución. Trabajando con el plugin de la causa de algunos de fricción, pero esta solución (y su jsFiddle) realmente, realmente me ayudó! Yo era capaz de actualizar mi final y a partir de la fecha de inicio de la selección, que es exactamente lo que yo necesitaba.
    • Actualizado el anterior violín para manejar un caso : 1.Seleccione una fecha a partir de la dp1 (es Decir, el 14 de Enero, dp2 se establece en 15 de ene, valores anteriores desactivado) 2.Seleccione una Fecha a partir de la dp1 anterior al 14 ene (es Decir, 7 de Ene, a continuación, 7-14 son todavía deshabilitado) Encontrar el enlace

  2. 5

    Probar este fragmento de código:

    $('#changestartdate').datetimepicker({
    minDate:new Date()
    });

    • minDate ha sido actualizado a la startDate para cualquier persona mirando este recientemente.
    • Tuve que usar minDate más de startDate: startDate da un js de error de la consola de Uncaught TypeError: option startDate is not recognized!

Dejar respuesta

Please enter your comment!
Please enter your name here