Foros del Web » Programando para Internet » Javascript »

Mejorar Calendario Javascript

Estas en el tema de Mejorar Calendario Javascript en el foro de Javascript en Foros del Web. Hola tengo el siguente problema, resulta que es un proyecto ya empezado con javascript y la verdad no se mucho de ello, Mi problema es ...
  #1 (permalink)  
Antiguo 20/02/2013, 15:38
 
Fecha de Ingreso: febrero-2013
Mensajes: 13
Antigüedad: 11 años, 2 meses
Puntos: 0
Pregunta Mejorar Calendario Javascript

Hola tengo el siguente problema, resulta que es un proyecto ya empezado con javascript y la verdad no se mucho de ello, Mi problema es el calendario,

Con el calendario agrego una fecha sin problemas, el calendario es un .js que esta situado en una carpeta y archivo aparte, y en la parte de donde visualizo en calendario tengo codigo php el cual es el siguiente:

<?php
if ( isset ( $_POST['fecha'] ) )
{
$cFiltro_fecha2=$_POST['fecha'];
$cFiltro_fecha=fechanueva($cFiltro_fecha2);
echo "<input type = 'text' name = 'fecha' id = 'fecha' title='mm-dd-yyyy' size='10' class='inputfecha' value='$cFiltro_fecha2' onfocus = 'showCalendarControl(this);' readonly='readonly' style='cursor:pointer'>";
}
else {
$cFiltro_fecha2=date("m-d-Y");
$cFiltro_fecha=fechanueva($cFiltro_fecha2);
echo "<input type = 'text' name = 'fecha' id = 'fecha' title='mm-dd-yyyy' size='10' class='inputfecha' value='$cFiltro_fecha2' onfocus = 'showCalendarControl(this);' readonly='readonly' style='cursor:pointer'>";

}


function fechanueva($fechavieja)
{
list($m,$d,$a)=explode("-",$fechavieja);
return $a."-".$m."-".$d;
}


?>
  #2 (permalink)  
Antiguo 20/02/2013, 15:38
 
Fecha de Ingreso: febrero-2013
Mensajes: 13
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Mejorar Calendario Javascript

y el codigo del calendario.js es el siguente:

function positionInfo(object) {

var p_elm = object;

this.getElementLeft = getElementLeft;
function getElementLeft() {
var x = 0;
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
while (elm != null) {
if(elm.style.position == 'relative') {
break;
}
else {
x += elm.offsetLeft;
elm = elm.offsetParent;
}
}
return parseInt(x);
}

this.getElementWidth = getElementWidth;
function getElementWidth(){
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetWidth);
}

this.getElementRight = getElementRight;
function getElementRight(){
return getElementLeft(p_elm) + getElementWidth(p_elm);
}

this.getElementTop = getElementTop;
function getElementTop() {
var y = 0;
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
while (elm != null) {
if(elm.style.position == 'relative') {
break;
}
else {
y+= elm.offsetTop;
elm = elm.offsetParent;
}
}
return parseInt(y);
}

this.getElementHeight = getElementHeight;
function getElementHeight(){
var elm;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetHeight);
}

this.getElementBottom = getElementBottom;
function getElementBottom(){
return getElementTop(p_elm) + getElementHeight(p_elm);
}
}

