出生日期文本框的 Datepicker 插件答案

【问题标题】：Datepicker plugin for birth date textbox出生日期文本框的 Datepicker 插件
【发布时间】：2012-12-23 01:59:38
【问题描述】：

我发现了一个非常易于使用的日期选择器，名为 jquery datepicker。但问题是当我想用它作为出生日期时。例如：我的出生年份是1986年，今年是2013年，那么我需要多次点击左箭头来减少月份，直到找到1986年。如果我的出生年份是1960年或以下，那就更麻烦了。

有人知道适合这个的日期选择器插件吗？也许是一个日期选择器，可以从 Dropbox 中选择哪个年份或月份？

【问题讨论】：

标签： jquery jquery-plugins datepicker

【解决方案1】：

简而言之：您可以通过 demo page 中的 Restricting Datepicker 部分执行此操作。

如果您稍微向下看一下demo page，您会看到“限制日期选择器”部分。使用下拉菜单指定“Year dropdown shows last 20 years”演示，并点击查看源代码：

$("#restricting").datepicker({ 
    yearRange: "-20:+0", // this is the option you're looking for
    showOn: "both", 
    buttonImage: "templates/images/calendar.gif", 
    buttonImageOnly: true 
});

你也会想做同样的事情（显然将 -20 更改为 -100 或其他东西）。

选项 #2： 正在使用 api 的 changeMonth 和 changeYear 选项。

尝试在当前年份使用“yy”，例如：

$('.datepicker').datepicker({changeYear: true, yearRange : 'yy-50:yy+1'});

【讨论】：

感谢您的回复，但我仍然很难填写我的出生日期 1986 年 2 月 24 日。它是从 2012 年开始的，所以我必须单击左箭头 312 次。我作为一个普通用户，你会花时间去做吗？即使我将默认出生年份设置为 1986 年，对于出生年份为 1960 年或以下的人来说仍然是个问题。这首先是我的问题。
没关系。我刚刚发现 jquery datepicker 可以显示其月份和年份的下拉列表。 jqueryui.com/datepicker/#dropdown-month-year
@HenryGunawan，正如我在答案中所说，您只需要使用 changeMonth 和 changeYear 选项。
@ElYusubov 哦，对不起，我没有看到 changeYear 部分。我想我回复你的时候太困了。非常感谢。
从当前年份看应该像 yearRange : '-nn:+nn'。因此，如果从今年开始我想回到 100 年前说出生日期字段，我只说： yearRange : '-100:+0'。

【解决方案2】：

我遇到了同样的问题，所以如果其他人遇到同样的问题，我想我会发布解决方案。它在上面的答案中，但您必须阅读 cmets 才能获得所有内容。

在头部：

<script src="~/Scripts/jquery-1.10.2.js"></script>

<script>
    $(function () {
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '-100:+0'
        });
    });
</script>

在 HTML 中：

<input type="text" class="form-control" id="datepicker">

这将为您提供一个日期选择器，其中月份是它自己的下拉菜单，年份是它自己的下拉菜单，并且年份从今天开始并追溯到 100 年。

【讨论】：

【解决方案3】：

在 datepicker 调用中添加以下行，以显示您要在下拉列表中显示的范围

yearRange: "1930:2025"

像这样，

$( function() {
    $( "#celeb_dob" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1930:2025"
    });
  } );

【讨论】：