APORTE Validar Fecha con DatePicker

[xfxstudios]

Bueno les traigo este aporte para los que lo necesiten, con el podran validar en tiempo real si hay disponibilidad de una fecha solo al seleccionarla:

[xfxstudios]

Parte 1:
Llamamos los archivos necesarios para que funcione nuestro Datepicker:

Código HTML:

<link href="../../jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
        <link href="../../jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
        <link href="../../jQueryAssets/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css">
        <script src="../../jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="../../jQueryAssets/jquery.ui-1.10.4.datepicker.min.js" type="text/javascript"></script>
 

[xfxstudios]

Parte 2:
Luego creamos nuestro FORM:

Código HTML:

<form>
<input type="text" id="Datepicker1" name="fecha"  onChange="javascript:recargar();" value="" required>
<div id="recargado"></div><!--este es el div que se va a actualizar con la informacion-->
</form>
 

[xfxstudios]

Como pueden ver tiene la funcion onChange que llama nuestro script.
aqui el script que consulta la fecha sin refrescar la pagina:

Código Javascript:

<script type="text/javascript">
function recargar(){
valorCaja2 = document.getElementById("Datepicker1").value;/*aqui selecciona el input que tiene el valor a pasar*/
$.ajax({
/*data: parametros,*/
url: 'consulta_fecha.php?fecha='+valorCaja2,
type: 'get',
beforeSend: function () {
$("#recargado").html("Consultando, espere por favor...");
},
success: function (response) {
$("#recargado").html(response);
//document.getElementById("primer").style.display = "none";
}
});
}
var estado = 0;
function pasarProceso(valor1, valor2) {
if (estado == 0) {
setTimeout(realizaProceso,2000,valor1,valor2);
estado = estado + 1;
}
else {
estado = 0;
}
}
</script>
 

[xfxstudios]

Parte 4:
codigo que llama al datepicker:

Código Javascript:

<script type="text/javascript">
$(function() {
    $( "#Datepicker1" ).datepicker({
        autoSize: true,
            dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
            dayNamesMin: ['Dom', 'Lu', 'Ma', 'Mi', 'Je', 'Vi', 'Sa'],
            firstDay: 1,
            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'],
            dateFormat: 'yy-mm-dd',
            minDate: 0,
            changeMonth: true,
            /*numberOfMonths: 2,
            showButtonPanel: true*/
            /*changeYear: true*/
            }); 
});
</script>
 

[xfxstudios]

Paso 5:
y este es el script php que consulta la fecha y nos envia la info desde otra pagina:

Código PHP:

<?php
$fecha = $_GET['fecha'];
?>
<?php
$mysqli = new MySQLi($hostname_seguridad, $username_seguridad, $password_seguridad, $database_seguridad);
$fechas = $mysqli->query("SELECT fecha FROM cronograma_cursos WHERE fecha = '$_GET[fecha]'");
$row_fechas = $fechas->fetch_assoc();
$totalRows_fechas = mysqli_num_rows($fechas);
$total = mysqli_num_rows($fechas);
//aqui validamos el parametro que necesitamos en este caso si el registro esta repetido 3 o mas veces
if($total >= 3) {
    echo "<b style='color:#FF0004'>Fecha No disponible</b>";
}
    else {
        
    echo "<b style='color:#00B503'>Fecha Disponible</b>";
    }
?>
 

[xfxstudios]

paso 6:
En caso de querer bloquear las fechas directamente al cargar la pagina, estros serían lso script:
Codigo que consulta al abrir la pagina y convierte el resultado en json para bloquear las fechas recuperadas:

Código PHP:

