New question

Question:

Date: 13-02-2016 16:56:58 (In Spanish)

Datepicker pasar variable de JavaScript a PHP[Resolved]

Buenas noches comunidad, Les comento estoy tratando de implementar el datepicker de Jquery UI para mi proyecto. En si estoy tratando de implementar el mismo calendario que tiene PHPCentral para mostrar las actividades de una ONG.

En si logre hacer esta aqui, jugando un poco con la documentación y leyendo en google:

<!doctype html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Test</title>
	<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
	<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<style>
		.ui-datepicker table {
			display: none;
		}
	</style>
</head>
<body>
	<!-- Datepicker -->
	<h2 class="demoHeaders">Datepicker</h2>
		<form action="datepicker.php" method="post">

			<input type="text" value="" id="datepicker">
			<input type="submit" value="ir" id="ir">
			
		</form>
	<script>
	$(document).ready(function() {

		//opciones del datepicker por defecto
		$.datepicker.regional['es'] = {
			closeText: 'Cerrar',
			prevText: 'Anterior',
			nextText: 'Siguiente',
			minDate: new Date(2016, 1 - 1, 1),
			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: 'MM yy',
			firstDay: 1,
			isRTL: false,
			showMonthAfterYear: false,
			yearSuffix: ''
		};

	 $.datepicker.setDefaults($.datepicker.regional['es']);

			$( "#datepicker" ).datepicker({
				inline: true,

				changeMonth: true,
				changeYear: true,
				showButtonPanel: true,
				onClose: function(dateText, inst) {
	            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
				}
			});

			//obtengo la fecha actual
			var fechaActual = new Date();
			var intMes = fechaActual.getMonth();
			var mesYear = $.datepicker.regional['es'].monthNames[intMes]+' '+fechaActual.getFullYear();

			//paso el valor al value del select
			$('#datepicker').val(mesYear);
	});
	</script>
</body>
</html>


El tema es que yo logro obtener el mes y año que eligio pero al cargar el sitio vuelvo obtener el año actual por esta instrucción


			//obtengo la fecha actual
			var fechaActual = new Date();
			var intMes = fechaActual.getMonth();
			var mesYear = $.datepicker.regional['es'].monthNames[intMes]+' '+fechaActual.getFullYear();

			//paso el valor al value del select
			$('#datepicker').val(mesYear);


Y en si ya se me quemaron los papeles hasta ahora jeje. Espero que me puedan orientar un poco.

Tambien perdirle permisos a Fernando para poder implementar el mismo calendario en mi proyecto.

