jQuery UI Datepicker 月数答案

【问题标题】：jQuery UI Datepicker number of monthsjQuery UI Datepicker 月数
【发布时间】：2015-10-31 00:53:26
【问题描述】：

有人知道是否可以将 jQuery UI Datepicker 上显示的月数从在桌面上显示的两个月更改为在移动设备上显示的一个月。

我查看了 jQuery UI Datepicker 选项，但似乎找不到我正在寻找的答案。

我想要实现的目标类似于 http://www.lastminute.com/ datepicker 选项。

【问题讨论】：

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

您可以使用numberOfMonths 选项，它是一次显示的月数。

根据特征检测/媒体查询，您可以降低移动浏览器上的值。

代码：

$("#datepicker").datepicker({
    numberOfMonths: 2
});

演示：http://jsfiddle.net/IrvinDominin/4aj9u9sc/

【讨论】：

【解决方案2】：

$(function() {
    $("#datepicker-3").datepicker({
        appendText:"(yy-mm-dd)",
        dateFormat:"yy-mm-dd",
        numberOfMonths: 2

    });
});

在 HTML 方面

 <p>Enter Date: <input type="text" id="datepicker-3"></p>

但在此之前你必须扩展：

jquery-ui.css
jquery-1.10.2.js
jquery-ui.js

【讨论】：

【解决方案3】：

要实现基于特征检测/媒体查询的numberOfMonths 值的减少，您需要使用beforeShow 选项（您可以在原始选项列表中留下月份数，因为这将是多余的。

我的实现如下：

$('.date').datepicker({
    dateFormat: 'm/d/yy',
    beforeShow: function() {
        if ($(window).width() < 768) {
            return { numberOfMonths: 1 };
        } else {
            return { numberOfMonths: 2 };
        }
     }
});

【讨论】：