martes, 23 de octubre de 2012

Personalizar datepicker jQuery UI

El widget datepicker de jQuery UI es muy flexible y permite gran cantidad de opciones de personalización y configuración. A continuación se muestra un ejemplo completo de personalización del widget:


<script type="text/javascript" src="jquery.ui.datepicker-es.js"></script>
 jQuery('#datepicker').datepicker({
   minDate: new Date(2012, 7, 1),
   maxDate: new Date(2012, 10, 31),
   dateFormat: 'yy-mm-dd',
     constrainInput: true,
   numberOfMonths: 2,  //[2,1] - vertical 
   regional:'es',
   onSelect: function(dateText){
     //acciones al hacer click
   },
   beforeShowDay: function(date,inst){
    //bloquear domingos
    var noWeekend = noSunday(date);
    return noWeekend[0] ? diasOcupados1(date) : noWeekend;  
   }
});

 function noSunday(date){
    var day = date.getDay();
    return [(day > 0), ''];
  }

El el ejemplo se establecen las siguientes opciones:
  • minDate: fecha mínima del calendario.
  • maxDate: fecha máxima del calendario.
  • dateFormat: formato de las fecha.
  • constrainInput: bloquea la entrada de caracteres inválidos según el formato de fecha que este definido.
  • numberOfMonths: numero de meses a mostrar en el calendario, en este ejemplo se muestran dos meses. Por defecto se mostrarán los meses horizontalmente, pero en caso de que los necesitemos en vertical podemos hacerlo especificando el valor  [2,1] para esta propiedad (el valor 1 indicará que se muestre de forma vertical
  • regional: idioma en el que muestra el calendario. Para utilizar un idioma distinto al inglés debemos descargar el archivo correspondiente del idioma (jquery.ui.datepicker-es.js)
  • onSelect: aquí se pueden especificar el conjunto de acciones que se deseen para cuando el usuario haga click en alguna de las fechas del calendario.
  • beforeShowDay: acciones a realzar antes de mostrar el calendario. Aquí se pueden ejecutar acciones para bloquear fechas. En el ejemplo se bloquean los domingos llamando a la función noSunday.

1 comentario :

  1. Hola, este post es lo que necesito para mi trabajo, lo he probado pero no me funciona. Aquí esta mi código:

    $(document).ready(function() {
    $( "#datepicker" ).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '2016:2080',
    minDate: 0,
    onSelect: function (date) {
    var dob = new Date(date);
    var today = new Date();
    },
    beforeShowDay: function(date,inst){
    //bloquear domingos
    var noWeekend = noSunday(date);
    return noWeekend[0] ? diasOcupados1(date) : noWeekend;
    }

    }); $("#datepicker").datepicker("option","dateformat","yy-mm-dd");

    function noSunday(date){
    var day = date.getDay();
    return [(day > 0), ''];
    }




    Soy principiante con este tema, asique me serviría muchísimo cualquier ayuda, muchas gracias

    ResponderEliminar