Foros del Web » Programando para Internet » Javascript »

Modificar Datepicker para q empiece en lunes

Estas en el tema de Modificar Datepicker para q empiece en lunes en el foro de Javascript en Foros del Web. Hola! utilizo un datepicker de la pagina http://www.nsftools.com/tips/DatePickerTest.htm el problema q tengo es q las semanas empiezan en domingo y terminan en sabado y a ...
  #1 (permalink)  
Antiguo 16/10/2006, 08:57
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Pregunta Modificar Datepicker para q empiece en lunes

Hola!
utilizo un datepicker de la pagina http://www.nsftools.com/tips/DatePickerTest.htm
el problema q tengo es q las semanas empiezan en domingo y terminan en sabado y a mi eso como q no me va muy bien.
Le mandé un emilio al autor del codigo hará un par de semanas para hacer esta modificación y bueno.. no ha contestado.

mas o menos he encontrado el sitio para modificar eso pero no me acaba de cuadrar!
Código:
 // if this is a Saturday, start a new row
    if (thisDay.getDay() == 6)
      html += xTR + TR;
    
    // increment the day
    thisDay.setDate(thisDay.getDate() + 1);
  } while (thisDay.getDate() > 1)
 
  // fill in any trailing blanks
  if (thisDay.getDay() > 0) {
    for (i = 6; i > thisDay.getDay(); i--)
      html += TD + " " + xTD;
  }
si quereis os posteo el codigo entero pero es un poko largo... sino en la web lo encontrareis todo...
a ver si me podeis echar una mano.

Saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #2 (permalink)  
Antiguo 16/10/2006, 09:17
 
Fecha de Ingreso: diciembre-2004
Mensajes: 278
Antigüedad: 19 años, 5 meses
Puntos: 0
Yo uso este que es 99% personalizable
http://dali.mty.itesm.mx/~hugo/js/datepickercontrol/
  #3 (permalink)  
Antiguo 16/10/2006, 09:29
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
buenas.. y para adaptarlo a la pagina... este con solo poner el js ya anda...
la idea era adaptar el q ya tengo ya q como diseño y eso ya lo tengo todo tocado a mi gusto.

Editado: aparte q el tu me pones el explorer me lanza lo del bloqueo y eos no me interesa.
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #4 (permalink)  
Antiguo 16/10/2006, 14:31
 
Fecha de Ingreso: diciembre-2004
Mensajes: 278
Antigüedad: 19 años, 5 meses
Puntos: 0
Pos entonces prueba asi a ver, aunqe faltan muchas lineas para poder asegurar nada:

// if this is a Saturday, start a new row
if (thisDay.getDay() == 1)
html += xTR + TR;

// increment the day
thisDay.setDate(thisDay.getDate() + 1);
} while (thisDay.getDate() > 1)

// fill in any trailing blanks
if (thisDay.getDay() > 0) {
for (i = 1; i < thisDay.getDay(); i++)
html += TD + "&nbsp;" + xTD;
}
  #5 (permalink)  
Antiguo 17/10/2006, 00:19
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
entonces te posteo el codigo entero.
solo con copiarlo ya funciona...
Código PHP:
var datePickerDivID "datepicker";
var 
iFrameDivID "datepickeriframe";

var 
dayArrayShort = new Array('Do','Lu''Ma''Mi''Ju''Vi''Sa');
var 
dayArrayMed = new Array('Dom','Lun''Mar''Mie''Jue''Vie''Sab');
var 
dayArrayLong = new Array('Domingo','Lunes''Martes''Miercoles''Jueves''Viernes''Sabado');
var 
monthArrayShort = new Array('Ene''Feb''Mar''Abr''May''Jun''Jul''Ago''Sep''Oct''Nov''Dic');
var 
monthArrayMed = new Array('Ene''Feb''Mar''Abr''May''Jun''Jul''Ago''Sept''Oct''Nov''Dec');
var 
monthArrayLong = new Array('Enere''Febrero''Marzo''Abril''Mayo''Junio''Julio''Agosto''Septiembre''Octubre''Noviembre''Diciembre');
 
// these variables define the date formatting we're expecting and outputting.
// If you want to use a different format by default, change the defaultDateSeparator
// and defaultDateFormat variables either here or on your HTML page.
var defaultDateSeparator "/";        // common values would be "/" or "."
var defaultDateFormat "dmy"    // valid values are "mdy", "dmy", and "ymd"
var dateSeparator defaultDateSeparator;
var 
dateFormat defaultDateFormat;

function 
displayDatePicker(dateFieldNamedisplayBelowThisObjectdtFormatdtSep)
{
  var 
targetDateField document.getElementsByName (dateFieldName).item(0);
 
  
// if we weren't told what node to display the datepicker beneath, just display it
  // beneath the date field we're updating
  
if (!displayBelowThisObject)
    
displayBelowThisObject targetDateField;
 
  
// if a date separator character was given, update the dateSeparator variable
  
if (dtSep)
    
dateSeparator dtSep;
  else
    
dateSeparator defaultDateSeparator;
 
  
// if a date format was given, update the dateFormat variable
  
if (dtFormat)
    
dateFormat dtFormat;
  else
    
dateFormat defaultDateFormat;
 
  var 
displayBelowThisObject.offsetLeft;
  var 
displayBelowThisObject.offsetTop displayBelowThisObject.offsetHeight ;
 
  
// deal with elements inside tables and such
  
var parent displayBelowThisObject;
  while (
parent.offsetParent) {
    
parent parent.offsetParent;
    
+= parent.offsetLeft;
    
+= parent.offsetTop ;
  }
 
  
drawDatePicker(targetDateFieldxy);
}
function 
drawDatePicker(targetDateFieldxy)
{
  var 
dt getFieldDate(targetDateField.value );
 
  
// the datepicker table will be drawn inside of a <div> with an ID defined by the
  // global datePickerDivID variable. If such a div doesn't yet exist on the HTML
  // document we're working with, add one.
  
if (!document.getElementById(datePickerDivID)) {
    
// don't use innerHTML to update the body, because it can cause global variables
    // that are currently pointing to objects on the page to have bad references
    //document.body.innerHTML += "<div id='" + datePickerDivID + "' class='dpDiv'></div>";
    
var newNode document.createElement("div");
    
newNode.setAttribute("id"datePickerDivID);
    
newNode.setAttribute("class""dpDiv");
    
newNode.setAttribute("style""visibility: hidden;");
    
document.body.appendChild(newNode);
  }
 
  
// move the datepicker div to the proper x,y coordinate and toggle the visiblity
  
var pickerDiv document.getElementById(datePickerDivID);
  
pickerDiv.style.position "absolute";
  
pickerDiv.style.left "px";
  
pickerDiv.style.top "px";
  
pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" "hidden" "visible");
  
pickerDiv.style.display = (pickerDiv.style.display == "block" "none" "block");
  
pickerDiv.style.zIndex 10000;
 
  
// draw the datepicker table
  
refreshDatePicker(targetDateField.namedt.getFullYear(), dt.getMonth(), dt.getDate());
}

/**
This is the function that actually draws the datepicker calendar.
*/
function refreshDatePicker(dateFieldNameyearmonthday)
{
  
// if no arguments are passed, use today's date; otherwise, month and year
  // are required (if a day is passed, it will be highlighted later)
  
var thisDay = new Date();
 
  if ((
month >= 0) && (year 0)) {
    
thisDay = new Date(yearmonth1);
  } else {
    
day thisDay.getDate();
    
thisDay.setDate(1);
  }
 
  
// the calendar will be drawn as a table
  // you can customize the table elements with a global CSS style sheet,
  // or by hardcoding style and formatting elements below
  
var crlf "\r\n";
  var 
TABLE "<table cols=7 class='dpTable'>" crlf;
  var 
xTABLE "</table>" crlf;
  var 
TR "<tr class='dpTR'>";
  var 
TR_title "<tr class='dpTitleTR'>";
  var 
TR_days "<tr class='dpDayTR'>";
  var 
TR_todaybutton "<tr class='dpTodayButtonTR'>";
  var 
xTR "</tr>" crlf;
  var 
TD "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
  
var TD_title "<td colspan=5 class='dpTitleTD'>";
  var 
TD_buttons "<td class='dpButtonTD'>";
  var 
TD_todaybutton "<td colspan=7 class='dpTodayButtonTD'>";
  var 
TD_days "<td class='dpDayTD'>";
  var 
TD_selected "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
  
var xTD "</td>" crlf;
  var 
DIV_title "<div class='dpTitleText'>";
  var 
DIV_selected "<div class='dpDayHighlight'>";
  var 
xDIV "</div>";
 
  
// start generating the code for the calendar table
  
var html TABLE;
 
  
// this is the title bar, which displays the month and the buttons to
  // go back to a previous month or forward to the next month
  
html += TR_title;
  
html += TD_buttons getButtonCode(dateFieldNamethisDay, -1"&lt;") + xTD;
  
html += TD_title DIV_title monthArrayLongthisDay.getMonth()] + " " thisDay.getFullYear() + xDIV xTD;
  
html += TD_buttons getButtonCode(dateFieldNamethisDay1"&gt;") + xTD;
  
html += xTR;
 
  
// this is the row that indicates which day of the week we're on
  
html += TR_days;
  for(
0dayArrayShort.lengthi++)
    
html += TD_days dayArrayShort[i] + xTD;
  
html += xTR;
 
  
// now we'll start populating the table with days of the month
  
html += TR;
 
  
// first, the leading blanks
  
for (0thisDay.getDay(); i++)
    
html += TD "&nbsp;" xTD;
 
  
// now, the days of the month
  
do {
    
dayNum thisDay.getDate();
    
TD_onclick " onclick=\"updateDateField('" dateFieldName "', '" getDateString(thisDay) + "');\">";
    
    if (
dayNum == day)
      
html += TD_selected TD_onclick DIV_selected dayNum xDIV xTD;
    else
      
html += TD TD_onclick dayNum xTD;
    
    
// if this is a Saturday, start a new row
    
if (thisDay.getDay() == 6)
      
html += xTR TR;
    
    
// increment the day
    
thisDay.setDate(thisDay.getDate() + 1);
  } while (
thisDay.getDate() > 1)
 
  
// fill in any trailing blanks
  
if (thisDay.getDay() > 0) {
    for (
6thisDay.getDay(); i--)
      
html += TD "&nbsp;" xTD;
  }
  
html += xTR;
 
  
// add a button to allow the user to easily return to today, or close the calendar
  
var today = new Date();
  var 
todayString "Today is " dayArrayMed[today.getDay()] + ", " monthArrayMedtoday.getMonth()] + " " today.getDate();
  
html += TR_todaybutton TD_todaybutton;
  
html += "<button class='dpTodayButton' onClick='updateDateField(\"" dateFieldName "\");'>Cerrar</button>";
  
html += xTD xTR;
 
  
// and finally, close the table
  
html += xTABLE;
 
  
document.getElementById(datePickerDivID).innerHTML html;
  
// add an "iFrame shim" to allow the datepicker to display above selection lists
  
adjustiFrame();

y sigue en el siguiente...
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #6 (permalink)  
Antiguo 17/10/2006, 00:20
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Código PHP:
/**
Convenience function for writing the code for the buttons that bring us back or forward
a month.
*/
function getButtonCode(dateFieldNamedateValadjustlabel)
{
  var 
newMonth = (dateVal.getMonth () + adjust) % 12;
  var 
newYear dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
  if (
newMonth 0) {
    
newMonth += 12;
    
newYear += -1;
  }
 
  return 
"<button class='dpButton' onClick='refreshDatePicker(\"" dateFieldName "\", " newYear ", " newMonth ");'>" label "</button>";
}


/**
Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator
variables at the beginning of this script library.
*/
function getDateString(dateVal)
{
  var 
dayString "00" dateVal.getDate();
  var 
monthString "00" + (dateVal.getMonth()+1);
  
dayString dayString.substring(dayString.length 2);
  
monthString monthString.substring(monthString.length 2);
 
  switch (
dateFormat) {
    case 
"dmy" :
      return 
dayString dateSeparator monthString dateSeparator dateVal.getFullYear();
    case 
"ymd" :
      return 
dateVal.getFullYear() + dateSeparator monthString dateSeparator dayString;
    case 
"mdy" :
    default :
      return 
monthString dateSeparator dayString dateSeparator dateVal.getFullYear();
  }
}


