日期选择器上/下个月日期可选

Posted

技术标签:

【中文标题】日期选择器上/下个月日期可选【英文标题】:Datepicker previous/next month dates selectable 【发布时间】:2012-03-30 03:55:51 【问题描述】:

我想在我的 datePicker 上显示上个月和下个月的日期。就像这样:

这些日期也应该是可选择的。 jQuery 默认 datePicker 中是否有任何选项,或者我可以将 DatePicker 修改为这样吗?

【问题讨论】:

【参考方案1】:

应该这样做:

<script>
    $(function() 
        $( "#datepicker" ).datepicker(
            showOtherMonths: true,
            selectOtherMonths: true
        );
    );
    </script>

签出:http://jsfiddle.net/fLveY/2/

【讨论】:

【参考方案2】:

正如isJustMe 所提到的,这就是这样做的方法。这是一个带有小插件的版本,我觉得它非常有用。如果您单击下个月或上个月的日期,日期选择器会自动切换到该月:

jQuery( '#datepicker' ).datepicker( 

    showOtherMonths: true,
    selectOtherMonths: true,

    onSelect: function( string, element ) 

        // Change month on click on other days

        var day  = element.selectedDay;
        var mon  = element.selectedMonth;
        var year = element.selectedYear;

        var target = jQuery( element.dpDiv ).find( '[data-year="'+year+'"][data-month="'+mon+'"]' ).filter( function() 

            return jQuery(this).text().trim() == day;

         );

        if( target.hasClass( 'ui-datepicker-other-month' ) ) 

            if( parseInt( target.text().trim() ) > 15 ) 

                jQuery( element.dpDiv ).find( '.ui-datepicker-prev' ).click();

             else 

                jQuery( element.dpDiv ).find( '.ui-datepicker-next' ).click();

            

        



    ,

 );

在此感谢adeneo and his answer 获取当前元素。

【讨论】:

以上是关于日期选择器上/下个月日期可选的主要内容,如果未能解决你的问题,请参考以下文章

如果我在 vuetify 的日期选择器中单击下个月的图标,如何添加按钮单击以调用方法?

如何在日期选择器中显示下个月和上个月的名称,而不仅仅是箭头 <,>

jQueryUI 日期选择器上的焦点事件

在日期选择器上设置日期 jquery ui datepicker

在日期选择器上禁用过去的日期

日期选择器上的自定义输入字段