【问题标题】:jQuery Datepicker with Separate Year and Month Navigation带有单独年份和月份导航的 jQuery Datepicker
【发布时间】:2018-08-12 08:23:23
【问题描述】:

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

我在下面附上模型。

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

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

与月份选择类似,用户只需单击月份即可列出月份,并且还应提供单独的月份导航。

我找到的最接近的是Air DatePickerBootstrap DatePicker,但它们都不支持年份和月份的单独导航。

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

【问题讨论】:

    标签: jquery datepicker bootstrap-datepicker daterangepicker


    【解决方案1】:

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

    我没有对当前可用的满足您要求的 datePickers 进行广泛搜索。我绝对记得看到/使用一个作为用户年龄选择器(不记得它的名称或我使用它的网站,并且大多数网站已经从 datepicker 迁移到 datepicker,因此代码可能已经丢失在 git 的保管库中)

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

    我对其 datepicker.jsdatepicker.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>',
    

    【讨论】:

    • 我正在使用 Air DatePicker 进行您的更改。像魅力一样工作。谢谢@RoryGS。
    • 很高兴,很高兴它可以满足您的要求。我喜欢 Air DatePicker 如何呈现年/月选项。已将其添加到我的某些产品的插件列表中。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多