0

Tengo un panel de filtros para realizar búsquedas avanzadas en el cual uso dos inputs de fechas los cuales se muestran solo cuando el switch esta activado, la cuestión es que si buscase sin activar el switch la búsqueda no debería enviar el filtro de fechas y si lo activo me muestra los inputs y entonces si se toman en cuenta las fechas.

Pues mi problema reside que con el switch activado y desactivado siempre se envían las fechas cargadas.

En el código he intentado que si el switch esta desactivado se envíen las fechas como null y no hace caso, por defecto al cargar la pagina el switch esta desactivado y los inputs no se muestran:

HTML

<!-- Switch Fechas -->
<div class="col-xxl-2">
    <label class="fs-6 form-label fw-bold text-dark"><?= lang('General.date') ?></label>
    <div class="form-check form-switch form-check-custom form-check-solid mt-1">
        <input class="form-check-input" type="checkbox" value="1" id="flexSwitchCheckedDate" name="date_switch" />
    </div>
</div>
<!-- Fecha inicio -->
<div class="col-xxl-4 date-field" style="display: none;">
    <label class="form-label"><?= lang('General.startDate') ?></label>
    <input class="form-control form-control-solid" name="start_date" placeholder="Pick start date" id="kt_start_date" />
</div>
<!-- Fecha Fin -->
<div class="col-xxl-4 date-field" style="display: none;">
    <label class="form-label"><?= lang('General.endDate') ?></label>
    <input class="form-control form-control-solid" name="end_date" placeholder="Pick end date" id="kt_end_date" />
</div>

Script

<script>
//FECHAS
$(document).ready(function() {
    var language = '<?= session("language") ?>';

    // Cargar el archivo de localización de moment.js si el idioma no es inglés
    if (language != 'en') {
                $.getScript('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/' + language + '.js', function() {
            moment.locale(language); // Establecer el locale de moment al cargado
            initializeDatepickers(language);
        });
    } else {
        initializeDatepickers(language);
    }

    // Inicializar controles select2
    $('[data-control="select2"]').select2();
    $('[data-control="select2"]').each(function() {
        var noSearch = $(this).data('no-search') === true;
        $(this).select2({
            minimumResultsForSearch: noSearch ? Infinity : 0
        });
    });
    // Alternar la visibilidad de los campos de fecha
    $('#flexSwitchCheckedDate').change(function() {
        if ($(this).is(':checked')) {
            $('.date-field').show();
        } else {
            $('.date-field').hide();
        }
    });
});

function initializeDatepickers(language) {
    var end = moment();
    var start = moment();

    // Configuración de localización para los datepickers
    var localeData = {
        format: 'DD/MM/YYYY',
        applyLabel: "<?= lang('General.send') ?>",
        cancelLabel: "<?= lang('General.close') ?>",
        firstDay: moment.localeData()._week.dow
    };

    // Inicializar el date picker de la fecha de inicio
    $("#kt_start_date").daterangepicker({
        singleDatePicker: true,
        startDate: start,
        autoUpdateInput: true,
        locale: localeData
    });

    // Inicializar el date picker de la fecha de fin
    $("#kt_end_date").daterangepicker({
        singleDatePicker: true,
        startDate: end,
        autoUpdateInput: true,
        locale: localeData
    });

    // Manejador para aplicar el rango de fechas
    function handleDateRangeApply() {
        var data = {
            '<?= csrf_token() ?>': '<?= csrf_hash() ?>' // Si la protección CSRF está habilitada
        };

        if ($('#flexSwitchCheckedDate').is(':checked')) {
            var startDate = $("#kt_start_date").data('daterangepicker').startDate.format('YYYY-MM-DD');
            var endDate = $("#kt_end_date").data('daterangepicker').startDate.format('YYYY-MM-DD');
            data.startDate = startDate;
            data.endDate = endDate;
        } else {
            data.startDate = null;
            data.endDate = null;
        }
        // Enviar la solicitud AJAX
        $.ajax({
            url: '<?= site_url('search') ?>', // URL de tu controlador
            method: 'POST',
            data: data,
            success: function(response) {
                // Manejar la respuesta
                console.log('Respuesta:', response); // Ver la respuesta en la consola
            },
            error: function(error) {
                // Manejar el error
                console.error('Error:', error); // Mostrar el error en la consola
            }
        });
    }

    // Asociar el manejador a los eventos de aplicación de los date pickers
    $("#kt_start_date").on('apply.daterangepicker', handleDateRangeApply);
    $("#kt_end_date").on('apply.daterangepicker', handleDateRangeApply);
}
</script>

Aquí adjunto como se ve el cuadro de filtros para la búsqueda, al cargar la pagina los inputs se inicializan con la fecha actual estén mostrados o no

switch desactivado

switch activado

Muchísimas gracias!

11
  • Convendría que muestres el HTML ligado a este código. Por otra parte, si el requerimiento es que la petición Ajax se envíe sólo cuando los inputs de fechas tengan datos, entonces, puedes agregar elementos de escucha a esos input. No se entiende muy bien por qué eso deba depender del switch y no de los elementos en sí.
    – A. Cedano
    Commented el 29 oct. a las 10:32
  • @A.Cedano disculpa, lo agrego ya mismo! Commented el 29 oct. a las 10:36
  • Como te comenté más arriba. Si el requerimiento es que la petición Ajax sólo se envíe cuando los inputs de fecha tengan datos, entonces puedes verificar el contenido de los inputs con id kt_start_date y kt_end_date y activar el botón de envío únicamente si esos inputs tienen fechas.
    – A. Cedano
    Commented el 29 oct. a las 10:41
  • @A.Cedano eso no es la cuestión, he agregado imágenes de como es el cuadro de búsqueda, si buscas sin rellenar ningún cuadro no se añaden filtros a la Query a la base de datos, en cambio si rellenas por ejemplo el de tipo de fichero, el filtro será que solo mostrara los documentos que sean de ese tipo de fichero Commented el 29 oct. a las 11:11
  • @A.Cedano de ahi que quiera cuando el switch este desactivado que las fechas se envíen como null para que el modelo que comprueba los datos que le llegan del cuadro de búsqueda al no encontrar datos de fecha no active el filtro Commented el 29 oct. a las 11:12

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.