寻找JavaScript月份选择器

Question

寻找JavaScript月份选择器

javascriptjquery

49

我正在寻找一个JavaScript月份选择工具。网站上已经在使用jQuery，所以如果是一个jQuery插件就可以很好地匹配。我也可以考虑其他选择。

基本上，我需要一个简化版的jQuery UI日期选择器。我只关心月份和年份，不关心日期。使用日期选择控件会感觉过于繁琐而且还有点麻烦。我知道我可以使用一对下拉框，但那样会显得很杂乱，并且我还需要一个确认按钮。

我想象一个网格，它要么是两行六列，要么是三行四列，用于选择月份，并在顶部显示当前年份和未来几年的年份。（也许能够列出几年？我看不到任何人会需要超过一两年的时间，所以如果我能列出当前和接下来的两年，那就太好了。）

这实际上就是一个简化版的DatePicker。是否存在类似的东西？

- Adam Tuttle

你在这段时间里做了什么？我现在也正在寻找完全相同的东西。 - markus

我不得不暂停整个项目，所以目前这个问题被搁置了。 - Adam Tuttle

我已经改变了被接受的答案。新的答案正在GitHub上积极维护。 - Adam Tuttle

@AdamTuttle 不错。我也通过mod标记或者通过评论和踩的方式迫使6个最糟糕的答案被删除。我认为这个页面对于谷歌搜索到它的人来说，有帮助的机会已经显著提高了；希望它能够避免“要求我们推荐工具或软件库的问题是不适合主题”的关闭理由更长一段时间！ - Mark Amery

如果你正在寻找纯JavaScript代码片段，请点击此处获取：http://www.kvcodes.com/2018/04/simple-javascript-month-year-picker/ - Kvvaradha

6个回答

15

对于仍然关注此问题的人（就像我一样），这里有一个美观易用、与jQuery UI兼容、文档完备并经过测试的替代方案：

月份选择器示例

默认使用方式如下：

$("input[type='month']").MonthPicker();

- gustavohenke

有没有一种方法可以配置月/年格式？因此，我们可以看到2013-05而不是May 2013。 - a coder

9

在 lucianocosta.info 找到一个很好的月份选择器，看起来还不错：

Month Picker in action

更新于 2016-02-13：可用的链接。

- Ramon Tayag

只是为了帮助未来的某个人，你需要至少使用jQuery 1.4.3才能正确地使其工作。在使用jQuery 1.4.2时，我得到了“undefined”值的月份。 - redDevil

3

我曾经在一个程序中使用这个脚本。虽然它是古老的，但在所有浏览器上都可以很好地工作。如果您向下滚动到“月份选择日历”，我认为那就是您要找的东西。那里的示例将在新窗口（ew）中打开日历，但是一个设置（如第二个示例）会使其像jQuery一样显示。祝你好运。

- Paolo Bergantino

3

欢迎查看我的jQuery插件：

易于使用：

$("#myTextInput").Monthpicker();

目前可选项不多，但可以将输入限制在指定的月份范围内。

还有一些事件可以编写两个月份选择器（开始和结束日期）之间的相互依赖性。

您可以在此处找到实时演示：Codepen

您可以自由地从Github中获取源代码并更改任何内容：Github repository

- Apolo

您好，这个能够配置成发布不同的月份/年份格式，例如 yyyy-MM 吗？ - a coder

它本身并不是这样，但你可以将其拆分并反转值以达到相同的效果。 - Apolo

0

前几天我刚刚使用了一个日期选择器。我找到了另外两个有趣的例子，可能会对你有所帮助，但是如果不显示日历，我不确定你该如何实现这一点。大多数“日期选择器”都假定您想要查看日历。您可以尝试寻找一个自定义下拉菜单，其中包含一些您可以配置的自定义按钮。

以下是我查看的内容：

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

我最终使用了这个： http://jqueryui.com/demos/datepicker/ 如果你对JQuery很熟悉，你可能会有一个不错的小项目。

- jj.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cory · Accepted Answer

Ben Koehler提供了一个Jquery UI的技巧，可以从这个相关问题中获取。以下是他的原话，引用于此以方便查看。

此解决方案的JSFiddle链接

-- 这里有一个技巧（已更新为整个.html文件）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>