DevTics.com.Mx » Funciones JavaScript

Unir palabras separadas por comas u otro caracter

pako — Tue, 23 Nov 2010 18:25:28 +0000

les dejo una función bastante sencilla para cuando necesiten unir diferentes palabras con comas y si un texto es nulo o un espacio en blanco se elimine, esta función nació ya que algún día estuve recuperado campos de una base de datos (país,colonia,ciudad,estado), para formar la dirección tenia que concatenar estas variables tarea fácil el problema es que algunas veces unos campos no existían, por lo cual tenia que excluirlo y que no aparecieran “, ,” si no solo la lista de palabras que cotenieran algun texto

String.joinStrings=function joinStrings(){
 var arr =[],arg, i;
 if(typeof arguments[0] !="string" && arguments[0].length){
    for(i=0;i
Ejemplo: 
cad1="hola";
cad2="";
cad3="ok"
cad4=""
alert(String.joinStrings(cad1,cad2,cad3,cad4,","));
alert(String.joinStrings(["hola","mundo","","ok"],","));

out:

hola,ok

hola,mundo,ok

Función date para formatear salida de fechas en JavaScript

pako — Thu, 18 Mar 2010 23:20:00 +0000

en PHP existe la función date() la cual nos permite formatear la salida de una fecha, esta función no existe en JavaScript mas si el objeto Date que nos permite trabajar con fechas, ya anteriormente postié una función que creo que si se me hubiera ocurrido antes migrar date de PHP a JavaScript me hubiera ahorrado esa función :P, me faltaron algunas opciones de migrar, ya que por lo pronto no las necesito :P y todavía no entiendo muy bien como para que se usan y como obtenerlas manejando el objeto Date.

date(String Format, Date date, JSON dayLabels)

Descripción:

Retorna un String con una fecha formateada según el parámetro Format

Esta basada en la función date de PHP

Parámetros:

Format: es un string que contiene el patrón que con el cual se deberá formatear
el objeto date, ejemplo: ‘d-m-Y’ o ‘D-M-Y h:m:s”

Se soportan los siguientes parámetros son exactamente los mismo que en PHP:
- Día
  - d: Día del mes 2 dígitos 01 a 31
  - D: String del día de la semana en tres letras
  - j: Día del mes sin ceros iniciales
  - l: Día en del día de la semana
  - N: numero del día en la semana en formato ISO-8601 (1 para el lunes y 7 para el domingo
  - * S: terminación en ingles st,nd,rd o th //falta de implementar
  - w: día de la semana 0 para domingo 6 para sábado
  - z: el día del año iniciando de 0
- Semana
  - * W: semana en el año // Falta de implementar se encontré algunos bugs en el calculo
- Mes
  - F: Mes en texto completo
  - m: mes del año representado en 2 caracteres 01 – 12
  - M: nombre corto del mes (3 caracteres)
  - n: mes del año representado en 1 o 12 caracteres (sin cerro iniciales)
  - t: numero de días en el mes 28-31
- Year
  - L: cuando un año es bisiesto 1 para bisiesto 0 cuando no lo es
  - Y: el año representado en 4 dígitos 1999 o2003
  - y: el año representado en 2 dígitos 99 o 03
- Time
  - a: am o pm
  - A: AM o PM
  - g: hora en 12 si cero inicial 1-12
  - G: hora en 24 sin cero inicial 0-23
  - h: hora en 12 con cero inicial 01-12
  - H: hora en 24 con cero inicial 00 – 23
  - i: minutos con cero inicial 00-59
  - s: segundos, con cero inicial 00-59
  - u: micro-segundos
date: (opcional)es un objeto Date que indique la fecha a formatear
si se omite se operara con la fecha actual en el reloj del cliente
JSON dayLabels: (Opcional), es un JSON que nos permite pasar los arreglos con
las etiquetas de los nombres de los meses y días, por defecto se
trabaja con los nombres en Ingles

Los arreglos que puede contener dayLables son:
- arrMoths: Array con el nombre de los meses por defecto
  ["January", "February", "March", "April",
  "May", "June", "July", "August", "September",
  "October", "November", "December"];
- arrDays:Array con los nombres de los dias, por defecto:
  ["Sunday", "Monday", "Tuesday", "Wednesday",
  "Thursday","Friday", "Saturday"]
- arrDaysShort:Array con los nombres cortos(3 caracteres) de los dias
  por defecto: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
  "Sat"];
- arrDayMothsShort:Array con los nombres cortos(3 caractres) de los meses
  por defecto: ["Jan", "Feb",
  "Mar", "Apr", "May", "Jun", "Jul", "Aug",
  "Sep", "Oct", "Nov", "Dec"]

Ejemplos:

 alert(date('d/m/Y'));
  fecha=new Date(2010,2,7,17,30,5);
  alert(date('d/m/Y',fecha));
  alert(date('F, j Y',fecha));
  labels={
  arrMoths:["Enero", "Febrero", "Marzo", "Abril",
                                  "Mayo", "Junio", "Julio", "Agosto", "Septiember",
                                  "Octube", "Noviember", "Diciember"],
  arrDays:["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"]
  }
  alert(date('l j \de F \de\l Y',fecha,labels));
  alert(date('d/M/Y H:i:s',fecha));
  alert(date('d/M/Y h:i:s A',fecha));

By JfcoDíaz

wariodiaz@gmail.com

www.devtics.com.mx

17 Marzo del 2010

Download

/**
 * date(String Format, Date date, JSON dayLabels)
 *
 * Descripción:

 * Retorna un String con una fecha formateada según el parámetro Format

 * Esta basada en la función date de PHP
 * 
 *
 * Parámetros:
 * 
 * 
 * Format: es un string que contiene el patrón que con el cual se deberá formatear
 * el objeto date, ejemplo: 'd-m-Y' o 'D-M-Y h:m:s"
 *
 * Se soportan los siguientes parámetros son exactamente los mismo que en PHP:
 * 
 *  Dia
 *      
 *           d: Día del mes 2 dígitos 01 a 31
 *           D: String del día de la semana en tres letras
 *           j: Día del mes sin ceros iniciales
 *           l: Día en del día de la semana
 *           N: numero del día en la semana en formato ISO-8601 (1 para el lunes y 7 para el domingo
 *           * S: terminación en ingles st,nd,rd o th //falta de implementar
 *           w: día de la semana 0 para domingo 6 para sábado
 *           z: el día del año iniciando de 0
 *      
 *   
 *   Semana
 *          
 *              * W: semana en el año // Falta de implementar se encontré algunos bugs en el calculo
 *          
 *   
 *   Mes
 *      
 *          F: Mes en texto completo
 *          m: mes del año representado en 2 caracteres  01 - 12
 *          M: nombre corto del mes (3 caracteres)
 *          n: mes del año representado en 1 o 12 caracteres (sin cerro iniciales)
 *          t: numero de días en el mes 28-31 
 *      
 *   

 *      Year
 *      
 *          L: cuando un año es bisiesto 1 para bisiesto 0 cuando no lo es
 *          Y: el año representado en 4 dígitos 1999 o2003
 *          y: el año representado en 2 dígitos 99 o 03
 *      
 *  
 *  
 *      Time
 *      
 *          a: am o pm
 *          A: AM o PM
 *          g: hora en 12 si cero inicial 1-12
 *          G: hora en 24 sin cero inicial 0-23
 *          h: hora en 12 con cero inicial 01-12
 *          H: hora en 24 con cero inicial 00 - 23
 *          i: minutos con cero inicial 00-59
 *          s: segundos, con cero inicial 00-59
 *          u: micro-segundos
 *      
 *    
 *
 *  
 *  
 *      date: (opcional)es un objeto Date que indique la fecha a formatear
 *          si se omite se operara con la fecha actual en el reloj del cliente
 *      
 *  
 *      
 *        JSON dayLabels: (Opcional), es un JSON que nos permite pasar los arreglos con
 *              las etiquetas de los nombres de los meses y días, por defecto se
 *              trabaja con los nombres en Ingles
 *        
 *         Los arreglos que puede contener dayLables son:
 *        
 *          arrMoths: Array con el nombre de los meses por defecto
 *          ["January", "February", "March", "April",
 *                                  "May", "June", "July", "August", "September",
 *                                  "October", "November", "December"];
 *          
 *          arrDays:Array con los nombres de los dias, por defecto:
 *          ["Sunday", "Monday", "Tuesday", "Wednesday",
 *                                  "Thursday","Friday", "Saturday"]
 *          
 *          arrDaysShort:Array con los nombres cortos(3 caracteres) de los días
 *              por defecto: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
 *                                  "Sat"];
 *           
 *          arrDayMothsShort:Array con los nombres cortos(3 caracteres) de los meses
 *              por defecto: ["Jan", "Feb",
 *                                  "Mar", "Apr", "May", "Jun", "Jul", "Aug",
 *                                   "Sep", "Oct", "Nov", "Dec"]
 *          
 *        
 *      
 *  
 * 
 * Ejemplos

 * alert(date('d/m/Y'));

 * fecha=new Date(2010,2,7,17,30,5);

 * alert(date('d/m/Y',fecha));

 * alert(date('F, j Y',fecha));

 * labels={

 * arrMoths:["Enero", "Febrero", "Marzo", "Abril",

 *                                 "Mayo", "Junio", "Julio", "Agosto", "Septiember",

 *                                 "Octube", "Noviember", "Diciember"],

 * arrDays:["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"]

 * }

 * alert(date('l j \de F \de\l Y',fecha,labels));

 * alert(date('d/M/Y H:i:s',fecha));

 * alert(date('d/M/Y h:i:s A',fecha));

 *
 * 
 * By JfcoDíaz

 * wariodiaz@gmail.com

 *  www.devtics.com.mx 

 * 17 Marzo del 2010
 * 
 */
function date(strFormat,objDate,jsonTexts){
    objDate = (objDate)?objDate:new Date();
    function hr12(objDate,bwith0){
        var hr=objDate.getHours();
        hr = (hr<13)?hr:hr-12;
        return (bwith0)? ((hr<10)?"0"+hr:hr) :hr;
    }
    jsonTexts = (jsonTexts==undefined)?{}:jsonTexts;

    jsonTexts.arrMoths = (jsonTexts.arrMoths)?jsonTexts.arrMoths:
                                   ["January", "February", "March", "April",
                                   "May", "June", "July", "August", "September",
                                   "October", "November", "December"];

    jsonTexts.arrDays = (jsonTexts.arrDays)?jsonTexts.arrDays:
                                   ["Sunday", "Monday", "Tuesday", "Wednesday",
                                   "Thursday","Friday", "Saturday"];

    jsonTexts.arrDaysShort = (jsonTexts.arrDaysShort)?jsonTexts.arrDaysShort:
                                   ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
                                   "Sat"];

    jsonTexts.arrDayMothsShort=(jsonTexts.arrDayMothsShort)?
                                   jsonTexts.arrDayMothsShort:["Jan", "Feb",
                                   "Mar", "Apr", "May", "Jun", "Jul", "Aug",
                                   "Sep", "Oct", "Nov", "Dec"];
     var c ,dt , str="";
     for(i=0;c=strFormat[i++];){
        switch(c){

            case "\":str+=strFormat[i++];break;

            case "c":break;

            case "d":dt=objDate.getDate();
                      str+=(dt<10)?"0"+dt:dt;
                      break;

            case "D":
                      str+= jsonTexts.arrDaysShort[ objDate.getDay() ];
                      break;

            case "j":str+= objDate.getDate(); break;

            case "l":str+= jsonTexts.arrDays[objDate.getDay()]; break;

            case "N":
                dt=objDate.getDay();
                str+=(dt==0)?7:dt;
                break;
            case "S":break;

            case "w":str+=objDate.getDay();break;

            case "z":
                    dt=new Date(objDate.getFullYear(), 0, 1);
                    str+= Math.floor(((((objDate.valueOf() - dt.valueOf())/1000)/60)/60)/24);
                    break;
            case "W":
                //pendiente de implementar
//                    dt = new Date(objDate.getFullYear(),0,1);
//
//                    str+= (Math.ceil(
//                               ( (parseInt(date("z",objDate),10))/7)))+
//                                   ((dt.getDay()>0)? -1 : 0);
               //     str+=objDate.getWeekNumber();
                    break;
            case "F":

                        str+=jsonTexts.arrMoths[ objDate.getMonth() ];
                    break;
            case "m":
                      dt=objDate.getMonth()+1;
                      str+=(dt<10)?"0"+dt:dt;
                      break;
            case "M":
                        str+= jsonTexts.arrDayMothsShort[ objDate.getMonth() ];
                     break;
            case "n":str+=objDate.getMonth()+1;
                     break;
            case "t":
                switch(objDate.getMonth()+1){
                   case 4: case 6: case 9: case 11:str+="30"; break;
                   case 2:
                       str+=(date("L",objDate)==="1")? "29" : "28";
                       break;
                   default :str+="31";
                }

                break;
            case "L":
                    dt=objDate.getFullYear();
                    str+=((dt % 4 == 0 && dt % 100 != 0) || dt % 400 == 0)?"1":"0";
                break;
            case "Y":
                     str+=objDate.getFullYear();
                     break;
            case "y":
                     str+= objDate.getFullYear().toString(). substr(2,2);
                    break;
            case "a":
                    str+=(objDate.getHours()<12)?'am':'pm';
                break;
            case "A":
                    str+=(objDate.getHours()<12)?'AM':'PM';
                break;
            case "g":
                    str+=hr12(objDate);
                break;
            case "G":
                    str+=objDate.getHours();
                break;
            case "h":
                    str+=hr12(objDate,true);
                break;
            case "H":
                    dt=objDate.getHours();
                    str+= (dt<10)? "0"+dt : dt;
                break;
            case "i":
                    dt=objDate.getMinutes();
                    str+=(dt<10)?"0"+dt:dt;
                break;
            case "s":
                    dt=objDate.getSeconds();
                    str+=(dt<10)?"0"+dt:dt;
                    break;
            case "u":
                    str+=objDate.getMilliseconds();
                break;
            default :str+= c;break;
        }
     }
     return str;
}

addTimeToDate Sumar/Restar Tiempo a Fechas JavaScript

pako — Thu, 11 Mar 2010 18:21:55 +0000

Date addTimeToDate(int time, String unit, Date date,Boolean referencia) (v1.1)

Descripción:Suma o Resta tiempo a una fecha(objeto Date), puede ser usada tanto para
agregar como quitar tiempo a una fecha, el tiempo se da en milisegundos,
segundos, minutos, horas, días, meses o años

Parámetros:

Time:Entero con la cantidad de unidades de tiempo a sumar a
la fecha
Unit: String con el tipo de unidades que se agregaran a la fecha
- y: Años
- M: Meses
- w: Semanas
- d: Días
- h: Horas
- m: Minutos
- s: Segundos
- “”: (En blanco o cualquier otro) Milisegundos
Date: Objeto Date al que se le sumara el tiempo Indicado
dateReference: es un booleano
- true indica que
  se operará directamente en el objeto Date pasado en el tercer parámetro,
  de igual forma se retorna la referencia al final de su ejecución.
- false, la función creara un nuevo objeto Date y lo retornara
  al final de su ejecución sin afectar el objeto Date original

Retorno: Objeto Date, con la nueva fecha resultante de la suma de tiempos

Download

 /**
* 
*        Date addTimeToDate(int time, String unit, Date date,Boolean referencia) (v1.1)
*   
*   
*   Descripción:Suma o Resta tiempo a una fecha(objeto Date), puede ser usada tanto para
*    agregar como quitar tiempo a una fecha, el tiempo se da en milisegundos,
*    segundos, minutos, horas, días, meses o años
*   
*   
*    Parámetros:
*    
*        Time:Entero con la cantidad de unidades de tiempo a sumar a
*                   la fecha
*        Unit: String con el tipo de unidades que se agregaran a la fecha
*            
*                y: Años
*                M: Meses
*                w: Semanas
*                d: Días
*                h: Horas
*                m: Minutos
*                s: Segundos
*                "": (En blanco o cualquier otro) Milisegundos
*            
*        
*        Date: Objeto Date al que se le sumara el tiempo Indicado
*        dateReference: es un booleano
*               
*              true indica que
*              se operará directamente en el objeto Date pasado en el tercer parámetro,
*              de igual forma se retorna la referencia al final de su ejecución.
*
*              false, la función creara un nuevo objeto Date y lo retornara
*                al final de su ejecución sin afectar el objeto Date original
* 
* 
*        
*   
*  Retorno:  Objeto Date, con la nueva fecha resultante de la suma de tiempos
*  

* 
* By: JFcoDiaz 

* wariodiaz@gmail.com

* www.devtics.com.mx

* Licencia GPLv3/MIT
*
* 9 de Mazo del 2010
* Update V1.1
* 20/Jun/2010
* 
*/

function addTimeToDate(time,unit,objDate,dateReference){
    var dateTemp=(dateReference)?objDate:new Date(objDate);
    switch(unit){
        case 'y': dateTemp.setFullYear(objDate.getFullYear()+time); break;
        case 'M': dateTemp.setMonth(objDate.getMonth()+time); break;
        case 'w': dateTemp.setTime(dateTemp.getTime()+(time*7*24*60*60*1000)); break;
        case 'd': dateTemp.setTime(dateTemp.getTime()+(time*24*60*60*1000)); break;
        case 'h': dateTemp.setTime(dateTemp.getTime()+(time*60*60*1000)); break;
        case 'm': dateTemp.setTime(dateTemp.getTime()+(time*60*1000)); break;
        case 's': dateTemp.setTime(dateTemp.getTime()+(time*1000)); break;
        default : dateTemp.setTime(dateTemp.getTime()+time); break;
    }
    return dateTemp;
}

para restar tiempo a la fecha, solo pasa el valor en negativo ;)

Ejemplo:

Ver Ejemplo

Saber si una fecha se encuentra entre dos [JavaScript]

pako — Tue, 09 Mar 2010 23:44:35 +0000

Aquí les dejo otra función, esta nos sirve para saber si una fecha esta entre un margen de tiempo, no sirve desde saber si un día o una hora se encuentra entre una hora que comprenda un rango de una hora de inicio y una hora de fin

/**
* betweenDate(dateBegin, dateFinish, dateTest)
*
* retorna true si dateTest se enctra entre dateInicio y dateFinish o bien
* false si no se encuntra en el margen ya sea que sea una fecha anterior a
* date Inicio o posterior a dateFinish
*
* Parametros:
* – dateBegin, objeto Date con la fecha de Inicio
* – dateFinish, objeto Date con la fecha de Fin
* – dateTest, objeto Date a evaluar si se encuentra en el margen de dateBegin y
* dateFinish
*
*
* by: JFcoDiaz
* wariodiaz@gmail.com
* @fcodiaz
* www.devtics.com.mx
* —————————-
* alert(
* betweenDate(
* new Date(2007,0,1,0,10),
* new Date(2007,0,1,0,50),
* new Date(2007,0,1,0,51)
* )
* );
**/
function betweenDate(dateBegin,dateFinish,dateTest){
return (dateBegin.valueOf()<=dateTest.valueOf() &&
dateFinish.valueOf()>=dateTest.valueOf());
}
[/javaScript]

Pasar un Datetime MySql a Date JavaScript

pako — Tue, 09 Mar 2010 20:12:26 +0000

Función para pasar un string con un datetime de MySQL a un objeto Date de JavaScript

/***
 * MySqlDatetime2jsDate(strDatetime)
 *
 * retorna un objeto Date a partir de una cadena de fecha con formato datetime
 * ("yyyy-mm-dd hh:mm:ss") de MySQL
 *
 * By Jfco Díaz
 * www.devtics.com.mx
 * wariodiaz@gmail.com
 * 9 Mazo 2010
 */
/***
 * MySqlDatetime2jsDate(strDatetime)
 *
 * retorna un objeto Date a partir de una cadena de fecha con formato datetime
 * ("yyyy-mm-dd hh:mm:ss") de MySQL
 *
 * By Jfco Díaz
 * www.devtics.com.mx
 * wariodiaz@gmail.com
 * 9 Mazo 2010
 */
function MySqlDatetime2jsDate(strDatetime){
    strDatetime = strDatetime.split(" ");
    var date = strDatetime[0].split("-");
    var time = strDatetime[1].split(":");
    return new Date(date[0], date[1]-1, date[2], time[0], time[1], time[2]);
}

keyValue jQuery y mi reseña sobre jQuery

pako — Fri, 19 Feb 2010 21:44:51 +0000

En estos días he estado trabajando y aprendiendo jQuery, si bien ya he postulado mi punto de vista sobre el uso de frameworks, y lo sigo manteniendo, la gran mayorías de las cosas que JQuery hace las se hacer desde JavaScript puro, y por motivos de trabajo indague en esta librería, que si bien se presta a mucho copy paste y de mas fanfaronada(hacer lo que no se hacer gracias al framework) que es lo que me desagrada de lo que hay alrededor de estas herramientas.

bueno lo que me agrado de jQuery a contra de los que a muchos le llama la atención(las animaciones), lo que creo que son sumamente buenos y una excelente idea son sus selectores que si no me equivoco de alli viene su nombre “Query”, en esta forma de trabajar la verdad jQuery se lleva un 100% ya que ayuda mucho y simplifica el manejo del DOM, solo que hay que tener cuidad de no llamar mucho a los selectores si no tratar de mantener enlaces de memoria a ellos ya que cada que se llama a $() se genera un nuevo objeto jQuery y para que rehacer algo que ya tenemos en memoria, y esto afecta el rendimiento de la aplicación (se hacen algoritmos de mas) aunque esto pasa en todo los framework si no se saben controlar .

otra cosa que me agrado fue la extensión en plugin, y aquí es donde me gustaría enfocarme ahora, me gusta mucho crear librerías, en este post les traigo mi primer plugin para jQuery, es un plugin el cual nos permite colocar un filtro a campos de textos para filtrar los caracteres que se permitirán en el campo de texto, por ejemplo para evitar que el usuario ingrese letras en un campo solo numero, o caracteres no permitidos en un password etc.

sin mas les dejo el código fuente de mi primer plugin
Download: http://www.megaupload.com/?d=JVHRIHMK

/*
 * $.fn.keyValue(exp,maxlength)
 * By JFco Diaz.
 * wariodiaz@gmail.com
 * www.devtics.com.mx
 * 19/02/2010
 * plugin jQuery, para evaluar una entrada en un input x expresión regular
 * y poder discriminar el carácter si no se encuentra en la expresión regular
 * evitando su inserccion
 *
 * @param expOarr, es un arreglo de caracteres y/o enteros que representen
 * el charCode del carácter a permitir, o bien una expresión regular que indique
 * en el patrón los caracteres que se permitirán, ademas opcionalmente coloca un
 * máximo de caracteres permitidos
 * Nota: la evaluación es del carácter que se esta tecleado no sobre la cadena ingresada
 *
 * ejemplo:
 *
 * $(".soloNumeros").keyValue(/[0-9]/);
 *
 * $(".soloNumeros").keyValue([0,1,2,3,4,5,6,7,8,9]/);
 *
 * ambos solo permiten la entrada de números o solo caracteres en minúsculas
 *
 * $(".soloNumeros").keyValue(/[a-z]/);
 *
 * o solo numeros y "-" y solo 10 caracteres
 *
 * $(".soloNumeros").keyValue([0,1,2,3,4,5,6,7,8,9,'-'],10);
 *
 * o con expresión regular
 *
 * $(".soloNumeros").keyValue(/[0-9-]/,10);
 *
 * */
(function ($){
    $.fn.keyValue=function(expOarr,maxLength){
        try{
            var $this=$(this);
            if(maxLength)
                $this.attr("maxlength",maxLength);
            $this.keypress(function(event){
                try{
                    var key = event.which;
                    if(key==0||event.charCode==0)return true;
                    if(maxLength && this.value.length==maxLength)return false;
                    if(typeof expOarr ==='object'&& expOarr.length!=undefined){
                        for(var i=0;(exp=expOarr[i++]);)
                            if(key==((typeof exp=="number")? exp : exp.charCodeAt(0)))
                                return true;
                        return false;
                    }
                    return expOarr.test(String.fromCharCode(key));
                }catch(e){
                    alert(e.message);
                }
            });
        }catch(e){
            alert(e.message);
        }
        return $this;
    }
})(jQuery);