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
Muchísimas gracias!
input
. No se entiende muy bien por qué eso deba depender del switch y no de los elementos en sí.kt_start_date
ykt_end_date
y activar el botón de envío únicamente si esos inputs tienen fechas.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 ficheroswitch
este desactivado que las fechas se envíen comonull
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