Question

Here is my Interface, and i wanted the user to input only the date of his birth这是我的代码。我想禁用我的“出生日期”字段的未来日期和当前日期

<div class="form-group">
                                <label class="control-label"
                                    for="personal_information.date_of_birth">Date of Birth</label>
                                <input class="form-control" 
                                    rv-value="data.personal_information.date_of_birth"
                                    name="dateOfBirth" id="dateOfBirth" data-validate="required"
                                    data-mask="yyyy-mm-dd" placeholder="Pre-formatted birth date" />
                            </div>

Answer 1

使用纯HTML或CSS无法做到这一点。 Javascript是必需的。但是，有一种快速的方法，使用两个名为jQuery和jQueryUI的JavaScript库：

jsFiddle Demo

<强> HTML：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="MyDIV">
  Birthday: <input id="bday" type="text" />
</div>

<强>的javascript / jQuery的：

$("#bday").datepicker({
  maxDate: "-1"
});

请注意，您可以使用：

maxDate: "-20Y"

确保出生日期必须至少20岁。

如果您不确定将javascript代码放在何处，可以在<script>代码之间将其包含在HTML中（从技术上讲，如果您将其粘贴在正文中它会起作用，但实际上它应该进入<head>）：

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#bday").datepicker({
              maxDate: "-1"
            });
        });
    </script>
</head>
<body>

<div id="MyDIV">
  Birthday: <input id="bday" type="text" />
</div>

</body>

禁用未来日期和当前日期

1 个答案: