Varias funciones javascript y no funciona una de ellas

kimmy · #1 (**permalink**) 18/12/2012, 13:17

Hola:

Tengo varias funciones de javascript y todas funcionan bien, pero la que me calcula el rango de fechas no está funcionando y no se porque. No se si es que están mal puestas o mal cerradas. Estas son las funciones:

Código Javascript:

Ver original$(document).ready(function() 
    {
   $("#datepicker").datepicker();
    }
);
 
$("#datepicker_1").datepicker({ minDate: new Date() });
 
 
var datepicked = function() {
var n_noches=  "<?php echo $n_noches; ?>";
var from = $('#datepicker_1');          
var to = $('#datepicker_2');          
var diferencia = $('#diferencia');
var diferencia2 = $('#diferencia2');
                                
var fromDate = from.datepicker('getDate')
var toDate = to.datepicker('getDate')
if (toDate && fromDate) {
    var difference = 0;
    var oneDay = 86400000; //ms per day
    var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay); 
    var difference2 = difference + 1;
    diferencia.val(difference);            
    diferencia2.val(difference2); 
}
    if(difference > n_noches){
    alert('el numero de noches no puede ser mayor a ' + n_noches +' noches');
    return false;   
    }
               
    }          
    $(function() {                                    
    $('#datepicker_1, #datepicker_2').datepicker({                         
    onSelect: datepicked  
        });                 
    //document.getElementById("diferencia").value = difference;
       
    });   
 
 
function rango(){
        var desde = "<?php echo $desde_plan; ?>";
        var hasta = "<?php echo $hasta_plan; ?>";
        
        var desde_plan= <?php echo $php_ini; ?>; // Quita las comillas para que sea un entero
        var hasta_plan= <?php echo $php_fin; ?>; // Igual aquí
 
      //  var llegada = document.form1.llegada.value;
       // var salida = document.form1.salida.value;
 
       // Yo preferiría buscar por id, por compatibilidad entre navegadores
        var llegada1 = document.getElementById('datepicker_1').value;
       // Y ya que estás usando jquery, puedes hacerlo así:
        var salida1 = document.getElementById('datepicker_2').value;
       
    js_ini = new Date(llegada1).getTime() / 1000;
    js_fin = new Date(salida1).getTime() / 1000;
    // Compruebas si los números a comparar están correctos
    alert(llegada1);
    alert(desde_plan + " - " + hasta_plan + "\n" + js_ini + " - " + js_fin);        
        if(js_fin > hasta_plan) {
        //alert("Has escrito: " + $("#TextBox1″).val());
        alert("Fecha seleccionada fuera de rango, seleccionar fechas entre "+ desde +" hasta " + hasta);
        document.form1.llegada.focus();
        return false;
        }
    }
 
function Sumar(sel1, sel2, sel3){
    var total;
    var sel1 = document.getElementById("adultos").value;
    var sel2 = document.getElementById("ctdad_ninos_me").value;
    var sel3 = document.getElementById("ctdad_ninos_may").value;
    resultado = parseInt(sel1) + parseInt(sel2) + parseInt(sel3);
    document.getElementById('Resultado').value = resultado;
}

Por favor les agradezco su ayuda, ya tengo 2 meses con este problema.

Gracias

emprear · #2 (**permalink**) 18/12/2012, 14:26

En principio no parece haber errores de sintáxis, lo que no está muy claro es eso del rango.
Un rango supone una serie de valores comprendidos dentro de otros 2 valores conocidos. Por lo que esto
if(js_fin > hasta_plan) solo define si una cosa es mayor que otra

Por otra parte por que no comparar js_ini y js_fin que en definitiva son las variables que determinan las fechas.

Deberías poner todo el html generado para tener una idea más clara de lo que querés validar

Saludos

kimmy · #3 (**permalink**) 18/12/2012, 14:48

Incluí los calculos de rango dentro de la funcion del numero de noches y si la toma pero el problema que tengo es que la variable js_fin no trae el dato que debería. Yo lo que quiero es que si js_fin (fecha final del datepicker) es mayor a hasta_plan (fecha php) me envie mensaje de que no puede ser y no deje aceptar el form.

Asi quedó con los cambios que hice:

Código Javascript:

Ver original$(document).ready(function() 
    {
   $("#datepicker").datepicker();
    }
);
 