/**
Convert a string to a JavaScript Date object.
*/
function getFieldDate(dateString)
{
  var 
dateVal;
  var 
dArray;
  var 
dmy;
 
  try {
    
dArray splitDateString(dateString);
    if (
dArray) {
      switch (
dateFormat) {
        case 
"dmy" :
          
parseInt(dArray[0], 10);
          
parseInt(dArray[1], 10) - 1;
          
parseInt(dArray[2], 10);
          break;
        case 
"ymd" :
          
parseInt(dArray[2], 10);
          
parseInt(dArray[1], 10) - 1;
          
parseInt(dArray[0], 10);
          break;
        case 
"mdy" :
        default :
          
parseInt(dArray[1], 10);
          
parseInt(dArray[0], 10) - 1;
          
parseInt(dArray[2], 10);
          break;
      }
      
dateVal = new Date(ymd);
    } else if (
dateString) {
      
dateVal = new Date(dateString);
    } else {
      
dateVal = new Date();
    }
  } catch(
e) {
    
dateVal = new Date();
  }
 
  return 
dateVal;
}


/**
Try to split a date string into an array of elements, using common date separators.
If the date is split, an array is returned; otherwise, we just return false.
*/
function splitDateString(dateString)
{
  var 
dArray;
  if (
dateString.indexOf("/") >= 0)
    
dArray dateString.split("/");
  else if (
dateString.indexOf(".") >= 0)
    
dArray dateString.split(".");
  else if (
dateString.indexOf("-") >= 0)
    
dArray dateString.split("-");
  else if (
dateString.indexOf("\\") >= 0)
    
dArray dateString.split("\\");
  else
    
dArray false;
 
  return 
dArray;
}

/**
Update the field with the given dateFieldName with the dateString that has been passed,
and hide the datepicker. If no dateString is passed, just close the datepicker without
changing the field value.

Also, if the page developer has defined a function called datePickerClosed anywhere on
the page or in an imported library, we will attempt to run that function with the updated
field as a parameter. This can be used for such things as date validation, setting default
values for related fields, etc. For example, you might have a function like this to validate
a start date field:

function datePickerClosed(dateField)
{
  var dateObj = getFieldDate(dateField.value);
  var today = new Date();
  today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
 
  if (dateField.name == "StartDate") {
    if (dateObj < today) {
      // if the date is before today, alert the user and display the datepicker again
      alert("Please enter a date that is today or later");
      dateField.value = "";
      document.getElementById(datePickerDivID).style.visibility = "visible";
      adjustiFrame();
    } else {
      // if the date is okay, set the EndDate field to 7 days after the StartDate
      dateObj.setTime(dateObj.getTime() + (7 * 24 * 60 * 60 * 1000));
      var endDateField = document.getElementsByName ("EndDate").item(0);
      endDateField.value = getDateString(dateObj);
    }
  }
}

*/
function updateDateField(dateFieldNamedateString)
{
  var 
targetDateField document.getElementsByName (dateFieldName).item(0);
  if (
dateString)
    
targetDateField.value dateString;
 
  var 
pickerDiv document.getElementById(datePickerDivID);
  
pickerDiv.style.visibility "hidden";
  
pickerDiv.style.display "none";
 
  
adjustiFrame();
  
targetDateField.focus();
 
  
// after the datepicker has closed, optionally run a user-defined function called
  // datePickerClosed, passing the field that was just updated as a parameter
  // (note that this will only run if the user actually selected a date from the datepicker)
  
if ((dateString) && (typeof(datePickerClosed) == "function"))
    
datePickerClosed(targetDateField);
}


/**
Use an "iFrame shim" to deal with problems where the datepicker shows up behind
selection list elements, if they're below the datepicker. The problem and solution are
described at:

http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx
*/
function adjustiFrame(pickerDiviFrameDiv)
{
  
// we know that Opera doesn't like something about this, so if we
  // think we're using Opera, don't even try
  
var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
  if (
is_opera)
    return;
  
  
// put a try/catch block around the whole thing, just in case
  
try {
    if (!
document.getElementById(iFrameDivID)) {
      
// don't use innerHTML to update the body, because it can cause global variables
      // that are currently pointing to objects on the page to have bad references
      //document.body.innerHTML += "<iframe id='" + iFrameDivID + "' src='javascript:false;' scrolling='no' frameborder='0'>";
      
var newNode document.createElement("iFrame");
      
newNode.setAttribute("id"iFrameDivID);
      
newNode.setAttribute("src""javascript:false;");
      
newNode.setAttribute("scrolling""no");
      
newNode.setAttribute ("frameborder""0");
      
document.body.appendChild(newNode);
    }
    
    if (!
pickerDiv)
      
pickerDiv document.getElementById(datePickerDivID);
    if (!
iFrameDiv)
      
iFrameDiv document.getElementById(iFrameDivID);
    
    try {
      
iFrameDiv.style.position "absolute";
      
iFrameDiv.style.width pickerDiv.offsetWidth;
      
iFrameDiv.style.height pickerDiv.offsetHeight ;
      
iFrameDiv.style.top pickerDiv.style.top;
      
iFrameDiv.style.left pickerDiv.style.left;
      
iFrameDiv.style.zIndex pickerDiv.style.zIndex 1;
      
iFrameDiv.style.visibility pickerDiv.style.visibility ;
      
iFrameDiv.style.display pickerDiv.style.display;
    } catch(
e) {
    }
 
  } catch (
ee) {
  } 

y para presentarlo:
Código HTML:
<input name="data" value="" size="15" /><img align="absmiddle" src="img/calendari.gif" onClick="displayDatePicker('data');" width="34" height="22" border="0" alt=""> 
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #7 (permalink)  
Antiguo 17/10/2006, 00:33
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Probe tu codigo... ese caxito q modificaste y solo me descuadra el primer domingo. Tal y como me pasava a mi.
PD: el domingo es el dia 0.

saludos y gracias
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #8 (permalink)  
Antiguo 18/10/2006, 00:13
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Buenos dias!
alguien sabe como solucionar ese pequeño descuadre del domingo?
la cosa esta en este cachito de codigo... solo me descuadra el primer domingo. es decir q si el dia 1 de octubre es domingo me sale en lunes, y luego el resto de la semana me sale en blanco, y el dia 2 ya empieza en el lunes de la semana siguiente.
la cosa esta en este trozo de codigo pero no consigo ver como hacer para q me salga bien el primer domingo.
Código PHP:
 // first, the leading blanks
  
for (1thisDay.getDay(); i++)
    
html += TD "&nbsp;" xTD;
 
  
// now, the days of the month
  
do {
    
dayNum thisDay.getDate();
    
TD_onclick " onclick=\"updateDateField('" dateFieldName "', '" getDateString(thisDay) + "');\">";
    
    if (
dayNum == day)
      
html += TD_selected TD_onclick DIV_selected dayNum xDIV xTD;
    else
      
html += TD TD_onclick dayNum xTD;
    
// if this is a Sunday, start a new row
    
if (thisDay.getDay() == 0)
    
html += xTR TR;
    
    
// increment the day
    
thisDay.setDate(thisDay.getDate() + 1);
    } while (
thisDay.getDate() > 1)

    
// fill in any trailing blanks
    
if (thisDay.getDay() > 0) {
    for (
0thisDay.getDay(); i++)
    
html += TD "&nbsp;" xTD;
    } 

saludos y gracias
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier

Última edición por sergi_climent; 18/10/2006 a las 00:21
  #9 (permalink)  
Antiguo 18/10/2006, 00:27
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 1.473
Antigüedad: 19 años, 3 meses
Puntos: 10
Solucionado:
hice un pequeño apaño para cuando sea Domingo
Código PHP:
dia=thisDay.getDay()
//si es 0 seria domingo
    
if (dia==0){
        
dia=7;
    }
     
  
// first, the leading blanks
  
for (1diumengei++)
    
html += TD "&nbsp;" xTD
no ser si es la mejor solucion pero va bien!

Saludos
__________________
"Cada hombre es el hijo de su propio trabajo"
Miguel de Cervantes Saavedra
"La experiencia es algo que no consigues hasta justo depués de necesitarla"
Laurence Olivier
  #10 (permalink)  
Antiguo 25/03/2009, 07:54
Avatar de martin0341  
Fecha de Ingreso: septiembre-2006
Ubicación: Rosario - Santa Fe
Mensajes: 296
Antigüedad: 17 años, 7 meses
Puntos: 8
Respuesta: Modificar Datepicker para q empiece en lunes

yo tengo el mismo problema pero en el mes de diciembre, me duplica el 4 domingo de diciembre y me deja la fila entera vacia desp de duplicar el segundo numero, alguien pudo solucionar este problema??
Gracias
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 19:16.