Me gustaría tener dos campo de fecha en mi WordPress formulario de contacto 7. Una fecha de inicio y una fecha final. Los campos se datepickers del «Formulario de Contacto 7 Datepicker» plugin.
Cuando el usuario ha seleccionado una fecha de inicio sólo debe ser capaz de seleccionar una fecha de finalización que es de 4 días después de la fecha de inicio.

¿Cómo puedo lograr esto sólo utilizando el «formulario de contacto 7» creador?

InformationsquelleAutor SiteHopper | 2013-08-29

2 Comentarios

  1. 4

    Esta es la sintaxis que he puesto en el «formulario de contacto 7».

    Start date charter*:
    [date* date-start date-format:MM_d_yy]
    
    End date charter*:
    [date* date-end date-format:MM_d_yy]

    Y añade este código al final de las funciones de archivo de tema de WordPress.

    function calendar_js(){
        ?>
        <script>
        jQuery(function($){
                var start = $('.date-start input').first();
                var end = $('.date-end input').first();
    
                start.on('change', function() {
                        var start_date = $(this).datepicker('getDate');
                        start_date.setDate(start_date.getDate() + 3);
                        end.datepicker('option', 'minDate', start_date);
                });
        });
        </script>
        <?php
        }
        add_action('wp_footer', 'calendar_js');

    Ahora el segundo selector de fecha debe ser de al menos 4 días después de la primera selector de fecha.

  2. 1

    Puede ser este plugin te ayudará. Este plugin funciona con CF 7

    http://wordpress.org/plugins/contact-form-7-datepicker/

    Y usted puede añadir su propio javascript para la fecha de la manipulación después de la adición de selector de fecha en CF 7.

    Ejemplo:

    jQuery(document).ready(function($) {
        $( ".from" ).datepicker({
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );
            }
        });
        $( ".to" ).datepicker({
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );
            }
        });
    });
    • Tengo el plugin ya instalado. Me gustaría saber qué debo hacer a continuación.
    • Supongo que usted está usando contact-form-7 plugin. El enlace que te di es para contact-form-7-DATEPICKER.
    • Sí, he contact-form-7-DATEPICKER instalado así.
    • Bueno, ahora usted puede agregar dos campos de fecha yo.e fecha de Inicio y fecha de Finalización y el uso de jquery se puede lograr lo que se quería lograr mediante la adición de onclose evento para el datepicker de ejemplo puede ser como este. He editado mi respuesta con un ejemplo.
    • Gracias por la ayuda. – Cuando yo agregar id:de y de identificación:para el datepicker de sintaxis, de alguna manera, el selector de fechas no funcionará más. los campos se quedan en blanco. En vez de eso me dio una clase:de y de la clase:a. y cambió el #de a .de etc en el js. Todavía no hay suerte. debo introducir otros valores en el datepicker de otros, entonces: a partir de [date date-622 class:from date-format:mm/dd/yy] a [date date-460 class:to date-format:mm/dd/yy] ?
    • Puedo ver tu web?
    • Aquí es el sitio. staging.oceantrips.com. En la página principal, parte superior izquierda, verás un botón de «solicitud de información». Esto abrirá el formulario en la caja de luz. script es añadido en el pie de página del sitio. Este es el syntaxt en el formulario de contacto 7. [date date-622 class:from date-format:mm/dd/yy] [date date-460 class:to date-format:mm/dd/yy]
    • Han notado este error de javascript en su sitio web? Uncaught TypeError: Property '$' of object [object Object] is not a function He actualizado mi respuesta para solucionar este error.
    • Gracias por tu ayuda. He encontrado un programador que se fija para mí. Ver mi respuesta aquí.
    • Es posible habilitar esta SOLO para los meses de julio y agosto? Si mm = 7 o 8, a continuación, [ … ]. Algo así como que..

Dejar respuesta

Please enter your comment!
Please enter your name here