Saludos y gracias.
Tags: Datepicker - Javascript - JQuery - JQuery UI - PHP - Question Votes: 2 - Answers: 9 - Views: 19 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 15-02-2016 18:46:56 Hola Gonzalo, por supuesto, Datepicker es de jQuery UI, no tienes que pedirme ningun permiso a mi para implementar esto en tu sitio, si PHPCentral te sirve como inspiración "en hora buena" como dicen los españoles.

    No entiendo muy bien cuál es tu pregunta... si lo que quieres hacer es que al recargar la página conserve la fecha seleccionada, deberás cargar la variable "mesYear" desde PHP, si es que existe, o sea, si fue seleccionada y de lo contarior utilizar el default, veamos un ejemplo en código que siempre es más claro:

    <script type="text/javascript">
        //obtengo la fecha actual
        var fechaActual = new Date();
        var intMes = fechaActual.getMonth();
        
        <?php if(isset($mesYear)):?>
            var mesYear = '<?php echo $mesYear;?>';
        <?php else:?>
            var mesYear = $.datepicker.regional['es'].monthNames[intMes]+' '+fechaActual.getFullYear();
        <?php endif;?>
            
        //paso el valor al value del select
         $('#datepicker').val(mesYear);
    </script>
    


    Saludos,
      Votes: 3 - Link answer
     
  • Date: 17-02-2016 19:22:34 Hola Fernando, muchas gracias por tu respuesta como siempre das en la tecla!

    <?php
    	//compruebo que se halla activado el submit
    	if(isset($_POST['ir']))
    	{
    		$mesYear = $_POST['datepicker'];
    	}
    ?>
    <!doctype html>
    <html lang="es">
    <head>
    	 <meta charset="utf-8">
    	 <title>jQuery UI Test</title>
    	 <link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
    	 <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    	 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    	 <style>
    		  .ui-datepicker table {
    				display: none;
    		  }
    	 </style>
    </head>
    <body>
    	 <!-- Datepicker -->
    	 <h2 class="demoHeaders">Datepicker</h2>
    		  <form action="datepicker.php" method="post">
    				<input type="text" value="" name="datepicker" id="datepicker">
    				<input type="submit" value="ir" name="ir" id="ir">
    		  </form>
    	 <script>
    	 $(document).ready(function() {
    		  //opciones del datepicker por defecto
    		  $.datepicker.regional['es'] = {
    				closeText: 'Cerrar',
    				prevText: 'Anterior',
    				nextText: 'Siguiente',
    				minDate: new Date(2016, 1 - 1, 1),
    				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: 'MM yy',
    				firstDay: 1,
    				isRTL: false,
    				showMonthAfterYear: false,
    				yearSuffix: ''
    		  };
    	  $.datepicker.setDefaults($.datepicker.regional['es']);
    
    				$( "#datepicker" ).datepicker({
    					 inline: true,
    					 changeMonth: true,
    					 changeYear: true,
    					 showButtonPanel: true,
    					 onClose: function(dateText, inst) {
    					 $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    				 		},
    				});
    
    
    				<?php if(!isset($mesYear)):?>
    				//obtengo la fecha actual
    				var fechaActual = new Date();
    				var intMes = fechaActual.getMonth();
    				var mesYear = $.datepicker.regional['es'].monthNames[intMes]+' '+fechaActual.getFullYear();
    
    				 <?php else:?>
    				 var mesYear = '<?php echo $mesYear;?>';
    				 <?php endif;?>
    
    				//paso el valor al input #datepicker
    				$('#datepicker').val(mesYear);
    	 });
    	 </script>
    </body>
    </html>
    


    Ahora lo que yo nesecito es obtener tambien el value del select mes y año para poder hacer una busquedad a la base de datos

    Estuve investigando y se obtiene el valor asi de un ejemplo con jquery

    <!DOCTYPE html>
    <html lang="es">
    <head>
       <meta charset="UTF-8">
       <title>Ejemplo de obtener el valor del select</title>
       <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>
       $(document).ready(function() {
    
          $('#mes').change(function() {
             alert($(this).val());
          });
       });
    
       var mes = new Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
       'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
    
    </script>
    </head>
    <body>
       <select id="mes">
          <script>
             for(var i = 0; i < mes.length; i++)
             {
                $('#mes').append('<option value="'+i+'">'+mes[i]+'</option>');
             }
          </script>
       </select>
    </body>
    </html>
    


    Pero a la hora de querer hacer lo mismo en el datepicker no obtengo nada, lo hago de esta manera

    <script>
       $(document).ready(function() {
          //obtener valor del select month
          $('.ui-datepicker-month').change(function() {
             alert($(this).val());
          });
          //obtener valor del select year
          $('.ui-datepicker-year').change(function() {
             alert($(this).val());
          });
       });
    </script>


    Que estare haciendo mal?

    Desde ya muchas gracias como siempre.

    ¡Saludos!
      Votes: 1 - Link answer
     
  • Date: 18-02-2016 03:43:46 Hola Gonzalo viendo el código q compartiste veo q tienes un combo de mes, pero.no un combo de año y veo q quieres capturar el año mi duda es si vas a tener un combo de año o vas a tratar el año actual por defecto saludos   Votes: 0 - Link answer
     
  • Date: 18-02-2016 05:35:29 Hola Juan, te comento esto fue un ejemplo.

        <!DOCTYPE html>
        <html lang="es">
        <head>
           <meta charset="UTF-8">
           <title>Ejemplo de obtener el valor del select</title>
           <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>
           $(document).ready(function() {
              $('#mes').change(function() {
                 alert($(this).val());
              });
           });
           var mes = new Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
           'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
        </script>
        </head>
        <body>
           <select id="mes">
              <script>
                 for(var i = 0; i < mes.length; i++)
                 {
                    $('#mes').append('<option value="'+i+'">'+mes[i]+'</option>');
                 }
              </script>
           </select>
        </body>
        </html>


    El datepicker de Jquery UI ya viene integrado el combo del mes y año, lo que nesecitaria es obtener esos valores



    Y lo estaba intentando de esta manera

        <script>
           $(document).ready(function() {
              //obtener valor del select month
              $('.ui-datepicker-month').change(function() {
                 alert($(this).val());
              });
              //obtener valor del select year
              $('.ui-datepicker-year').change(function() {
                 alert($(this).val());
              });
           });
        </script>


    ¡Saludos!
      Votes: 1 - Link answer
     
  • Date: 18-02-2016 06:39:27 Hola gonzalo , una consulta tu quieres que al cambiar el año y el mes ya se vaya cambiando el input con los valores seleccionados ?   Votes: 1 - Link answer
     
  • Date: 18-02-2016 07:23:29 Juan, antes que nadas agradecerte por responder. Te comento yo quiero obtener esos dos valores para luego hacer una busquedad en la base de datos. Y solo obtener los eventos de dicha fecha no mas.

    Ejemplo que en el mes de marzo me de registro de todas las actividades del mes de marzo, cuando se va a otro mes me de todo las actividades de dicho mes.

    PD: La estructura de la base de datos todavia no la tengo definida.

    ¡Saludos!
      Votes: 1 - Link answer
     
  • Date: 18-02-2016 07:34:54 Lo que me comentas si entiendo gonzalo si no que para hacer lo que tu quieres , tienes 2 opciones

    el primero
    -------------------------

    cada vez que cambies tanto el combo mes y anio se vaya modificando tu input en donde va tu fecha

    segundo
    -------------------------

    que cada vez que cambie el combo mes y anio no cambie tu input si no que al hacer click en tu boton ir ahi recien cambie el input con los valores


    que opcion quieres hacerlo


    saludos , gonzalo
      Votes: 0 - Link answer
     
  • Date: 18-02-2016 07:51:14 Hola Gonzalo, si, los eventos del datepicker son medio complicados, hay muchas formas de hacer lo mismo y también muchas formas que funcionan con xxxx versión de JQuery UI y no con otra.

    Te comento que a mi me ha dado muy buen resultado hacer el binding del evento "onClose" al momento de configurar el objeto datepicker, mira, aquí te dejo un ejemplo en código:

    $(document).ready(function () {
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function (dateText, inst) {
                var month = $(".ui-datepicker-month :selected").val();
                var year = $(".ui-datepicker-year :selected").val();
                month = parseInt(month) + 1;
                month = ('0' + month).slice(-2);
                alert(year + '-' + month);
            }
        });
    });


    Nota: observa la correspondencia numerica del mes, siempre es +1 y luego utilizo slice para tener el formato de 2 dígitos.

    Prueba el evento "onClose" y luego me cuentas si obtienes el comportamiento esperado ;)

    Saludos y buen código!
      Votes: 1 - Link answer
     
  • Date: 18-02-2016 08:42:26 Grande Fer, un espectaculo como siempre! Ahora vamos a pasarlo a codeigniter. Juan tambien gracias por tu respuesta y tiempo como siempre.

    Marco como resuelta.

    ¡Saludos!
      Votes: 1 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In