ccc

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, '', ''];
                    }
                   
                }
            }
        }
    });
});

No hay comentarios:

Publicar un comentario