ccc

Mostrando entradas con la etiqueta JQueryui: Datepicker. Mostrar todas las entradas
Mostrando entradas con la etiqueta JQueryui: Datepicker. Mostrar todas las entradas

JQueryui Datepicker: Varios

// Evento al cambiar el mes del calendario
$("#datepicker").datepicker({
           onChangeMonthYear: function (year, month, inst) {
                 console.log("Me has cambiado de mes y anno:"+month+"/"+year);
           }
});

// Evento al seleccionar una fecha del calendario
$("#datepicker").datepicker({
          onSelect: function (date) { // dd/mm/yyyy
                 console.log("fecha seleccionada:"+date);
          }
});

// Evento para habilitar solo unos días concretos del calendario
var enableDays = ["2017-11-07", "2017-11-07", "2017-11-21", "2017-11-22"];

function enableAllTheseDays(date) {
    var sdate = $.datepicker.formatDate( 'yy-mm-dd', date)
     if($.inArray(sdate, enableDays) != -1) {
        return [true];
    }
    return [false];
}

$("#datepicker").datepicker({
   beforeShowDay: enableAllTheseDays });


Obtener el día y el mes de la fecha seleccionada:
$('#fecha').datepicker({
  language: "es",
  autoclose: true,
  minDate : "+0",
  beforeShowDay: function(date){
      console.log(date);
      var dia = date.getDate(); // obtiene el día del mes por ejemplo 15
      var mes = date.getMonth(); // obtiene el mes por ejemplo 7
      console.log('dia: '+dia+' mes: '+mes);
     // desabilita los sábados y domingo y tb el 15 de Agosto en el calendario
      if(date.getDay()== 0 || date.getDay()== 6 || (dia == 15 && mes == 7)) {
          return [0];
      }   else {
          return [1];
      }
  },


Deshabilitar los fines de semana:
$("#datepicker").datepicker({
   beforeShowDay: $.datepicker.noWeekends
});

Que una funcion llame a otra (ej: dias enabled pero descartar de esos dias los fines de semana):
var enableDays = ["2019-02-22","2019-02-23","2019-02-24","2019-02-25","2019-02-26", "2019-02-27", "2019-02-28"];
function checkIfWeekend(date) {
  var day = date.getUTCDay();
  return [(day != 5 && day != 6)]; // sab y dom
}

function enableAllTheseDays(date) {
  var sdate = $.datepicker.formatDate('yy-mm-dd',date);
  if($.inArray(sdate, enableDays) != -1) {
   return checkIfWeekend(date);
  }
  return [false];
}

JQueryui: Datepicker especificar que empiece en una fecha pero que muestre meses anteriores

// Suponiendo que hoy es 07/11/2017 mostrará calendario de Nov, Dic y Ene pero se mostrará desde Diciembre

$("#datepicker").datepicker({
minDate: 0, // la fecha de hoy
maxDate: "+3M +0D",
defaultDate: '01/12/2017'
});

Jqueryui Datepicker: Varios

Deshabilitar en el calendario los días anteriores al actual:

var dateToday = new Date();
$("#fecha_max").datepicker({
   minDate: dateToday,
   maxDate: "+2M +10D" // 2 mes y 10 días a partir del actual
});

Si tiene efecto overlay para que se cierre el calendar sin elegir una fecha:
$("body").on("click","#ui-datepicker-div",function(){
  $("#fecha_max").datepicker("hide");
});

Establecer rango de años:
...
yearRange: '1940:2017'

JQueryui: datepicker personalizar días concretos por colores

<input type='text' id='txtDate' />

<style>
.color1 a{
   background-color : #FF0000 !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}
.color2 a{
   background-color : #2C2961 !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}
.color3 a{
   background-color : #FFF000 !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}
</style>

$(document).ready(function() {
    var SelectedColor1 = {};
    SelectedColor1[new Date('10/05/2015')] = new Date('10/05/2015');
    SelectedColor1[new Date('10/04/2015')] = new Date('10/04/2015');
    SelectedColor1[new Date('10/06/2015')] = new Date('10/06/2015');
   
    var SelectedColor2 = {};
    SelectedColor2[new Date('10/09/2015')] = new Date('10/09/2015');
   
    var SelectedColor3 = {};
    SelectedColor3[new Date('10/14/2015')] = new Date('10/14/2015');
    SelectedColor3[new Date('10/15/2015')] = new Date('10/15/2015');

    $('#txtDate').datepicker({
        beforeShowDay: function(date) {
           
            var Highlight = SelectedColor1[date];
             if (Highlight) {
                return [true, "color1", Highlight];
            }
            else {
                // return [true, '', ''];
                 var Highlight = SelectedColor2[date];
                 if (Highlight) {
                    return [true, "color2", Highlight];
                }
                else {
                    // return [true, '', ''];
                    var Highlight = SelectedColor3[date];
                    if (Highlight) {
                        return [true, "color3", Highlight];
                    }
                    else {
                       return [true, '', ''];
                    }
                   
                }
            }
        }
    });
});

JQueryui: Datepicker

$(document).ready(function() {
     $.datepicker.regional['es'] = {
         closeText: 'Cerrar',
         prevText: '<Ant',
         nextText: 'Sig>',
         currentText: 'Hoy',
         monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
         monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
         dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
         dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
         dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
         weekHeader: 'Sm',
         dateFormat: 'dd/mm/yy',
         firstDay: 1,
         isRTL: false,
         showMonthAfterYear: false,
         yearSuffix: ''
     };
    $.datepicker.setDefaults($.datepicker.regional['es']);
    $("#fh_sesion").datepicker();
});

-------------------------------------------------------------

Poner una fecha por defecto:
$('#fh_nacimiento').datepicker();
$('#fh_nacimiento').datepicker("setDate", "31/05/1977");


Especificar un rango de años en el combo de años:
$.datepicker.regional['es'] = {
    ...
    yearRange: '1940:2016',
    defaultDate: '01/01/1990' // en el combo de años que quede marcado 1990
};
-------------------------------------------