php Multidatepicker Datepicker jquery UI

Posted 2021-05-04

var date = new Date();

var showDates_<?= $i ?> = [
<?php if( have_rows( 'viaje_fechas' ) ) : while( have_rows( 'viaje_fechas' ) ) : the_row( 'viaje_fechas' ); ?>
	"<?php the_sub_field( 'viaje_fecha' ); ?>",
<?php endwhile; reset_rows(); endif; ?>
];

var moreDates_<?= $i ?> = [ 
<?php while( have_rows( 'viaje_fechas' ) ) : the_row( 'viaje_fechas' ); ?>
	<?php 
	$duration = get_sub_field( 'viaje_duracion' ) - 1;
	// false, false retorna el valor de viaje_fecha sin formato
	$date = get_sub_field( 'viaje_fecha', false, false); 
	$date = new DateTime($date);
	for( $e=1; $e<= $duration; $e++ ) {
		$date->modify('+1 day');
		echo '"' . $date->format('d-m-Y') . '", ';
	}
	?>
<?php endwhile; reset_rows(); ?>
];

<?php $o=0; while( have_rows( 'viaje_fechas' ) ) : $o++; the_row( 'viaje_fechas' ); ?>
	var allDates_<?= $o ?> = [ 
		<?php 
		$duration = get_sub_field( 'viaje_duracion' ) - 1;
		// false, false retorna el valor de viaje_fecha sin formato
		$date = get_sub_field( 'viaje_fecha', false, false); 
		echo '"' . get_sub_field('viaje_fecha') . '", ';
		$date = new DateTime($date);
		for( $e=1; $e<= $duration; $e++ ) {
			$date->modify('+1 day');
			echo '"' . $date->format('d-m-Y') . '", ';
		}
		?>
	];
<?php endwhile; reset_rows(); ?>

<?php if( have_rows( 'viaje_fechas' ) ) : ?>
	var defaultDate_<?= $i ?> = 
		<?php $s = 0; while( have_rows( 'viaje_fechas' ) ) : $s++; the_row( 'viaje_fechas' ); ?>
			<?php if( $s == 1 ) : $date = get_sub_field( 'viaje_fecha', false, false); $date = new DateTime($date); ?>
				"<?php echo $date->format('j-m-y'); ?>"
			<?php endif; ?>
		<?php endwhile; reset_rows(); ?>
	; // ! importante Essa coma cierra el statement de la variable defaultDate
<?php endif; ?>
// Establece los textos en español para el datepicker
$.datepicker.regional['es'] = {
				closeText: 'Cerrar',
	prevText: '< Ant',
	nextText: 'Sig >',
	currentText: 'Hoy',
	monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
	monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
	dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
	dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
	dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
	weekHeader: 'Sm',
	dateFormat: 'dd/mm/yy',
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''
};

// Añade los textos definidos a la instancia de datepicker
 $.datepicker.setDefaults($.datepicker.regional['es']);

// Multidates picker
// Este script mezcla código en php
$('#datepicker-<?= $i ?>').multiDatesPicker({
	dateFormat: "d-m-y",
	<?php if( have_rows( 'viaje_fechas' ) ) : ?>
	defaultDate: defaultDate_<?= $i ?>,
	<?php endif; ?>
	nextText: "Siguiente",
	prevText: "Anterior",
	beforeShowDay: function(date){
		var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
		// console.log(string + ' showDates = ' + (showDates_<?= $i ?>.indexOf(string) + 1) + ' moreDates = ' + (moreDates_<?= $i ?>.indexOf(string) + 2));
		// console.log(string + ' allDates = ' + (allDates_<?= $i ?>.indexOf(string) + 1) + ' / ' + allDates_<?= $i ?>.length );
			//console.log(string + '  ' + moreDates_<?= $i ?>.indexOf(string));
		if(moreDates_<?= $i ?>.indexOf(string) != -1) {
			// console.log(string + ' ' + showDates_1.indexOf(string));
			return [false, 'highlight', 'canselect'];    
		} else if(showDates_<?= $i ?>.indexOf(string) == -1)  {
				return [false, 'lowlights', 'noselect']; 
		} else if(showDates_<?= $i ?>.indexOf(string) != -1) {
			return [ true, 'firstselect', '' ]
		}
	},
	// mode: 'daysRange',
	// autoselectRange: [0, 6],
	showOtherMonths: true,
	// addDisabledDates: [date.setDate(1), date.setDate(3)],
	onSelect: function(s, inst) { 
		// Obtiene el objeto de fecha
		var date = $(this).datepicker('getDate');
		// Toma solo el día de la fecha
		var dateDia = $(this).datepicker('getDate').getDate();
		var some_Date_var = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)
		var dateMes = $.datepicker.formatDate("MM", some_Date_var )
		$('.dateselected .dia').html(dateDia);
		$('.dateselected .mes').html(dateMes);
		//console.log(date);
	},
	
});