$("#datepicker_1").datepicker({ minDate: new Date() });
 
 
var datepicked = function() {
var n_noches=  "<?php echo $n_noches; ?>";
var from = $('#datepicker_1');          
var to = $('#datepicker_2');          
var diferencia = $('#diferencia');
var diferencia2 = $('#diferencia2');
                                
var fromDate = from.datepicker('getDate')
var toDate = to.datepicker('getDate')
if (toDate && fromDate) {
    var difference = 0;
    var oneDay = 86400000; //ms per day
    var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay); 
    var difference2 = difference + 1;
    diferencia.val(difference);            
    diferencia2.val(difference2); 
}
    if(difference > n_noches){
    alert('el numero de noches no puede ser mayor a ' + n_noches +' noches');
    return false;   
    }
        var desde = "<?php echo $desde_plan; ?>";
        var hasta = "<?php echo $hasta_plan; ?>";
        
        var desde_plan= <?php echo $php_ini; ?>; // Quita las comillas para que sea un entero
        var hasta_plan= <?php echo $php_fin; ?>; // Igual aquí
 
      //  var llegada = document.form1.llegada.value;
       // var salida = document.form1.salida.value;
 
       // Yo preferiría buscar por id, por compatibilidad entre navegadores
        var llegada1 = document.getElementById('datepicker_1').value;
       // Y ya que estás usando jquery, puedes hacerlo así:
        var salida1 = document.getElementById('datepicker_2').value;
       
    var js_ini = new Date(llegada1).getTime() / 1000;
    var js_fin = new Date(salida1).getTime() / 1000;
    // Compruebas si los números a comparar están correctos
    alert(salida1);
    alert(desde_plan + ' - ' + hasta_plan + '\n' + js_ini + ' - ' + js_fin);        
        if(js_fin > hasta_plan) {
        alert('Fecha seleccionada fuera de rango, seleccionar fechas entre '+ desde +' hasta ' + hasta);
        document.form1.llegada.focus();
        return false;
        }
               
    }          
    $(function() {                                    
    $('#datepicker_1, #datepicker_2').datepicker({                         
    onSelect: datepicked  
        });                 
    //document.getElementById("diferencia").value = difference;
       
    });   
 
 
function Sumar(sel1, sel2, sel3){
    var total;
    var sel1 = document.getElementById("adultos").value;
    var sel2 = document.getElementById("ctdad_ninos_me").value;
    var sel3 = document.getElementById("ctdad_ninos_may").value;
    resultado = parseInt(sel1) + parseInt(sel2) + parseInt(sel3);
    document.getElementById('Resultado').value = resultado;
}

y esta es la parte del form:

Código PHP:

Ver original<form name="form1" id="form1" action="mostrar.php" method="post">
<table>
<tr>
<td>
        <input name="id_posada" type="hidden" value="<?php echo $id_posada; ?>" />
        <input name="id_plan" type="hidden" value="<?php echo $id_plan; ?>" />
 
        <fieldset>
           <legend>1. Plan:</legend>
           <label for="input-one"  class="otro"><strong>Posada:</strong></label>
            <label>
            <select name='select1' id='select1'>
            <option name='nombre_posada' value="<?php echo $nombre_posada; ?>"><?php echo $nombre_posada; ?></option>
            </select></label>
 
        <label for="input-two"  class="otro"><strong>Plan:</strong></label>
        
        <label>
        <select  class="otro" name="select2" id="select2">
          <option name='nombre_plan' value="<?php echo $nombre_plan; ?>"><?php echo $nombre_plan; ?></option>
          </select>
        </label>
        <label  class="otro"><strong>Incluye:</strong></label>
        <label><input type="text" name="incluye" value="<?php echo $incluye; ?>" class="fondo" readonly></label>
        </fieldset>     
</td>
 
<td>
        <fieldset>
            <legend>2. Personas:</legend>
            <label for="input-tres" class="floflo"><strong>Adultos:</strong></label>
            <label><select name="adultos" id="adultos" onChange="Sumar()">
              <option value="0">Seleccionar...</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select></label>
            
     
 
            <label for="input-cuatro" class="floflo"><strong>Niños Menos 6 años:</strong></label>
            <label><select name="ctdad_ninos_me" id="ctdad_ninos_me" onChange="Sumar()">
              <option value="0">Seleccionar...</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
            </label>
            <label for="input-doce" class="floflo"><strong>Niños Mayores 6 años:</strong></label>
            <label><select name="ctdad_ninos_may" id="ctdad_ninos_may" onChange="Sumar()">
              <option value="0">Seleccionar...</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
            </label>
            <label for="input-doce" class="floflo"><strong>Total Personas:</strong></label>
            <label><input name="Resultado" type="text" id="Resultado"  class="fondo" disabled size="14"></label>
    </fieldset>
            </td>
            </tr>
 
        <tr>
        <td>
        <fieldset>
            <legend>3. Habitaciones:</legend>
            <label for="input-ocho" class="floflo"><strong>Nº Habitaciones:</strong></label>
            <label>
            <select name="habitaciones" id="habitaciones">
              <option value="0">Seleccionar...</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
            </label>
            <label>Para seleccionar varios tipos de habitaciones hacer clic en cada opción y mantener presionadas teclas Ctrl + C</label>
            <label for="input-siete" class="floflo"><strong>Tipo Habitación:</strong></label>
            <?php 
            // Consultar la base de datos
            
            $consulta_mysql="select tipo_habitacion_c from detalle_habitaciones WHERE id='$id'";
            $resultado=mysql_query($consulta_mysql,$conex);
 
            echo "<label><select name='tipo_habitacion_c[]' multiple size='3'>";
            while($fila=mysql_fetch_array($resultado)){
            echo "<option value='".$fila['tipo_habitacion_c']."'>".$fila['tipo_habitacion_c']." personas</option>";
            }
            mysql_free_result($resultado); 
            echo "</select></label>";
            
            ?>
            </fieldset>
        </td>
        
        <td>
<fieldset>
            <legend>4. Fechas:</legend>
            
            <label for="input-diez" class="floflo"><strong>Llegada:</strong></label>
            <label><input type="text" id="datepicker_1" name="llegada" class="datepicker" /></label>
            <label for="input-once" class="floflo"><strong>Salida:</strong></label>
            <label><input type="text" id="datepicker_2" name="salida" class="datepicker" /></label>
            <label for="input-doce" class="floflo"><strong>Nº Noches:</strong></label>
            <label><input type="text" id="n_dias" name="n_dias" readonly  class="fondo" value="<?php echo $n_dias ?>"></label>
            <label for="input-doce" class="floflo"><strong>Nº Días:</strong></label>
            <label><input type="text" id="n_noches" name="n_noches" readonly  class="fondo" value="<?php echo $n_noches ?>"></label>
</fieldset>
</td>
</tr>
</table>
<br />
            <p align="center"><input class="bt1" type="button" alt="SUBMIT" name="Regresar" value="Regresar" onClick="location.href='planes.php'" /> - <input class="bt2" type="submit" alt="SUBMIT" name="Submit" value="Cotizar" /></p>
</form>

emprear · #4 (**permalink**) 18/12/2012, 15:28

Seguimos en la misma, porque no se sabe ni con que formato ni que valor se generan con $php_fin
imaginando un valor no es muy dificil sacar la diferencia

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
//<![CDATA[
// un dia de diferencia 86400 segundos
// formato x defecto de datepicker mes/dia/año
   var salida1 = "12/04/2012";
   var hasta_plan= "12/05/2012";
   var js_ini = new Date(salida1).getTime() / 1000;
   var js_fin = new Date(hasta_plan).getTime() / 1000;
    alert(js_ini - js_fin);
    alert(js_fin - js_ini);
//]]>
</script>
</body>
</html>

según restes inicio de fin ó fin de inicio tendrás una diferencia de -1 +1 días

SAludos

kimmy · #5 (**permalink**) 18/12/2012, 15:36

la variable php que esta almacenada es asi por ejemplo 2012-12-20 y yo la convierto asi

Código PHP:

Ver original$php_ini = strtotime($desde_plan);
$php_fin = strtotime($hasta_plan);

al hacer un echo de $php_fin me arroja 1355097600

Entonces cuando trato de preguntar en el javascript si js_fin > hasta_plan no funciona

y al mostrar la variable js_fin me da NaN

kimmy · #6 (**permalink**) 18/12/2012, 16:13

La fecha en javascript viene asi 27/12/2012 y la de php 2012-12-29 por ejemplo.

De verdad estoy muy confundida. Solo me falta esto para terminar pero no se como hacerlo

