日期选择器：显示从下一个/上一个月开始的天数（如果在当前一个月的结束/开始一周中）

Question

This is how datepicker shows a month by default, numbers start the first of the month and end the last of the month:

The thing is that I need to fill the whole calendar with numbers, like this:

So I found that the option showOtherMonths to true does the trick:

But if you notice, it adds an extra week, Wich I dont need,

Any idea why?

-EDIT-

The whole code:

jQuery('.datepicker').each(function (i) {
    var $item = jQuery(this);
    var fechas = $item.data('fechas') != '' ? $item.data('fechas') : '';    
    var urls = $item.data('urls') != '' ? $item.data('urls') : '';
    var tipos = $item.data('tipos') != '' ? $item.data('tipos') : '';
    var titulos = $item.data('titulos') != '' ? $item.data('titulos') : '';
    var options = {
        'dateFormat' : dateFormat,
        'display' : $item.data('display') == '' ? '' : $item.data('display'),
        firstDay: 1,
        numberOfMonths: $item.data('months') == '' ? 1 : $item.data('months'),
        showOtherMonths: true,
        selectOtherMonths: false
    }
    /* Marcar los dias con sesion */
    if (fechas.length) {
        options.beforeShowDay = function(datestr) {
            var fecha = jQuery.datepicker.formatDate( dateFormat, datestr);
            var arr = [true, ''];
            for( var j = 0 ; j < fechas.length ; j++ ) {  
                if ( fecha == fechas[j] ) {
                    return [true, 'dia-con-evento '+tipos[j], titulos[j], 'link'];
                } 
            }
            return arr;
        }
    }       
    /* Agregar links a los días */
    options.onSelect = function (datestr) {
        if ( fechas.indexOf(datestr) != -1 ) {
            location.href =  urls[ fechas.indexOf(datestr) ];                   
        }
    }   
    $item.datepicker( options );
});

Markup:

<div class="datepicker year" 
             data-display="inline"
             data-fechas='["13\/05\/2015","11\/02\/2015","11\/03\/2015","10\/06\/2015","08\/04\/2015","08\/07\/2015","30\/03\/2015","30\/03\/2015","04\/05\/2015","04\/05\/2015","14\/05\/2015","24\/05\/2015","03\/06\/2015","18\/06\/2015","28\/06\/2015","03\/06\/2015","03\/06\/2015","13\/06\/2015","07\/07\/2015","08\/07\/2015","09\/07\/2015","07\/08\/2015","17\/08\/2015","15\/11\/2015"]'
             data-urls='["\/sescam-la-ventana\/?q=sesion\/1","\/sescam-la-ventana\/?q=sesion\/2","\/sescam-la-ventana\/?q=sesion\/3","\/sescam-la-ventana\/?q=sesion\/4","\/sescam-la-ventana\/?q=sesion\/5","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6","\/sescam-la-ventana\/?q=caso\/6"]'
             data-tipos='["caso","caso","caso","caso","caso","caso","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito"]'
             data-titulos='["El tratamiento del asma: \"a la carta\" vs \"menu\u0301 del di\u0301a","El caso del Sr. Minotaruro en el laberinto de los ARA II","A vueltas con el protector...","El humor es como el colesterol, unos tienen del bueno, otros del malo","Deprescripcio\u0301n: En busca de la cordura","Mesa redonda BBPP Premio 1a edicio\u0301n","Programaci\u00f3n del caso en La Ventana","Preparaci\u00f3n del materia","Preparaci\u00f3n del materia","Entrega del material","Aprobaci\u00f3n del material y lanzamiento de la sesi\u00f3n cl\u00ednica","Reuni\u00f3n de preproducci\u00f3n","Grabaci\u00f3n","Validaci\u00f3n del v\u00eddeo","Validaci\u00f3n del v\u00eddeo","Publicaci\u00f3n de material en la plataforma de eformaci\u00f3n","Validaci\u00f3n del material en la plataforma de eformaci\u00f3n","Validaci\u00f3n del material en la plataforma de eformaci\u00f3n","Publicaci\u00f3n de v\u00eddeo en web y plataforma","Emisi\u00f3n de la sesi\u00f3n cl\u00ednica","Apertura m\u00f3dulos eformaci\u00f3n","Finalizaci\u00f3n del curso","Presentaci\u00f3n de alumnos aprobados","Pago a ponente"]'  
             data-months='6'
        >
        </div>

