具有单独的年月导航功能的jQuery Datepicker

Question

我有一个与日期选择器有关的特定新要求。我在Google的不同链接上经历了很多日期时间选择器，但还没有找到符合我要求的日期选择器。

我在下面附上样机。

单击日期输入字段时，它应显示此普通日历。

如果用户必须选择非常旧的年份，则只需单击年份，它将显示以下年份，并且应该可以使用单独的年份导航来直接选择上一个或下一个。

类似地，选择月时，用户只需单击月份，它就会列出月份，并且还应提供单独的月份导航。

我找到的最接近的是Air DatePicker和Bootstrap DatePicker，但是它们都不支持“年”和“月”的单独导航。

我应该尝试从头开始自己开发此功能，还是有其他支持这些功能的库？

Answer 1

对用户年龄选择器等的合理要求。

我没有对满足您要求的当前可用datePickers进行广泛的搜索。我肯定记得曾经/曾经使用它作为用户年龄选择器（无法回忆起它的名称或我使用它的网站，并且大多数站点已从datepicker迁移到datepicker，因此代码可能已经丢失在git库中了）

那是说我看过 Air DatePicker ，看起来很漂亮，我明白你为什么提到它了。

我已经对其 datepicker.js 和 datepicker.css 文件进行了一些调整，似乎可以做一些更改后所需的操作。

如下所示，我将标题分为3个。 Plunker包含已修改的文件。

我建议您使用诸如 WinMerge 之类的东西，并将air datepicker original files与我在plunker上更改过的东西进行比较。应该很容易根据需要进一步扩展它。

我唯一的保留意见是：

• 随着Air Datepickers新版本的改进和错误修复，您需要再次进行修改。或将此请求提交给其创建者。
• 如果您使用其他一些“空中日期选择器”选项，则结果可能会出乎意料。

开发自己的声音听起来像是一项繁重的任务，而要以可视化方式看待您喜欢的插件，该插件已经包含了您所需的大多数功能，并尝试对其进行扩展。现在，我扩展空中约会选择器的功能在我心中是个骇客。根据广播日期选择器的选项，您可能需要对其进行更好的编码。

祝你好运。

plunker demo

var template = '' +
    '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
    '<div class="datepicker--nav-title-left">#{titleLeft}</div>' + 
    '<div class="datepicker--nav-title-centre">#{titleCentre}</div>' + 
    '<div class="datepicker--nav-title-right">#{titleRight}</div>' +
    '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',