emprear · #7 (**permalink**) 18/12/2012, 16:54

Sinceramente no entiendo muy bien lo que hacés, como veo dos valores recuperados desde el datepicker ne me cierra de dónde proviene esa fecha en php.

De todas formas ejecutá este ejemplo

Código PHP:

Ver original<?php
$fecha = "12/04/2012";
$tiempo_en_segundos = strtotime($fecha);
echo $tiempo_en_segundos;
?>
<br>
<script type="text/javascript">
//<![CDATA[
var tiempo_en_segundos = new Date('<?php echo $fecha; ?>').getTime() / 1000;
document.write(tiempo_en_segundos);
//]]>
</script>

como ves ambas cosas, $tiempo_en_segundos (php) y tiempo_en_segundos (js) devuelven los mismo, es decir una cantidad x de segundos para una fecha dada, es decir son comparables, y a mayor cantidad de segundos, más reciente la fecha.
En mi ejemplo ambas variables obtienen el resultado desde un valor comun, la variable $fecha, vos tendrías que hacer que el tiempo_en_segundos de javascript sea tomado del valor del campo completado del datePicker
mirá este formulario
http://luzdecielo.com/alquiler.bariloche?link=reservas
y poné las fechas mal, ¿es algo asi lo que estas queriendo hacer?
Saludos

kimmy · #8 (**permalink**) 18/12/2012, 16:59

probé cambiando la fecha del datepicker en formato YYYY/MM/DD y si funciona, pero el problema es que tengo que mostrar la fecha al cliente en formato DD/MM/YYYY.

Cómo hago para convertir dentro de la función javascript la fecha DD/MM/YYYY a YYYY/MM/DD?

La fecha php la tengo que usar porque debo verificar que si una persona desea hacer una reservación en un hotel, la fecha no debe ser mayor a la almacenada en mysql (esta fecha la ha cargado previamente el administrador de la página).

Aqui es donde lo uso:

http://vamonosdevacaciones.com.ve/co...otizar=Cotizar

emprear · #9 (**permalink**) 18/12/2012, 17:17

alguien estuvo haciendo algo parecido por aqui
http://www.forosdelweb.com/f13/cambi...9/#post4333568

Saludos

kimmy · #10 (**permalink**) 18/12/2012, 17:29

Lo hice asi, pero no funciono:

Código Javascript:

Ver originalvar llegadas = llegada1.split("/");
 
var ano =a[0];
var mes =a[1];
var dia =a[2];
 
var fecha1 = dia+"/"+mes+"/"+ano;
 
 var salidas = salida1.split("/");
 
var ano1 =a[0];
var mes1 =a[1];
var dia1 =a[2];
 
var fecha2 = dia1+"/"+mes1+"/"+ano1;
 
    var js_ini = new Date(fecha1).getTime();
    var js_fin = new Date(fecha2).getTime();

emprear · #11 (**permalink**) 18/12/2012, 17:37

Cita:

Iniciado por kimmy

Lo hice asi, pero no funciono:

Código Javascript:

Ver originalvar llegadas = llegada1.split("/");
 
var ano =a[0];
var mes =a[1];
var dia =a[2];
 
var fecha1 = dia+"/"+mes+"/"+ano;
 
 var salidas = salida1.split("/");
 
var ano1 =a[0];
var mes1 =a[1];
var dia1 =a[2];
 
var fecha2 = dia1+"/"+mes1+"/"+ano1;
 
    var js_ini = new Date(fecha1).getTime();
    var js_fin = new Date(fecha2).getTime();

no tenés que copiar literalmente

var a = fechaAsignacionI.split("-");

pero en tu caso a no es nada, tu variable es llegadas/salidas
llegadas[0]
salidas[0]
etc

kimmy · #12 (**permalink**) 18/12/2012, 17:42

si, tienes razón después lo noté. Ahora quedó asi y funciona:

Código Javascript:

Ver original// Yo preferiría buscar por id, por compatibilidad entre navegadores
        var llegada1 = document.getElementById('datepicker_1').value;
       // Y ya que estás usando jquery, puedes hacerlo así:
        var salida1 = document.getElementById('datepicker_2').value;
       
var llegadas = llegada1.split("/");
 
var ano =llegadas[0];
var mes =llegadas[1];
var dia =llegadas[2];
 
var fecha1 = dia+"/"+mes+"/"+ano;
 
 var salidas = salida1.split("/");
 