function CalendarControl() {

var calendarId = 'CalendarControl';
var currentYear = 0;
var currentMonth = 0;
var currentDay = 0;

var selectedYear = 0;
var selectedMonth = 0;
var selectedDay = 0;

var months = ['Enero','Febrero','Marzo','Abril','Mayo','Junio',' Julio','Agosto','Septiembre','Octubre','Noviembre' ,'Diciembre'];
var dateField = null;

function getProperty(p_property){
var p_elm = calendarId;
var elm = null;

if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
if (elm != null){
if(elm.style){
elm = elm.style;
if(elm[p_property]){
return elm[p_property];
} else {
return null;
}
} else {
return null;
}
}
}

function setElementProperty(p_property, p_value, p_elmId){
var p_elm = p_elmId;
var elm = null;

if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
if((elm != null) && (elm.style != null)){
elm = elm.style;
elm[ p_property ] = p_value;
}
}

function setProperty(p_property, p_value) {
setElementProperty(p_property, p_value, calendarId);
}

function getDaysInMonth(year, month) {
return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
}

function getDayOfWeek(year, month, day) {
var date = new Date(year,month-1,day)
return date.getDay();
}

this.clearDate = clearDate;
function clearDate() {
dateField.value = '';
hide();
}

this.setDate = setDate;
function setDate(year, month, day) {
if (dateField) {
if (month < 10) {month = "0" + month;}
if (day < 10) {day = "0" + day;}

var dateString = month+"-"+day+"-"+year;
dateField.value = dateString;
hide();
}
return;
}

this.changeMonth = changeMonth;
function changeMonth(change) {
currentMonth += change;
currentDay = 0;
if(currentMonth > 12) {
currentMonth = 1;
currentYear++;
} else if(currentMonth < 1) {
currentMonth = 12;
currentYear--;
}

calendar = document.getElementById(calendarId);

calendar.innerHTML = calendarDrawTable();
}

this.changeYear = changeYear;
function changeYear(change) {
currentYear += change;
currentDay = 0;
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}

function getCurrentYear() {
var year = new Date().getYear();
if(year < 1900) year += 1900;
return year;
}

function getCurrentMonth() {
return new Date().getMonth() + 1;
}

function getCurrentDay() {
return new Date().getDate();
}

function calendarDrawTable() {

var dayOfMonth = 1;
var validDay = 0;
var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
var daysInMonth = getDaysInMonth(currentYear, currentMonth);
var css_class = null; //CSS class for each day

var table = "<table cellspacing='0' cellpadding='0' border='0'>";
table = table + "<tr class='header'>";
table = table + " <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>";
table = table + " <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
table = table + " <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&r aquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>& gt;</a></td>";
table = table + "</tr>";
table = table + "<tr><th>D</th><th>L</th><th>M</th><th>M</th><th>J</th><th>V</th><th>S</th></tr>";

for(var week=0; week < 6; week++) {
table = table + "<tr>";
for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
if(week == 0 && startDayOfWeek == dayOfWeek) {
validDay = 1;
} else if (validDay == 1 && dayOfMonth > daysInMonth) {
validDay = 0;
}

if(validDay) {
if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
css_class = 'current';
} else if (dayOfWeek == 0 || dayOfWeek == 6) {
css_class = 'weekend';
} else {
css_class = 'weekday';
}

table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+current Year+","+currentMonth+","+dayOfMonth+")\">"+dayOfM onth+"</a></td>";
dayOfMonth++;
} else {
table = table + "<td class='empty'>&nbsp;</td>";
}
}
table = table + "</tr>";
}

table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Borrar</a> | <a href='javascript:hideCalendarControl();'>Cerrar</a></td></tr>";
table = table + "</table>";

return table;
}

this.show = show;
function show(field) {
can_hide = 0;

// If the calendar is visible and associated with
// this field do not do anything.
if (dateField == field) {
return;
} else {
dateField = field;
}

if(dateField) {
try {
var dateString = new String(dateField.value);
var dateParts = dateString.split("-");

selectedMonth = parseInt(dateParts[0],10);
selectedDay = parseInt(dateParts[1],10);
selectedYear = parseInt(dateParts[2],10);
} catch(e) {}
}

if (!(selectedYear && selectedMonth && selectedDay)) {
selectedMonth = getCurrentMonth();
selectedDay = getCurrentDay();
selectedYear = getCurrentYear();
}

currentMonth = selectedMonth;
currentDay = selectedDay;
currentYear = selectedYear;

if(document.getElementById){

calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);

setProperty('display', 'block');

var fieldPos = new positionInfo(dateField);
var calendarPos = new positionInfo(calendarId);

var x = fieldPos.getElementLeft();
var y = fieldPos.getElementBottom();

setProperty('left', x + "px");
setProperty('top', y + "px");

if (document.all) {
setElementProperty('display', 'block', 'CalendarControlIFrame');
setElementProperty('left', x + "px", 'CalendarControlIFrame');
setElementProperty('top', y + "px", 'CalendarControlIFrame');
setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
}
}
}

this.hide = hide;
function hide() {
if(dateField) {
setProperty('display', 'none');
setElementProperty('display', 'none', 'CalendarControlIFrame');
dateField = null;
}
}

this.visible = visible;
function visible() {
return dateField
}

this.can_hide = can_hide;
var can_hide = 0;
}

var calendarControl = new CalendarControl();

function showCalendarControl(textField) {
// textField.onblur = hideCalendarControl;
calendarControl.show(textField);
}

function clearCalendarControl() {
calendarControl.clearDate();
}

function hideCalendarControl() {
if (calendarControl.visible()) {
calendarControl.hide();
}
}

function setCalendarControlDate(year, month, day) {
calendarControl.setDate(year, month, day);
}

function changeCalendarControlYear(change) {
calendarControl.changeYear(change);
}

function changeCalendarControlMonth(change) {
calendarControl.changeMonth(change);
}


document.write("<iframe id='CalendarControlIFrame' src='javascript:false;' frameBorder='0' scrolling='no'></iframe>");
document.write("<div id='CalendarControl'></div>");

Lo que necesito es que no se puedan seleccionar dias posteriores al dia actual, es decir que si estamos 20 de febrero no pueda seleccionar el 21 de febrero, el 22 y asi consecutivamente, espero disculpen mi ignorancia pero no se mucho de javascript y espero que me puedan ayudar
  #3 (permalink)  
Antiguo 21/02/2013, 09:12
 
Fecha de Ingreso: febrero-2013
Mensajes: 13
Antigüedad: 11 años, 2 meses
Puntos: 0
Pregunta CalendarJavascript

Como modificar este script para que me bloque fechas futuras al dia actual es decir que si estamos a 22 de febrero del 2013 me desactive apartir del 23 de febrero del 2013, pero que al llegar a esa fecha se active y sigan desactivadas las demas fechas futuras.


Código Javascript:
Ver original
  1. function CalendarControl() {
  2.  
  3.   var calendarId = 'CalendarControl';
  4.   var currentYear = 0;
  5.   var currentMonth = 0;
  6.   var currentDay = 0;
  7.  
  8.   var selectedYear = 0;
  9.   var selectedMonth = 0;
  10.   var selectedDay = 0;
  11.  
  12.   var months = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
  13.   var dateField = null;
  14.  
  15.   function getProperty(p_property){
  16.     var p_elm = calendarId;
  17.     var elm = null;
  18.  
  19.     if(typeof(p_elm) == "object"){
  20.       elm = p_elm;
  21.     } else {
  22.       elm = document.getElementById(p_elm);
  23.     }
  24.     if (elm != null){
  25.       if(elm.style){
  26.         elm = elm.style;
  27.         if(elm[p_property]){
  28.           return elm[p_property];
  29.         } else {
  30.           return null;
  31.         }
  32.       } else {
  33.         return null;
  34.       }
  35.     }
  36.   }
  37.  
  38.   function setElementProperty(p_property, p_value, p_elmId){
  39.     var p_elm = p_elmId;
  40.     var elm = null;
  41.  
  42.     if(typeof(p_elm) == "object"){
  43.       elm = p_elm;
  44.     } else {
  45.       elm = document.getElementById(p_elm);
  46.     }
  47.     if((elm != null) && (elm.style != null)){
  48.       elm = elm.style;
  49.       elm[ p_property ] = p_value;
  50.     }
  51.   }
  52.  
  53.   function setProperty(p_property, p_value) {
  54.     setElementProperty(p_property, p_value, calendarId);
  55.   }
  56.  
  57.   function getDaysInMonth(year, month) {
  58.     return [31,((!(year % 4 ) && ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
  59.   }
  60.  
  61.   function getDayOfWeek(year, month, day) {
  62.     var date = new Date(year,month-1,day)
  63.     return date.getDay();
  64.   }
  65.  
  66.   this.clearDate = clearDate;
  67.   function clearDate() {
  68.     dateField.value = '';
  69.     hide();
  70.   }
  71.  
  72.   this.setDate = setDate;
  73.   function setDate(year, month, day) {
  74.     if (dateField) {
  75.       if (month < 10) {month = "0" + month;}
  76.       if (day < 10) {day = "0" + day;}
  77.  
  78.       var dateString = month+"-"+day+"-"+year;
  79.       dateField.value = dateString;
  80.       hide();
  81.     }
  82.     return;
  83.   }
  84.  
  85.   this.changeMonth = changeMonth;
  86.   function changeMonth(change) {
  87.     currentMonth += change;
  88.     currentDay = 0;
  89.     if(currentMonth > 12) {
  90.       currentMonth = 1;
  91.       currentYear++;
  92.     } else if(currentMonth < 1) {
  93.       currentMonth = 12;
  94.       currentYear--;
  95.     }
  96.  
  97.     calendar = document.getElementById(calendarId);
  98.  
  99.     calendar.innerHTML = calendarDrawTable();
  100.   }
  101.  
  102.   this.changeYear = changeYear;
  103.   function changeYear(change) {
  104.     currentYear += change;
  105.     currentDay = 0;
  106.     calendar = document.getElementById(calendarId);
  107.     calendar.innerHTML = calendarDrawTable();
  108.   }
  109.  
  110.   function getCurrentYear() {
  111.     var year = new Date().getYear();
  112.     if(year < 1900) year += 1900;
  113.     return year;
  114.   }
  115.  
  116.   function getCurrentMonth() {
  117.     return new Date().getMonth() + 1;
  118.   }
  119.  
  120.   function getCurrentDay() {
  121.     return new Date().getDate();
  122.   }
  123.  
  124.   function calendarDrawTable() {
  125.  
  126.     var dayOfMonth = 1;
  127.     var validDay = 0;
  128.     var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
  129.     var daysInMonth = getDaysInMonth(currentYear, currentMonth);
  130.     var css_class = null; //CSS class for each day
  131.  
  132.     var table = "<table cellspacing='0' cellpadding='0' border='0'>";
  133.     table = table + "<tr class='header'>";
  134.     table = table + "  <td colspan='2' class='previous'><a href='javascript:changeCalendarControlMonth(-1);'>&lt;</a> <a href='javascript:changeCalendarControlYear(-1);'>&laquo;</a></td>";
  135.     table = table + "  <td colspan='3' class='title'>" + months[currentMonth-1] + "<br>" + currentYear + "</td>";
  136.     table = table + "  <td colspan='2' class='next'><a href='javascript:changeCalendarControlYear(1);'>&raquo;</a> <a href='javascript:changeCalendarControlMonth(1);'>&gt;</a></td>";
  137.     table = table + "</tr>";
  138.     table = table + "<tr><th>D</th><th>L</th><th>M</th><th>M</th><th>J</th><th>V</th><th>S</th></tr>";
  139.  
  140.     for(var week=0; week < 6; week++) {
  141.       table = table + "<tr>";
  142.       for(var dayOfWeek=0; dayOfWeek < 7; dayOfWeek++) {
  143.         if(week == 0 && startDayOfWeek == dayOfWeek) {
  144.           validDay = 1;
  145.         } else if (validDay == 1 && dayOfMonth > daysInMonth) {
  146.           validDay = 0;
  147.         }
  148.  
  149.         if(validDay) {
  150.           if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth) {
  151.             css_class = 'current';
  152.           } else if (dayOfWeek == 0 || dayOfWeek == 6) {
  153.             css_class = 'weekend';
  154.           } else {
  155.             css_class = 'weekday';
  156.           }
  157.  
  158.           table = table + "<td><a class='"+css_class+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\">"+dayOfMonth+"</a></td>";
  159.           dayOfMonth++;
  160.         } else {
  161.           table = table + "<td class='empty'>&nbsp;</td>";
  162.         }
  163.       }
  164.       table = table + "</tr>";
  165.     }
  166.  
  167.     table = table + "<tr class='header'><th colspan='7' style='padding: 3px;'><a href='javascript:clearCalendarControl();'>Borrar</a> | <a href='javascript:hideCalendarControl();'>Cerrar</a></td></tr>";
  168.     table = table + "</table>";
  169.  
  170.     return table;
  171.   }
  172.  
  173.   this.show = show;
  174.   function show(field) {
  175.     can_hide = 0;
  176.  
  177.     // If the calendar is visible and associated with
  178.     // this field do not do anything.
  179.     if (dateField == field) {
  180.       return;
  181.     } else {
  182.       dateField = field;
  183.     }
  184.  
  185.     if(dateField) {
  186.       try {
  187.         var dateString = new String(dateField.value);
  188.         var dateParts = dateString.split("-");
  189.        
  190.         selectedMonth = parseInt(dateParts[0],10);
  191.         selectedDay = parseInt(dateParts[1],10);
  192.         selectedYear = parseInt(dateParts[2],10);
  193.       } catch(e) {}
  194.     }
  195.  
  196.     if (!(selectedYear && selectedMonth && selectedDay)) {
  197.       selectedMonth = getCurrentMonth();
  198.       selectedDay = getCurrentDay();
  199.       selectedYear = getCurrentYear();
  200.     }
  201.  
  202.     currentMonth = selectedMonth;
  203.     currentDay = selectedDay;
  204.     currentYear = selectedYear;
  205.  
  206.     if(document.getElementById){
  207.  
  208.       calendar = document.getElementById(calendarId);
  209.       calendar.innerHTML = calendarDrawTable(currentYear, currentMonth);
  210.  
  211.       setProperty('display', 'block');
  212.  
  213.       var fieldPos = new positionInfo(dateField);
  214.       var calendarPos = new positionInfo(calendarId);
  215.  
  216.       var x = fieldPos.getElementLeft();
  217.       var y = fieldPos.getElementBottom();
  218.  
  219.       setProperty('left', x + "px");
  220.       setProperty('top', y + "px");
  221.  
  222.       if (document.all) {
  223.         setElementProperty('display', 'block', 'CalendarControlIFrame');
  224.         setElementProperty('left', x + "px", 'CalendarControlIFrame');
  225.         setElementProperty('top', y + "px", 'CalendarControlIFrame');
  226.         setElementProperty('width', calendarPos.getElementWidth() + "px", 'CalendarControlIFrame');
  227.         setElementProperty('height', calendarPos.getElementHeight() + "px", 'CalendarControlIFrame');
  228.       }
  229.     }
  230.   }
  231.  
  232.   this.hide = hide;
  233.   function hide() {
  234.     if(dateField) {
  235.       setProperty('display', 'none');
  236.       setElementProperty('display', 'none', 'CalendarControlIFrame');
  237.       dateField = null;
  238.     }
  239.   }
  240.  
  241.   this.visible = visible;
  242.   function visible() {
  243.     return dateField
  244.   }
  245.  
  246.   this.can_hide = can_hide;
  247.   var can_hide = 0;
  248. }
  #4 (permalink)  
Antiguo 21/02/2013, 15:22
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 1 mes
Puntos: 1329
Respuesta: CalendarJavascript

No dupliques temas:

http://www.forosdelweb.com/f13/probl...cript-1037906/
http://www.forosdelweb.com/f13/mejor...cript-1038344/

__________________
Grupo Telegram Docker en Español

Etiquetas: calendario, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:32.