Answer 1

DEMO: FIDDLE

Try this:

$( "#datepicker" ).datepicker({
    showOtherMonths: true,
    selectOtherMonths: true
});

Please show more of your code, to give you a more in depth answer.

Answer 2

Everything seems to be running fine. If the problem persists, i would assume is a different type of script or CSS conflicting with what you have already, perhaps an outdated jquery library.

 $('.datepicker').each(function (i) { var $item = $(this); var fechas = $item.data('fechas') != '' ? $item.data('fechas') : ''; var urls = $item.data('urls') != '' ? $item.data('urls') : ''; var tipos = $item.data('tipos') != '' ? $item.data('tipos') : ''; var titulos = $item.data('titulos') != '' ? $item.data('titulos') : ''; var options = { 'dateFormat' : "dd/mm/yyyy", 'display' : $item.data('display') == '' ? '' : $item.data('display'), firstDay: 1, numberOfMonths: $item.data('months') == '' ? 1 : $item.data('months'), showOtherMonths: true, selectOtherMonths: false } /* Marcar los dias con sesion */ if (fechas.length) { options.beforeShowDay = function(datestr) { var fecha = $.datepicker.formatDate("dd/mm/yyyy", datestr); var arr = [true, '']; for( var j = 0 ; j < fechas.length ; j++ ) { if ( fecha == fechas[j] ) { return [true, 'dia-con-evento '+tipos[j], titulos[j], 'link']; } } return arr; } } /* Agregar links a los días */ options.onSelect = function (datestr) { if ( fechas.indexOf(datestr) != -1 ) { location.href = urls[ fechas.indexOf(datestr) ]; } } $item.datepicker( options ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <div class="datepicker year" data-display="inline" data-fechas='["13\\/05\\/2015","11\\/02\\/2015","11\\/03\\/2015","10\\/06\\/2015","08\\/04\\/2015","08\\/07\\/2015","30\\/03\\/2015","30\\/03\\/2015","04\\/05\\/2015","04\\/05\\/2015","14\\/05\\/2015","24\\/05\\/2015","03\\/06\\/2015","18\\/06\\/2015","28\\/06\\/2015","03\\/06\\/2015","03\\/06\\/2015","13\\/06\\/2015","07\\/07\\/2015","08\\/07\\/2015","09\\/07\\/2015","07\\/08\\/2015","17\\/08\\/2015","15\\/11\\/2015"]' data-urls='["\\/sescam-la-ventana\\/?q=sesion\\/1","\\/sescam-la-ventana\\/?q=sesion\\/2","\\/sescam-la-ventana\\/?q=sesion\\/3","\\/sescam-la-ventana\\/?q=sesion\\/4","\\/sescam-la-ventana\\/?q=sesion\\/5","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6","\\/sescam-la-ventana\\/?q=caso\\/6"]' data-tipos='["caso","caso","caso","caso","caso","caso","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito","hito"]' data-titulos='["El tratamiento del asma: \\"a la carta\\" vs \\"menu\́ del di\́a","El caso del Sr. Minotaruro en el laberinto de los ARA II","A vueltas con el protector...","El humor es como el colesterol, unos tienen del bueno, otros del malo","Deprescripcio\́n: En busca de la cordura","Mesa redonda BBPP Premio 1a edicio\́n","Programaci\ón del caso en La Ventana","Preparaci\ón del materia","Preparaci\ón del materia","Entrega del material","Aprobaci\ón del material y lanzamiento de la sesi\ón cl\ínica","Reuni\ón de preproducci\ón","Grabaci\ón","Validaci\ón del v\ídeo","Validaci\ón del v\ídeo","Publicaci\ón de material en la plataforma de eformaci\ón","Validaci\ón del material en la plataforma de eformaci\ón","Validaci\ón del material en la plataforma de eformaci\ón","Publicaci\ón de v\ídeo en web y plataforma","Emisi\ón de la sesi\ón cl\ínica","Apertura m\ódulos eformaci\ón","Finalizaci\ón del curso","Presentaci\ón de alumnos aprobados","Pago a ponente"]' data-months='6' > </div>