<?php
$data = new MySQLi($hostname_seguridad, $username_seguridad, $password_seguridad, $database_seguridad);
$fecha = $data->query("SELECT * FROM cronograma_cursos");
$row_fecha = $fecha->fetch_assoc();
$totalRows_fecha = mysqli_num_rows($fecha);
if(mysqli_num_rows($fecha)>0)
{
while($row = mysqli_fetch_assoc($fecha))
{
    $dispo[] = $row['fecha'];
}
$dispo_json = json_encode($dispo);
$dispo_json = stripslashes($dispo_json);
$dispo_json = str_replace("[","", $dispo_json);
$dispo_json = str_replace("]","", $dispo_json);
}
?>
 

[xfxstudios]

paso 7:
Funcion datepicker que bloquea las fechas recibidas:

Código Javascript:

<script type="text/javascript">
$(function() {
    $( "#Datepicker1" ).datepicker({
        autoSize: true,
            dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
            dayNamesMin: ['Dom', 'Lu', 'Ma', 'Mi', 'Je', 'Vi', 'Sa'],
            firstDay: 1,
            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'],
            dateFormat: 'yy-mm-dd',
            minDate: 0,
            beforeShowDay: checkAvailability,
            changeMonth: true,
            /*numberOfMonths: 2,
            showButtonPanel: true*/
            /*changeYear: true*/
            }); 
var $myBadDates = new Array(<?php echo $dispo_json ?>);
    function checkAvailability(mydate){
    var $return=true;
    var $returnclass ="available";
    $checkdate = $.datepicker.formatDate('yy-mm-dd', mydate);
    for(var i = 0; i < $myBadDates.length; i++)
        {    
           if($myBadDates[i] == $checkdate)
              {
            $return = false;
            $returnclass= "unavailable";
            }
        }
    return [$return,$returnclass];
    }
});
</script>
 

espero les sirva....

[xfxstudios]

Disculpen, lo cree así porque no me deja crearlo en un solo post, me manda a un capcha a cada rato y luego se queda en blanco la pantalla.

[NSD]

2 librerías js, 3 hojas de estilo, 30 lineas de configuración, un script php vulnerable a ataques de inyección sql: ¿todo eso para un simple datepicker?
No es por menospreciar tu aporte, pero vamos, que con 50 lineas de css, 100 de js nativo (sin librerías) y unas 40 de php se puede hacer sin problemas y logrando un efecto mejor.

Personalmente le veo mas problemas que soluciones. No te lo tomes a mal, solo es mi opinión. Saludos.

[xfxstudios]

Iniciado por NSD

2 librerías js, 3 hojas de estilo, 30 lineas de configuración, un script php vulnerable a ataques de inyección sql: ¿todo eso para un simple datepicker?
No es por menospreciar tu aporte, pero vamos, que con 50 lineas de css, 100 de js nativo (sin librerías) y unas 40 de php se puede hacer sin problemas y logrando un efecto mejor.

Personalmente le veo mas problemas que soluciones. No te lo tomes a mal, solo es mi opinión. Saludos.

Gracias por tu opinión, en tal caso fuere sido mas apreciable la solución que mencionas, pero igual gracias fue muy productivo de verdad!

[NSD]

Gracias por tu opinión, en tal caso fuere sido mas apreciable la solución que mencionas, pero igual gracias fue muy productivo de verdad!

Note el sarcasmo.
Mas allá de eso, es tu aporte no el mio.

¿Quieres ver la solución terminada? el merito esta en encontrarla y luego en compartirla, no en pedirla hecha.

En fin.

calendario.sql

Código MySQL:

CREATE TABLE IF NOT EXISTS `reservas` (
  `codigo` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `fecha` date NOT NULL,
  PRIMARY KEY (`codigo`),
  UNIQUE KEY `fecha` (`fecha`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=6 ;
 
INSERT INTO `reservas` (`codigo`, `fecha`) VALUES
(3, '2015-06-04'),
(1, '2015-06-10'),
(2, '2015-06-13'),
(5, '2015-06-16'),
(4, '2015-06-25');
 

calendario.php

Código PHP:

<?php
    if($_SERVER["REQUEST_METHOD"] === "POST") {
        $date = DateTime::createFromFormat("Y-m-d", $_POST["datepicker"]);
        if(!($date && ($date->format("Y-m-d") === $_POST["datepicker"])))
            die("Fecha invalida.");
 
        $mysqli = new Mysqli("localhost", "root", "", "calendario");
        $reservas = $mysqli->query("SELECT DATE_FORMAT(fecha, '%d') dia
                        FROM reservas
                        WHERE fecha BETWEEN '".$date->format("Y-m-")."01' AND LAST_DAY('".$date->format("Y-m-d")."')
                        ORDER BY fecha ASC
                        LIMIT 31");
        
        $fechas = [];        
        while($reserva = $reservas->fetch_assoc()) {
            $fechas = array_pad($fechas, $reserva["dia"] - 1, false);
            $fechas[] = true;
        }
        $fechas = array_pad($fechas, 31, false);
        
        die(json_encode($fechas));
    }
 

calendario.css

Código CSS:

table.calendar{
    width: 400px;
    margin: 50px auto;
    box-shadow: 0 0 4px #AAA;
    font-family: arial;
    border: 2px solid #2980b9;
    padding: 0;
    border-collapse: collapse;
}
 
table.calendar th{
    background-color: #2980b9;
    color: #f9f9f9;
    padding: 6px 0;
    text-transform: uppercase;
    text-align: center;
    width: 14%;
}
 
table.calendar th.action{
    font-size: 20px;
    cursor: pointer;
}
 
table.calendar th.action:hover {
    background-color: #ecf0f1;
    color: #3498db;
}
 
table.calendar td{
    background-color: #f9f9f9;
    border: 1px solid #eee;
    color: #2c3e50;
    padding: 6px 0;
    text-transform: uppercase;
    text-align: center;
    user-select: none;
}
 
table.calendar td.invalid {
    background-color: #AAA;
    color: #333;
}
 
table.calendar td.valid:hover,
table.calendar td.valid.active {
    background-color: #3498db;
    color: #ecf0f1;
}
 

calendario.js

Código Javascript:

Calendar = function(form, params) {
    params || (params = {});
    params.name || (params.name = "datepicker");
    this.ajxcheck = params.ajxcheck;
    this.on = params.on;
    this.actives = [];
    this.date = (params.date ? params.date : new Date());
    this.form = form;
    this.input = document.createElement("input");
    this.input.type = "hidden";
    this.input.name = params.name;
    this.input.value = this.getDate();
    this.form.appendChild(this.input);
    this.table = this.form.appendChild(document.createElement("table"));
    this.table.classList.add("calendar");
    this.check();
}
 
Calendar.prototype = {
    "i18n" : {
        "months" : ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        "days" : ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]
    },
    "check" : function() {
        if(this.ajxcheck)
            this.ajax(this.ajxcheck, {
               "success" : this.draw.bind(this),
               "error" : function(e) { console.log(e); }
            });
        else
            this.draw([]);
    },
    "draw" : function(check) {
        var row, cell, firstDay, countDays, init = true, residue = 0, currentDay, thisDay;
        while (this.table.firstChild) this.table.removeChild(this.table.lastChild);
 
        row = this.table.appendChild(document.createElement("tr"));
 
        cell = row.appendChild(document.createElement("th"));
        cell.classList.add("action");
        cell.innerHTML = "<";
        cell.addEventListener("click", this.change_month.bind(this, -1));
 
        cell = row.appendChild(document.createElement("th"));
        cell.colSpan = 5;
        cell.innerHTML = this.i18n.months[this.date.getMonth()] + " " + this.date.getFullYear();
        cell.addEventListener("click", this.change_month.bind(this, -1));
 
        cell = row.appendChild(document.createElement("th"));
        cell.classList.add("action");
        cell.innerHTML = ">";
        cell.addEventListener("click", this.change_month.bind(this, 1));
 
        row = this.table.appendChild(document.createElement("tr"));
        for(var day=0; day<this.i18n.days.length; day++)
            row.appendChild(document.createElement("th")).innerHTML = this.i18n.days[day].substring(0, 3);
 
        firstDay = (new Date(this.date.getFullYear(), this.date.getMonth(), 1)).getDay();
        countDays = (new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0)).getDate();
 
        for(currentDay=0; currentDay < countDays+firstDay; currentDay++) {
            if(currentDay % 7 == 0) {
                row = this.table.appendChild(document.createElement("tr"));
                residue = 7;
            }
 
            if(init) {
                if(currentDay < firstDay)
                    row.appendChild(document.createElement("td"));
                else
                    init = false;
            }
 
            if(!init) {
                thisDay = (currentDay - firstDay + 1);
                cell = row.appendChild(document.createElement("td"));
                cell.innerHTML = thisDay;
 
                if(!check[currentDay - firstDay]) {
                    cell.classList.add("valid");
                    cell.addEventListener("click", function(cell, thisDay) {
                        var active = this.table.getElementsByClassName("active");
                        while(active.length) active[0].classList.remove("active");
                        cell.classList.add("active");
                        this.actives.push(cell);
                        this.date.setDate(thisDay);
                        this.input.value = this.getDate();
 
                        if(this.on && this.on.change)
                            this.on.change(this.getDate());
                    }.bind(this, cell, thisDay));
 
                    if(this.date.getDate() == thisDay) {
                        cell.classList.add("active");
                        this.actives.push(cell);
                    }
                } else {
                    cell.classList.add("invalid");
                }
 
            }
 
            residue--;
        }
 
        for(currentDay=0; currentDay<residue; currentDay++)
            row.appendChild(document.createElement("td"));
    },
    "change_month" : function(inc) {
        var newMonth = this.date.getMonth() + inc,
            newYear = this.date.getFullYear() + (newMonth < 0 ? -1 : (newMonth > 11 ? 1 : 0));
        newMonth = (newMonth < 0 ? 11 : (newMonth > 11 ? 0 : newMonth));
 
        this.date = (new Date(newYear, newMonth, this.date.getDate()));
        this.input.value = this.getDate();
        this.check();
        if(this.on && this.on.change)
            this.on.change(this.getDate());
    },
    "getDate" : function() {
        var month = (this.date.getMonth() + 1),
            day = this.date.getDate();
        return this.date.getFullYear() + "-" + (month < 10 ? "0" : "") + month + "-" + (day < 10 ? "0" : "") + day;
    },
    "ajax" : function(url, callbacks) {
        var request = new XMLHttpRequest();
        request.open("post", url);
        request.onreadystatechange = function(callbacks) {
            if(this.readyState === 4) {
                var response = this.responseText,
                    success = false;
 
                if(this.status == 200) {
                    try {
                        response = JSON.parse(response);
                        success = true;
                    } catch(e) { }
                }
 
                if(success)
                {
                    if(callbacks.success)
                        callbacks.success(response);
                }
                else if(callbacks.error)
                    callbacks.error({"response" : response});
            }
        }.bind(request, callbacks);
 
        request.send(new FormData(this.form));
    }
}
 

calendario.html

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Calendario</title>
        <link rel="stylesheet" href="calendario.css">        
        <script src="calendario.js"></script>
    </head>
    
    <body>   
        <form id="calendar"></form>
        
        <script>
            new Calendar(document.getElementById("calendar"), { "ajxcheck" : "calendario.php" });
        </script>        
    </body>  
</html>
 

Por supuesto que se puede mejorar, pero eso te lo dejo a ti.

[pateketrueke]

Definitivamente existen mejores formas, más estables, con pruebas y usando estándares modernos.

Sinceramente tampoco le veo el "aporte" a un código que parece escrito hace 10 años.

[xfxstudios]

Ok amigo gracias por el apoyo, igual con esos comentarios aprende uno, recuerden, hasta de lo malo se saca algo bueno!!!!! cuídense (y no hay sarcasmo).