jQuery 具有独立年月导航的日期选择器

Question

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

我在下面附上模型。

单击日期输入字段时，它应该显示这个正常的日历。

如果用户必须 select 一个非常旧的年份，用户只需点击年份，它将显示如下年份，并且应该可以使用单独的年份导航来查看紧邻的上一个或下一个 select离子.

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

我发现最接近的是 Air DatePicker and Bootstrap DatePicker，但它们都不支持年和月的单独导航。

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

Answer 1

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

我没有对满足您要求的当前可用的日期选择器进行广泛搜索。我绝对记得看到/使用一个作为用户年龄选择器（不记得它的名字或我使用它的网站，而且大多数网站已经从 datepicker 迁移到 datepicker，所以代码可能已经丢失在 git)

也就是说我看了一下Air DatePicker，看起来很漂亮，我明白你为什么提到它了。

我对其 datepicker.js 和 datepicker.css 文件做了一些调整，似乎可以通过一些更改来完成您需要的操作。

正如您在下面看到的，我将标题分成了 3 个。 Plunker 包含修改后的文件。

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

我唯一的保留意见是：

随着 Air Datepickers 新版本的改进和错误修复，您需要再次修改。或将此请求提交给其创建者。
如果您使用其他一些可用的 'air datepicker' 选项，结果可能会出乎意料。

开发您自己的插件听起来像是一项繁重的任务，而是将您最喜欢的插件可视化，已经包含您需要的大部分功能，然后尝试对其进行扩展。我现在对广播日期选择器的扩展在我看来是一个黑客。根据您需要的播出日期选择器选项，它可以更好地编码。

祝你好运。

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>',

jQuery 具有独立年月导航的日期选择器

jQuery Datepicker with Separate Year and Month Navigation

jquery

datepicker

daterangepicker

bootstrap-datepicker