var ano1 =salidas[0];
var mes1 =salidas[1];
var dia1 =salidas[2];
 
var fecha2 = dia1+"/"+mes1+"/"+ano1;
 
var js_ini = new Date(fecha1).getTime()/1000;
var js_fin = new Date(fecha2).getTime()/1000;

Lo único que me falta resolver es que el usuario no pueda aceptar (pasar a la otra página) hasta que se cumpla esto.

Muchas gracias por tu ayuda, tiempo y paciencia.

kimmy · #13 (**permalink**) 18/12/2012, 19:24

Cómo puede validar esta funcion al hacer submit para que no pueda pasar hasta que esten los datos correctos.

????

emprear · #14 (**permalink**) 18/12/2012, 21:07

Lee este
http://www.forosdelweb.com/f13/forma...8/#post4295391
este
http://www.forosdelweb.com/f13/valid...3/#post4213498
y este otro ejemplo
http://www.forosdelweb.com/f13/como-...3/#post4284386
SAludos

kimmy · #15 (**permalink**) 18/12/2012, 21:57

Gracias por la ayuda, pero es diferente con jquery?

Estoy tratando de hacerlo con jquery.validate.js pero no funciona. Lo coloqué asi:

Código Javascript:

Ver original<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-es.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
 
$(document).ready(function() 
    {
   $("#datepicker").datepicker();
    }
);
 
$("#datepicker_1").datepicker({ minDate: new Date() });
 
</script>
<script type="text/javascript">
$().ready(function() {
    $("#form1").validate({
var datepicked = function() {
var n_noches=  "<?php echo $n_noches; ?>";
var from = $('#datepicker_1');          
var to = $('#datepicker_2');          
var diferencia = $('#diferencia');
var diferencia2 = $('#diferencia2');
                                
var fromDate = from.datepicker('getDate')
var toDate = to.datepicker('getDate')
if (toDate && fromDate) {
    var difference = 0;
    var oneDay = 86400000; //ms per day
    var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay); 
    var difference2 = difference + 1;
    diferencia.val(difference);            
    diferencia2.val(difference2); 
}
    if(difference > n_noches){
    alert('el numero de noches no puede ser mayor a ' + n_noches +' noches');
    return false;   
    }
    
    
        var desde = "<?php echo $desde2; ?>";
        var hasta = "<?php echo $hasta2; ?>";
        
        var desde_plan= <?php echo $php_ini; ?>; // Quita las comillas para que sea un entero
        var hasta_plan= <?php echo $php_fin; ?>; // Igual aquí
 
 
       // Yo preferiría buscar por id, por compatibilidad entre navegadores
        var llegada1 = document.getElementById('datepicker_1').value;
       // Y ya que estás usando jquery, puedes hacerlo así:
        var salida1 = document.getElementById('datepicker_2').value;
       
var llegadas = llegada1.split("/");
 
var ano =llegadas[0];
var mes =llegadas[1];
var dia =llegadas[2];
 
var fecha1 = dia+"/"+mes+"/"+ano;
 
 var salidas = salida1.split("/");
 
var ano1 =salidas[0];
var mes1 =salidas[1];
var dia1 =salidas[2];
 
var fecha2 = dia1+"/"+mes1+"/"+ano1;
 
 
    var js_ini = new Date(fecha1).getTime()/1000;
    var js_fin = new Date(fecha2).getTime()/1000;
    // Compruebas si los números a comparar están correctos
        if(js_fin > hasta_plan) {
        //alert("Has escrito: " + $("#TextBox1″).val());
        alert('Fecha seleccionada fuera de rango, seleccionar fechas entre '+ desde +' hasta ' + hasta);
        document.form1.llegada.focus();
        return false;
        }
               
    }          
    $(function() {                                    
    $('#datepicker_1, #datepicker_2').datepicker({                         
    onSelect: datepicked  
        });                 
       
    });   
 
 
 
function Sumar(sel1, sel2, sel3){
    var total;
    var sel1 = document.getElementById("adultos").value;
    var sel2 = document.getElementById("ctdad_ninos_me").value;
    var sel3 = document.getElementById("ctdad_ninos_may").value;
    resultado = parseInt(sel1) + parseInt(sel2) + parseInt(sel3);
    document.getElementById('Resultado').value = resultado;
}
});

Por qué no funciona?