Datepicker：显示下一个/上个月的天数（如果在当前一个月的结束/开始周）

Question

这是datepicker默认显示一个月的方式，数字从月初开始，到月末的最后一个结束：

问题是我需要用数字填充整个日历，如下所示：

所以我发现选项showOtherMonths到true可以解决问题：

但是如果你注意到，它增加了一周，我不需要，

知道为什么吗？

- 编辑 -

整个代码：

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 );
});

标记：

<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

试试这个：

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

请显示更多代码，以便给您更深入的答案。

Answer 2

一切似乎都运行良好。如果问题仍然存在，我会假设是一种不同类型的脚本或CSS与您已经存在的相冲突，可能是一个过时的jquery库。

$('.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\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>