Posted in

Datepicker jquery habilitar dias y marcarlos

Para marcar dias del calendario datepicker con colores personalizados y habilitar o deshabilitar la selección de dias lo haremos de la siguiente forma.
Primero creo dos colores, para ello dos clases en css.

.ui-highlight-green .ui-state-default{
background: green !important;
border-color: green !important;
color: white !important;
}
.ui-highlight-red .ui-state-default{
background: red !important;
border-color: red !important;
color: white !important;
}

Ahora creamos e inicializamos el calendario, en la parte superior del código hay dos arrays, los dias a marcar en verde y rojo. Podemos escojer como se ve en el ejemplo la opción con el calendario desplegado u oculto de inicio.

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- si queremos que sea necesario hacer foco en un imput para desplegar el calendario -->
<input type="text" id="datecalendar" />
<!-- Si por el contrario queremos que se vea el calendario por defecto -->
<div id="datecalendar"></div>
var datesActivas = ['2014-04-05','2014-04-15','2014-04-25'];
var datesCompletas = ['2014-04-06','2014-04-19','2014-04-20'];
jQuery(function(){
       jQuery('#datecalendar').datepicker({
ochangeMonth : true,
ochangeYear : true,
obeforeShowDay : function(date){
ovar y = date.getFullYear().toString();
ovar m = (date.getMonth() + 1).toString();
ovar d = date.getDate().toString();
oif(m.length == 1){ m = '0' + m; }
oif(d.length == 1){ d = '0' + d; }
ovar currDate = y+'-'+m+'-'+d;
oif(datesActivas.indexOf(currDate) >= 0){
oreturn [true, 'ui-highlight-green'];
o}if(datesCompletas.indexOf(currDate) >= 0){
oreturn [false, 'ui-highlight-red'];
o}else{
oreturn [false];
o}
o},
onumberOfMonths: 2,
oshowButtonPanel: true,
ofirstDay: 1,
odateFormat : 'yy-mm-dd',
oonSelect: function(dateText, inst) { 
oalert(dateText);
o}
o});
})

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *


The reCAPTCHA verification period has expired. Please reload the page.