Tema: APORTE Validar Fecha con DatePicker
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 29/06/2015, 13:46
Avatar de NSD
NSD
Colaborador
  
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 12 años
Puntos: 320
Respuesta: APORTE Validar Fecha con DatePicker
Cita:
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: 
Ver original
  1. CREATE TABLE IF NOT EXISTS `reservas` (
  2.   `codigo` int(10) unsigned NOT NULL AUTO_INCREMENT,
  3.   `fecha` date NOT NULL,
  4.   PRIMARY KEY (`codigo`),
  5.   UNIQUE KEY `fecha` (`fecha`)
  6. ) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=6 ;
  7.  
  8. INSERT INTO `reservas` (`codigo`, `fecha`) VALUES
  9. (3, '2015-06-04'),
  10. (1, '2015-06-10'),
  11. (2, '2015-06-13'),
  12. (5, '2015-06-16'),
  13. (4, '2015-06-25');

calendario.php
Código PHP: 
Ver original
  1. <?php
  2.     if($_SERVER["REQUEST_METHOD"] === "POST") {
  3.         $date = DateTime::createFromFormat("Y-m-d", $_POST["datepicker"]);
  4.         if(!($date && ($date->format("Y-m-d") === $_POST["datepicker"])))
  5.             die("Fecha invalida.");
  6.  
  7.         $mysqli = new Mysqli("localhost", "root", "", "calendario");
  8.         $reservas = $mysqli->query("SELECT DATE_FORMAT(fecha, '%d') dia
  9.                         FROM reservas
  10.                         WHERE fecha BETWEEN '".$date->format("Y-m-")."01' AND LAST_DAY('".$date->format("Y-m-d")."')
  11.                         ORDER BY fecha ASC
  12.                         LIMIT 31");
  13.         
  14.         $fechas = [];        
  15.         while($reserva = $reservas->fetch_assoc()) {
  16.             $fechas = array_pad($fechas, $reserva["dia"] - 1, false);
  17.             $fechas[] = true;
  18.         }
  19.         $fechas = array_pad($fechas, 31, false);
  20.         
  21.         die(json_encode($fechas));
  22.     }

calendario.css
Código CSS: 
Ver original
  1. table.calendar{
  2.     width: 400px;
  3.     margin: 50px auto;
  4.     box-shadow: 0 0 4px #AAA;
  5.     font-family: arial;
  6.     border: 2px solid #2980b9;
  7.     padding: 0;
  8.     border-collapse: collapse;
  9. }
  10.  
  11. table.calendar th{
  12.     background-color: #2980b9;
  13.     color: #f9f9f9;
  14.     padding: 6px 0;
  15.     text-transform: uppercase;
  16.     text-align: center;
  17.     width: 14%;
  18. }
  19.  
  20. table.calendar th.action{
  21.     font-size: 20px;
  22.     cursor: pointer;
  23. }
  24.  
  25. table.calendar th.action:hover {
  26.     background-color: #ecf0f1;
  27.     color: #3498db;
  28. }
  29.  
  30. table.calendar td{
  31.     background-color: #f9f9f9;
  32.     border: 1px solid #eee;
  33.     color: #2c3e50;
  34.     padding: 6px 0;
  35.     text-transform: uppercase;
  36.     text-align: center;
  37.     user-select: none;
  38. }
  39.  
  40. table.calendar td.invalid {
  41.     background-color: #AAA;
  42.     color: #333;
  43. }
  44.  
  45. table.calendar td.valid:hover,
  46. table.calendar td.valid.active {
  47.     background-color: #3498db;
  48.     color: #ecf0f1;
  49. }

calendario.js
Código Javascript: 
Ver original
  1. Calendar = function(form, params) {
  2.     params || (params = {});
  3.     params.name || (params.name = "datepicker");
  4.     this.ajxcheck = params.ajxcheck;
  5.     this.on = params.on;
  6.     this.actives = [];
  7.     this.date = (params.date ? params.date : new Date());
  8.     this.form = form;
  9.     this.input = document.createElement("input");
  10.     this.input.type = "hidden";
  11.     this.input.name = params.name;
  12.     this.input.value = this.getDate();
  13.     this.form.appendChild(this.input);
  14.     this.table = this.form.appendChild(document.createElement("table"));
  15.     this.table.classList.add("calendar");
  16.     this.check();
  17. }
  18.  
  19. Calendar.prototype = {
  20.     "i18n" : {
  21.         "months" : ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
  22.         "days" : ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]
  23.     },
  24.     "check" : function() {
  25.         if(this.ajxcheck)
  26.             this.ajax(this.ajxcheck, {
  27.                "success" : this.draw.bind(this),
  28.                "error" : function(e) { console.log(e); }
  29.             });
  30.         else
  31.             this.draw([]);
  32.     },
  33.     "draw" : function(check) {
  34.         var row, cell, firstDay, countDays, init = true, residue = 0, currentDay, thisDay;
  35.         while (this.table.firstChild) this.table.removeChild(this.table.lastChild);
  36.  
  37.         row = this.table.appendChild(document.createElement("tr"));
  38.  
  39.         cell = row.appendChild(document.createElement("th"));
  40.         cell.classList.add("action");
  41.         cell.innerHTML = "<";
  42.         cell.addEventListener("click", this.change_month.bind(this, -1));
  43.  
  44.         cell = row.appendChild(document.createElement("th"));
  45.         cell.colSpan = 5;
  46.         cell.innerHTML = this.i18n.months[this.date.getMonth()] + " " + this.date.getFullYear();
  47.         cell.addEventListener("click", this.change_month.bind(this, -1));
  48.  
  49.         cell = row.appendChild(document.createElement("th"));
  50.         cell.classList.add("action");
  51.         cell.innerHTML = ">";
  52.         cell.addEventListener("click", this.change_month.bind(this, 1));
  53.  
  54.         row = this.table.appendChild(document.createElement("tr"));
  55.         for(var day=0; day<this.i18n.days.length; day++)
  56.             row.appendChild(document.createElement("th")).innerHTML = this.i18n.days[day].substring(0, 3);
  57.  
  58.         firstDay = (new Date(this.date.getFullYear(), this.date.getMonth(), 1)).getDay();
  59.         countDays = (new Date(this.date.getFullYear(), this.date.getMonth() + 1, 0)).getDate();
  60.  
  61.         for(currentDay=0; currentDay < countDays+firstDay; currentDay++) {
  62.             if(currentDay % 7 == 0) {
  63.                 row = this.table.appendChild(document.createElement("tr"));
  64.                 residue = 7;
  65.             }
  66.  
  67.             if(init) {
  68.                 if(currentDay < firstDay)
  69.                     row.appendChild(document.createElement("td"));
  70.                 else
  71.                     init = false;
  72.             }
  73.  
  74.             if(!init) {
  75.                 thisDay = (currentDay - firstDay + 1);
  76.                 cell = row.appendChild(document.createElement("td"));
  77.                 cell.innerHTML = thisDay;
  78.  
  79.                 if(!check[currentDay - firstDay]) {
  80.                     cell.classList.add("valid");
  81.                     cell.addEventListener("click", function(cell, thisDay) {
  82.                         var active = this.table.getElementsByClassName("active");
  83.                         while(active.length) active[0].classList.remove("active");
  84.                         cell.classList.add("active");
  85.                         this.actives.push(cell);
  86.                         this.date.setDate(thisDay);
  87.                         this.input.value = this.getDate();
  88.  
  89.                         if(this.on && this.on.change)
  90.                             this.on.change(this.getDate());
  91.                     }.bind(this, cell, thisDay));
  92.  
  93.                     if(this.date.getDate() == thisDay) {
  94.                         cell.classList.add("active");
  95.                         this.actives.push(cell);
  96.                     }
  97.                 } else {
  98.                     cell.classList.add("invalid");
  99.                 }
  100.  
  101.             }
  102.  
  103.             residue--;
  104.         }
  105.  
  106.         for(currentDay=0; currentDay<residue; currentDay++)
  107.             row.appendChild(document.createElement("td"));
  108.     },
  109.     "change_month" : function(inc) {
  110.         var newMonth = this.date.getMonth() + inc,
  111.             newYear = this.date.getFullYear() + (newMonth < 0 ? -1 : (newMonth > 11 ? 1 : 0));
  112.         newMonth = (newMonth < 0 ? 11 : (newMonth > 11 ? 0 : newMonth));
  113.  
  114.         this.date = (new Date(newYear, newMonth, this.date.getDate()));
  115.         this.input.value = this.getDate();
  116.         this.check();
  117.         if(this.on && this.on.change)
  118.             this.on.change(this.getDate());
  119.     },
  120.     "getDate" : function() {
  121.         var month = (this.date.getMonth() + 1),
  122.             day = this.date.getDate();
  123.         return this.date.getFullYear() + "-" + (month < 10 ? "0" : "") + month + "-" + (day < 10 ? "0" : "") + day;
  124.     },
  125.     "ajax" : function(url, callbacks) {
  126.         var request = new XMLHttpRequest();
  127.         request.open("post", url);
  128.         request.onreadystatechange = function(callbacks) {
  129.             if(this.readyState === 4) {
  130.                 var response = this.responseText,
  131.                     success = false;
  132.  
  133.                 if(this.status == 200) {
  134.                     try {
  135.                         response = JSON.parse(response);
  136.                         success = true;
  137.                     } catch(e) { }
  138.                 }
  139.  
  140.                 if(success)
  141.                 {
  142.                     if(callbacks.success)
  143.                         callbacks.success(response);
  144.                 }
  145.                 else if(callbacks.error)
  146.                     callbacks.error({"response" : response});
  147.             }
  148.         }.bind(request, callbacks);
  149.  
  150.         request.send(new FormData(this.form));
  151.     }
  152. }

calendario.html
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Calendario</title>
  5.         <link rel="stylesheet" href="calendario.css">        
  6.         <script src="calendario.js"></script>
  7.     </head>
  8.     
  9.     <body>   
  10.         <form id="calendar"></form>
  11.         
  12.         <script>
  13.             new Calendar(document.getElementById("calendar"), { "ajxcheck" : "calendario.php" });
  14.         </script>        
  15.     </body>  
  16. </html>

Por supuesto que se puede mejorar, pero eso te lo dejo a ti.
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios